使用Rails加载页面时的jQuery Mobile弹出窗口

Question

I am trying to open a popup on page load using jQuery Mobile and Rails.

The popup can be opened with a link, but I can't make it open on load.

HTML code

<div data-role="popup" id="popup-choix" data-history="false" data-overlay-theme="a" data-transition="flow" data-position-to="window">
    <ul>...</ul>
</div>

Javascript code

$(document).on("pageshow", function() {
  $('#popup-choix').popup('open'); 
});

I checked with Chrome and the Javascript is correctly linked to the page.

I have a link on the page to open the popup. It works perfectly.

<div class="div-popup"><a href="#popup-choix" data-rel="popup">...</a></div>

I guess the problem is with my Javascript then...

---

UPDATE

I placed the Javascript in popup.js , which is then called with the application.js manifest.

UPDATE 2

I wrote the javascript in popup.js and call it with the manifest .

Answer 1

Updated

Note: for Ruby on Rails users read this comment .

This is the correct way to open a popup, once page loads/shows.

$(document).on("pageshow", function() {
 $('#popup-choix').popup('open');
});

In some browsers, popup doesn't show once the page loads, therefore, adding timeout to open the popup is essential.

Source

$(document).on("pageshow", function() {
 setTimeout(function () {
    $('#popup-choix').popup('open');
 }, 100); // delay above zero
});

If you want to open for a specific page, add '#PageId' instead of document .