Diplaying messages on ajax spinner

Question

I am making an ajax call and on success calling some more functions. During the call I am displaying the spinner before and hiding it on completion. I need to display some message with spinner like which function is getting called by success

<div id="message"><i class="fa fa-spinner fa-spin"></i></div> is markup for spinner

function runAjax(){

    $.ajax({
        url:"demo_test.txt",
        beforeSend:function(){
           $('#message').show();
        },
        success:function(result){
           displaymessage1();
        },
        complete:function(){
           $('#message').hide();
        }
    });
}

function displaymessage1(){
    $('#message').append('This is message 1');
    displaymessage2();
}

function displaymessage2(){
    $('#message').append('This is message 2');
    displaymessage3();
}
function displaymessage3(){
    $('#message').append('This is message 3');
}

As soon as the "displaymessage1()" is called, I want to see the message on spinner and then for displaymessage2() and displaymessage3();

the problem is message is not appearing until the success function completes. Once success completes, messages appearing but within fraction of second it disappears as the ajax is completed.

I need to display it to create a processing effect so, that user will come to know that which method is running.

I have also tried by setting async:false, but still it was not helpful.

Please help, Thank You

no...messages are appearing....but they are not appearing till the success block is finished...once sucess is finished they are appearing at once. — Sadique, Oct 28 '14 at 19:31
In the code you've given, the function names don't match the calls, and the give code won't work because there is an error in the object - there are no commas where they should exist. — Popnoodles, Oct 28 '14 at 19:31
*"the problem is message is not appearing until the success function"* You are making the call inside the success function. I suspect what you you think the functions success and complete (deprecated) do is not what they actually do. http://stackoverflow.com/questions/5240876/difference-between-success-and-complete — Popnoodles, Oct 28 '14 at 19:34
actually, the code above is dummy code. In real code I am getting a big JSON of about 33k lines which is getting parsed by the function which I am calling from success block. check this url [link](http://oboejs.com/examples) and check the section titled "Giving some visual feedback as a page is updating" I am trying to achieve something like this by using normal Ajax JS and Jquery — Sadique, Oct 28 '14 at 20:04

Koti Panga · Answer 1 · 2014-10-29T00:50:59.980

Here I created code-snippet to track/log the statuses, you can also see Working Fiddle here

Below code-snippet has JavaScript, CSS and HTML code blocks
(You can run the snippet at the end)

    //Assumption => delayTime [0: Start,    >0: Complete,    undefined: for_other_cases ]
    function displayMessage(statusText, delayTime) {
        var clear = function () {
            $("#state", this).empty();
        },
        $m = $('#message').show();

        if (delayTime == 0) clear.call($m);

        $('<li/>', {
            text: statusText
        }).appendTo($m.children('#state'));

        if (delayTime) $m.fadeOut(delayTime, clear);
    }

    function runAjax() {
        $.ajax({
            dataType: "jsonp",
            url: 'http://jsfiddle.net/echo/jsonp/',
            beforeSend: function () {
                displayMessage("Request Started...", 0);
            },
            data: {
              'text': 'some text',
              'text2': 'another text'
            }
        }).done(function (response) {
            displayMessage("Request Processed successfully!");
        }).fail(function () {
            displayMessage("Request failed!");
        }).always(function () {
            displayMessage("Action finished and status message will be cleared in 3 seconds", 3000);
        });
    }

    $(function () {
        $("#testBtn").on("click", runAjax);
    });

ul {
    margin: 5px;
    border: 2px dashed #999;
    padding: 10px;
}
ul>li {
    line-height:30px;
    list-style:none;
    border-bottom:1px dashed silver;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="testBtn" type="button">Click Me!</button>

<div id="message"> <i class="fa fa-spinner fa-spin"></i>
  <ul id='state'>
    <li>Message Log... (this item only for testing)</li>
  </ul>
</div>

actually, the code above is dummy code. In real code I am getting a big JSON of about 33k lines which is getting parsed by the function which I am calling from success block. check this url [link](http://oboejs.com/examples) and check the section titled "Giving some visual feedback as a page is updating" I am trying to achieve something like this by using normal Ajax JS and Jquery — Sadique, Oct 28 '14 at 20:01
Do you want to manage both displaying message and handling business logic by using the `result` with same method `displaymessage1` — Koti Panga, Oct 28 '14 at 20:06
the scenario is the moment "displaymessage1()" is called , I should see the message on spinnerbox and then when "displaymessage2()" immediately I should see the meesage of displaymessage2 on spinner and then for displaymessage3 nd after that spinner should hide as the ajax will be completed after displaymessage3() — Sadique, Oct 28 '14 at 20:09
I you have checked the link I have added in previous comment, and went through that section...you will come to know about what I want to do — Sadique, Oct 28 '14 at 20:12

Diplaying messages on ajax spinner

1 Answers1