jQM 1.4 external popup dynamic

by Erik Zanker

HTML

<div id="data-popup" data-role="popup" data-theme="a" >
       <div >
           <p>Name: N/A</p> 
             <p>DOB: N/A </p>
       </div>
    </div>

    <div data-role="page" id="page1">
        <input type='text' id='p1_name' value=''>Name: </input>
        <input type='text' id='p1_dob' value=''>DOB: </input>
        <button class="update-data" id="b1" >Update</button>
       <a href="#data-popup" data-rel="popup"> Watch Data </a>
    </div>

    <div data-role="page" id="page2">
        <input type='text' id='p2_name'>Name: </input>
        <input type='text' id='p2_dob'>DOB: </input>
        <button class="update-data" id="b2"/>
        <a href="#data-popup"> Watch Data </a>
    </div>

JavaScript

$(function(){
    $("#data-popup").enhanceWithin().popup();
});

$(document).on("pagecreate", "#page1", function(){
   $('.update-data').on('vclick', function(){
      var id = $(this).prop("id");
          id = id.split('');
       
       var htm = '<div>';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';
           htm += '<p>DOB: ' + $('#p' + id[1] + '_dob').val()  +'<p>';
           htm +=  '</div>';

       $("#data-popup").html(htm).enhanceWithin().popup("refresh");       
   });    
});