CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

Prevent user from clicking somewhere else while ajax loading a page in jQuery Mobile

I'm creating a web application for PCs and tablets using jQuery Mobile.

And I'm using Ajax navigation feature of jQuery Mobile.

So, if user clicks on a link, loading spinner shows. But while JQM is trying to load that page, user may click on another link. In this case, after completely loading the first page, JQM loads the second page and then goes to the second page.

Now, I want to disable everything while ajax navigation is working. Everything means, No other link should be clicked, no other javascript click function should be called, no scrolling can be possible, and...

Also there should be a timeout for each ajax navigation.

How to do this?

Upvotes: 1

Views: 1481

Answers (1)

arizzitano
arizzitano

Reputation: 182

jQM has a few different events that fire when a new page has finished loading into the DOM. Why not temporarily deactivate all links, once a link has been clicked, until the transition has finished?

$('body').on('click', 'a', function() {
    $('body').on('click', 'a', function() {
        return false;
    }); 
    $(document).bind('pagechange', function() { 
        $('body').off('click', 'a'); 
    }); 
});

I used the pagechange event above, but there are a few other events that might work better for your purposes. http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Upvotes: 1

Related Questions