Search code examples
jquery-mobilepopuppage-init

jquery mobile Popup on pageinit popupinit?


Is there a way to use some pageinit event for a popup, in order to populate an input box with an email address from the main page?

So in my html, I have 1 page declared as data-role="page" and one popup declared as data-role="popup". In the "page" I have an input containing an email address, and a button that calls the popup. In the popup I have some text, another input text and 2 buttons. This input box must be populated with the contents of the main page input box value. How can I achieve that? Is there some pageinit event for popups too?

So here is my main page declaration (pg_main)

<div data-role="page" id="pg_main">
  <input type="email" name="emailadr" is="emailadr" value="" />
  <input id="sendemail" class="emailclass" type="button" name />
</div>

and now the popup (sendm)

<div data-role="popup" id="sendm" class="ui-content">
  <h3>Send the email</h3>
  <p> Confirm email address below</p>
  <input type="email" name="adresa" id="adresa" value="" />
  <input type="button" id="emailok" value="Send" />
  <input type="button" id="emailno" value="Give up" />
</div>

Of course I have some code that fills the input in pg_main with a valid email address, but that is not my issue. In my script, I call the popup like this:

$(document.body).on('click','.emailclass', function(){
$('#sendm').popup("open");
});

How can I fill the $('#adresa') from popup sendm with the value of $('#emailadr') from page pg_main? Thank you


Solution

  • What you need is this code:

    $("#sendm").on("popupafteropen", function( event, ui ) {
        $('#adresa').val($('#emailadr').val());
    });    
    

    It will be executed when popup is opened. Event used here is called popupafteropen and you can find more about it in an official documentation.

    Working example made form your code: http://jsfiddle.net/Gajotres/Q5KSV/