JSFiddle - React, Tailwind, and code Playground

by oumichaelm

HTML

<h2>Simple page</h2>
<input type="button" id="switchOff" value="click"/>
<p id="ajaxResult"></p>

<div id="loading" title="my ajax loading dialog"> 
    <p>Please wait ...</p>
</div>

JavaScript

$('#switchOff').on("click",  ajaxCall);
    
$("#loading").dialog({
    hide: 'slide',
	show: 'slide',
	autoOpen: false
});

function ajaxCall() {
    $.ajax({
        url: '/echo/html/',
        data: { html: '<p>JSON result</p>' , delay: 3},
        method: 'post',
        beforeSend: function(){
           $("#loading").dialog('open').html("<p>Please Wait...</p>");
        },
        success: function(data) {
            $('#loading').html("<p>Result Complete...</p>");
            $('#ajaxResult').html(data);
         }
    });
}