0

I'm wondering how I can load an external page with a page and multiple dialogs.

//I am in index.htm, a multi-page file which will send a big object to anotherpage.htm
$.mobile.changePage(anotherPage.htm, {type:"post",data:formData})

This will make the post just fine and pass in the formData. However, the dialogs in anotherPage.htm are not available. If I access anotherPage.htm directly the page runs as expected. jQM is only loading in the first page found in anotherPage.htm as expected.

//anotherpage.htm
<div data-role="page" id="mypage">
     <p id="something">Some thing</p>
    <script>
  //bind to the pageinit event to fire the email handling.
   $("#something").live("click", function() {
        $.mobile.changePage('#successDialog',{ transition: "pop", role: "dialog", reverse: false });
   });

</script>
</div>
<div data-role="dialog" id="successDialog" >
    <p>Success!</p>
</div>
<div data-role="dialog" id="failureDialog" >
    <p>Failure!</p>
    <a id="dialogClose" href="#" data-rel="back" data-role="button">Close</a>
</div>
J.T.
  • 2,606
  • 15
  • 31
  • I think that I was on the right track when I tried a traditional submit rather than a change page. What I wasn't doing was appending the data object to the submit properly as seen here. http://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax – J.T. Feb 20 '12 at 16:50

1 Answers1

0

Unfortunately when you ajax load a multi-page template it only pulls in the page you requested, you'll have to separate out your dialogs into separate files or reference those dialogs with the same page and the hash page id

Clarence Liu
  • 3,874
  • 2
  • 25
  • 29