This discussion is archived
6 Replies Latest reply: Feb 12, 2013 1:32 PM by TobiP RSS

jQuery Mobile - Popup only opens after F5, but not on first page-load

TobiP Explorer
Currently Being Moderated
Greetings guys,

unfortunately there is very little documentation on how to combine APEX 4.2 with jquery mobile components, so I hope some geniuses here can help me.

On one page with a hole bunch of components there is also a popup-div
<div id="myPopup" data-role="popup">
   <!-- close button, safe button, input field and short list... -->
</div>
It gets opened with js:
  $( "#myPopup" ).popup( "open" );
This all works fine, besides the face that it only works after refreshing the page!
The page gets loaded via js:
    $.mobile.changePage('f?p='+ $v('pFlowId') +':20:' + $v('pInstance') 
                       , { transition:"slide", reloadPage:true });
... which also works fine so far. That same problem I had before when I was using a dialog instead of the popup. - only showing after refreshing the page.

This certainly must have something to do with how JQM loads and renders the page (besides the APEX-job) - a rather basic issue. I have also tried different ways of calling the page, with no difference to that problem. Unfortunately I am quite new to working with JQM, so maybe someone here can help me.

Thanks a lot in advance,
best regards,
tobi
  • 1. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    Roel Oracle ACE Director
    Currently Being Moderated
    And where/how do you call $( "#myPopup" ).popup( "open" ); ?

    JQM pages are loaded using (a sort of) Ajax. So the PageLoad function doesn't fire - only on the very first page and when you do a refresh.
  • 2. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    TobiP Explorer
    Currently Being Moderated
    Hi Roel,

    the popup gets called in a js-function which in place gets called from one button and listview-items, depending on if an data-entry is edited or generated new.

    I know that the page-load function as in usual APex doesn't get fired in JQM. But somehow the JQM-framework renders that dialog like all other widgets independent of that event. Maybe you have to programatically initialise that popup with some kind of "refresh", like when you dynamically append list-items, but it shouldnt be the need for that. I will look into that thou - this idea just occured to me.

    I will also build a test-case later on tonight. Right now its running on intranet, so I cant post an url.

    so long,
    tobi
  • 3. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    Roel Oracle ACE Director
    Currently Being Moderated
    So what happens when you load that page (the right way - without a refresh), and you open up the js-console and run the command : $( "#myPopup" ).popup( "open" );
    When that works .. you can also call that same command on click of a button.
    When it doesn't, try whether $("#myPopup") is an existing object on the page.
  • 4. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    TobiP Explorer
    Currently Being Moderated
    Ok, here we go - and this is all a bit wierd. (hehe, this is what you do in your spare time...)

    In this little Sample I have 4 Buttons with different ways to link to the other page with the popup.

    In each case the problem was, that the function with the .popup('open')-method to open the popup was not found, whether it is placed in the general js-block or in the pageinit event.

    When calling the popup via
    &lt;a href="#myPopup" data-rel="popup">..&lt;/a>
    it works eigther way.

    So I tested inplementing the js-finction on the first page, and then it worked. I now have that function in an external js-file, which is loaded into the workspace, and it works also. --But I think in our working environment that function is also called from every page in an external file, yet its not working. But I will have to check that tomorrow.--

    I still wonder thou, why the function is not found, althou its in the same html-file. Maybe anyone can clue me on that, because it involves a basic understanding of the way JQM workes. So for that I will be very greatefull.

    Thanks and so long,
    tobi



    h2. Correction
    Its still not working under some curcumstances, namely when the pages is called more than on time. Althou the function is called somehow still that popup is not shown - without any error message in firebug.
    So I sill am quite in need of help :)

    Edited by: TobiP on 12.02.2013 10:37

    Hey Roel,
    I just now saw your second answer.
    Yes, the popup div exists even on the last case: $('#mypopup').length returns 1 in the console.
    I can execute the 'show' event and get
    Object[div#poped.ui-popup]
    in the console - so no error. Yet the popup is not shown.

    third edit:_
    And now I think I know what the problem is: I have the second page with the popup two times in the dom, one visible and the other hidden - later propably the first one that was loaded and that contains the JQM-renderes markup for that popup. So when I execute the 'show' the popup will probably be opened in the hidden page-area, so I cant see it.

    So it ends up with the problem that has bugging me for quite a while now on other situations: How can I prevent having the data-role="page"-div multiple times in the dom? - Very basic JQM issue, but I still havn't found a good answer. Maybe it also has something to do with the way APEX and JQM work together.

    Edited by: TobiP on 12.02.2013 10:53

    Edited by: TobiP on 12.02.2013 10:54
  • 5. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    Roel Oracle ACE Director
    Currently Being Moderated
    When you think the multiple loading of the pages is the issue you can solve that by using the apex.gPageContext$ variable.

    So to get the popup within the latest / current /actual page use : $("#myPopup", apex.gPageContext$ ).popup("open")

    Documentation says (no more and no less then):
    apex.gPageContext$ - Used to restrict jQuery selectors to the current active desktop or jQuery Mobile page.
  • 6. Re: jQuery Mobile - Popup only opens after F5, but not on first page-load
    TobiP Explorer
    Currently Being Moderated
    Wow, nice. Thanks, thats a really great improvement! :)

    I also noticed something strange: When I quickly click on the buttons and watch the dom, on each kind of linking method the 2nd page sometimes gets loaded a 2nd time, sometimes not, as if jqm is lagging behind the rendering proccess.

    And btw, that documentation that you talk about, I should really have a thourough look through that. ;)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points