CODEWITHSUNDEEP
jquerymobile
Cymbals
Cymbals

Reputation: 1174

Multiple Ajax calls / JQuery / JQueryMobile


I've got two divs, we'll all them id=one and id=two for ease. There is an ajax call that determines either "one" or "two" should be shown. Both will not be shown.

div one = message
div two = input box

Step A) A generic ajax call populates the message as needed and makes the div visible.
Step B) I then use JQuery to determine if div one is visible.
If so, make div two invisible. Else, make div two visible.

The problem is, it works, but Step B isn't seeing the change in the html even though it happened...until the second event is fired (keypress or autocomplete).

I am wondering if it might be because JQuery Mobile has to first update the fields underneath.

The simplified code looks like this: $(document).ready(function() { 

    $('input[name="foo"]').keyup(function() {  
        MakeAjaxRequest(ajax params);  //this updates div 1 and makes it visible 
        if ($('#one').is(':visible')){                
            $('#two').hide();   
        } else {   
            $('#two').show(); 
        }
    });
});

I've been able to hide and show other things in JQuery Mobile with no problem.

ps: I have also tried doing a .refresh() on div 1 after the ajax call.

Thanks!

Upvotes: 0

Views: 344

Answers (1)

Rich O'Kelly
Rich O'Kelly

Reputation: 41767

The ajax request is asynchronous, your visible check will be being done before the callback of your MakeAjaxRequest function has updated the html.

Upvotes: 1

Related Questions