$(select).selectmenu('open') doesn't work if page is loaded using ajax

Question

I have a button that shows a dropdown menu when clicked. This code works on pages that are loaded with data-ajax="false":

$('#btnMainMenu').live('click', function() {
  $('#dpMainMenu').selectmenu('open');
});

But there are some anchors on the website where data-ajax="true", so whenever the users load those pages - the codes above doesn't seem to work.

`.live()` is deprecated since jQuery 1.7, use `.on()` instead: [.live() docs](http://api.jquery.com/live/) — Calavoow, Sep 07 '12 at 14:44
This might help you: http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files/7449731#7449731. Where have you put the code that doesn't work via AJAX, is it in the `` of a document? — Jasper, Sep 07 '12 at 16:11
@Jasper, i placed the above code in section. I also tried to put $('#dpMainMenu').selectmenu('open'); directly on anchor's onclick event but still no luck. — Karina, Sep 10 '12 at 08:28

score 0 · Answer 1 · answered Sep 07 '12 at 14:51

Pages that are loaded with data-ajax="true" only load a specific part of the pages (which is the default behaviour for jQuery Mobile). Namely everything between <div data-role="page">...</div>. Does your code work even though pages are loaded this way?

References: Linking Pages

score 0 · Answer 2 · answered Sep 08 '12 at 12:25

I just had the same problem and my solution was to include the code bellow in the body of the page that is being loaded via Ajax (I put it just bellow the form).

<script>
    $('document').read(function () {
        $("#form-id").trigger("refresh", true); 
    });
</script>

With this, when the page is ready Jquery recreates the form where the selectmenu is and so all behaviours are back again.

$(select).selectmenu('open') doesn't work if page is loaded using ajax

2 Answers2