1

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.

Justin D.
  • 4,946
  • 5
  • 36
  • 69
  • could you please post your code, of how you're calling it? – Omar Apr 01 '13 at 17:59
  • I added a link to my entire project. – Justin D. Apr 01 '13 at 19:16
  • Ill check it. Just do me a favor, add _console.log_ in the code u want to fire the popup and see if it fires. – Omar Apr 01 '13 at 19:30
  • I'm not sure I understand your request. You want me to add `console.log` to `popup.js`? – Justin D. Apr 01 '13 at 19:38
  • [here](https://github.com/BR41N1/Instavert/blob/master/app/views/layouts/_jquerymobile.html.erb) instead of opening the popup, add `console.log('pop up test');` – Omar Apr 01 '13 at 19:44
  • Check my updated answer. I hope it works this time. – Omar Apr 01 '13 at 21:18
  • It is still not working! The code must work alone, but with Rails, it bugs for a reason... I think I'll simply show a growl-type message with a link to the popup... – Justin D. Apr 02 '13 at 01:25
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27385/discussion-between-omar-and-justin-d) – Omar Apr 02 '13 at 07:54
  • 1
    @Omar, I can't access the chat through my school firewall. I just remembred Rails has a **public** folder. The html files located in this folder does not call the javacript/css I put in the manifest. With the code you give in your answer, I was able to make everything work. – Justin D. Apr 03 '13 at 13:14
  • 1
    Well, thank you very much for all the efforts you put into helping me! – Justin D. Apr 03 '13 at 18:31

1 Answers1

4

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.

Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112
  • Your solution works on jsFiddle, but I can't make it work with my project... Do you have any idea of what could cause the problem? – Justin D. Apr 01 '13 at 16:46
  • @JustinD. how do you call it in your code? can you post more details pls? – Omar Apr 01 '13 at 16:53
  • if you have the code in a separate file try `$(document).live("pageshow", "#PageID" , function()`. Does my previous code works inline with your HTML code? – Omar Apr 01 '13 at 17:02
  • It does not work either... Earlier today, I tried to put the code inline, but it didn't work either... – Justin D. Apr 01 '13 at 17:07
  • instead of `$(document)` add `$('[data-role=page]')`. – Omar Apr 01 '13 at 17:11