I have a AJAX function like this:

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

I am applying AJAX in a select statement:

<select onchange="change_session()" name="select_path" id="select_path">

              <option name="server_id" id="select_path" value="{{ i.id }}">{{ active }}</option>
              {% for i in session_info %}
              <option name="server_id" id="select_path" value="{{ i.id }}">{{ i.session_name }}</option>
               {% endfor %}
               <input type="hidden" id="change_session_id" value="{{ i.id }}" />
            </select>

Everything is working fine but while changing the option in the select statement the content takes a time to load and the option statement freezes until the function change_path is pleted. So I want to add the message "Loading"in the div element while the loading pletes.

I have a AJAX function like this:

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

I am applying AJAX in a select statement:

<select onchange="change_session()" name="select_path" id="select_path">

              <option name="server_id" id="select_path" value="{{ i.id }}">{{ active }}</option>
              {% for i in session_info %}
              <option name="server_id" id="select_path" value="{{ i.id }}">{{ i.session_name }}</option>
               {% endfor %}
               <input type="hidden" id="change_session_id" value="{{ i.id }}" />
            </select>

Everything is working fine but while changing the option in the select statement the content takes a time to load and the option statement freezes until the function change_path is pleted. So I want to add the message "Loading"in the div element while the loading pletes.

• javascript
• html
• ajax

5 Answers 5

You must change async:false to async:true because making it false is no more an asynchronous request.

You can use the callback methods of JQuery to do something before sending the AJAX request in beforeSend block and after the pletion you can use plete callback to hide the loading message.

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                beforeSend: function ( xhr ) {    
                     $("#loadingDIV").show();
                },
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                },
                plete : $("#loadingDIV").hide()
            });

}

You should remove the async:false which freezes the window. Then before you make the AJAX call you display the loading message in the dom, and hide it on success:

function change_session(val) {
var change_session_id=document.getElementById('select_path').value;

$("#transfer1").html("Loading...");

  $.ajax({
            type: "GET",
            url: "/change_path/",
            data: {change_session_id:change_session_id},
            success: function(data){

                $('#transfer1').html(data)
                    .css("display", "block");

            }
        });

 }

And when already are using jQuery you could use jQuery selectors/functions instead of plain JavaScript. :)

jQuery has some events built in for this.

/**
 * onAjax -> Loading indicator 
 */
$("body").on({
    ajaxStart: function() { 
        $(this).addClass("loading"); // I mostly use this. It adds a class to the body.
    },
    ajaxStop: function() { 
        $(this).removeClass("loading"); 
    }    
});

So in the css you could do something like:

#loading-ind {position:absolute; top:0; left:0; height:100%; width:100%; display:none;}
body.loading #loading-ind {display:block;}

These CSS rules are just an example, the important property is display. The rest you can set to whatever you like.

You can however do all kind of things instead of removing/adding a class ;) In your case it would be adding the 'loading..' text to the div. Keep in mind these events fire on ALL ajax calls, so don't know if that's the best option.

css code :

.loadingMask {  
    background: url(loader.gif) center 50% no-repeat #000000; 
    top:0; 
    left:0; 
    position:fixed; 
    height:100%; 
    width:100%; 
    opacity:0.7;
    filter:alpha(opacity=70); 
    z-index:12030   
 }

this css will generate an loading overlay to your web page..

in background property give any loading image path.. you can generate your Loading images with the ajaxload.info Generator.

HTML :

<div class="loadingMask" id="loadingMask" style="visibility: hidden;"></div>

JavaScript :

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                beforeSend :function(){
                    $("#loadingMask").css('visibility', 'visible');
                },
                data: {change_session_id:change_session_id},
                success: function(data){
                    $("#loadingMask").css('visibility', 'hidden');
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

One workaround is to add a Bootstrap Tooltip to any DOM elements which will invoke the change_session(val), with a message about (potential) loading time if clicked.

It's not the best, but if you assume your user is close to clicking on the entry and therefore hovering over it, then you know the message will display.