How to add a loading.. message in the AJAX call?

Question

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 completed. So I want to add the message "Loading"in the div element while the loading completes.

Answer 1

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 completion you can use complete 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";
                },
                complete : $("#loadingDIV").hide()
            });

}