Getting data from web server with jQuery

Question

Here is the scenario: I am getting data from database through web server. Based on that data page sends another request to the same server to perform some action. Simplified structure is the following:

var datacon;
$.post('method',function(data){
   datacon = data;
   // populating some tags;
}) // end of post
//some other staff happening;
$.post('other',{datacon}, function(env){
...// taking data from populated tags
   $("div").load(env);
...
}) // end of post

This happens every time user enters the page. This code doesn't work in a sense that datacon is empty when the page is opened. But if I will refresh it once or twice, it starts working. Second $.post works perfectly, checked hundreds of times. I changed first $.post with $.get, but it doesn't help.

Probably it concerns asynchronous / synchronous calls. I don't understand much why it happens. Please help.

p.s. server is CherryPy.

Mike Johnston · Accepted Answer · 2012-08-08 22:24:06Z

1

As these calls are asynchronous, it possible that the second call is running before the first has completed. To ensure that they run in the correct order, place the second ajax call in a done() function at the end of the first. That way, the second will only be run when the first is finished.

Here is a sample from a project I'm working on:

    $("#leftcolumn").activity();
    $.ajax({
            type: "GET",
            url: "/search",
            cache: false,
            data: {searchterm: searchterm}
            }).done( function(reply) {
                $("#leftcolumn").activity(false);
                showSearchResults(reply);
                });

The first line shows a progress indicator on the screen. Then the ajax call does a search. At the end in .done, I then disable the progress indicator I was showing and then display the search results. Putting the code I want to execute in .done guarantees that it won't run until the ajax call is finished.

edited Aug 8, 2012 at 22:24

answered Aug 8, 2012 at 19:36

Mike Johnston

3481 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rustam Aliyev Over a year ago

Mike, could you please explain a bit more? What is done() function?

ach Over a year ago

I believe that what Mike is suggesting could just be achieved by moving the second POST into the callback function of the first.

ach · Accepted Answer · 2012-08-08 19:35:17Z

1

The callback functions are executed asynchronously, that is, once the data is received from the server. Your second POST is likely being executed before the response from the first POST is returned. You can change your first post() to ajax() and set the 'async' to 'false'. See http://api.jquery.com/jQuery.ajax/

The above is a bit kludgy though -- ideally everything that depends on the result of an AJAX call should go in the callback method. Try moving the second POST inside of the callback of the first one, for example. The setting of flags like you are trying to do could be considered a code smell.

answered Aug 8, 2012 at 19:35

ach

6,2541 gold badge27 silver badges28 bronze badges

Collectives™ on Stack Overflow

Getting data from web server with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related