javascript - jQuery Mobile popup dynamic contents are not refreshed

I have a mon JQM popup across multiple pages. From each page, the contents of popup are refreshed using the data from page. On the first load of the page I can see the refreshed contents on popup. However, when I load new data onto popup div, I still get the older data on popup widget.

If I examine the innerHTML of the popup, it gives me new contents but cannot see them on the popup.

Here is my example code:

    <body>
    <div id="mon-popup">

       <div id="data-popup" data-role="popup">';
         <p>Name: N/A<p> 
         <p>DOB: N/A <p>
       </div> <!--Popup div ends -->
    </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"/>
       <a href="#data-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>
   </body>
<script type="text/javascript">
   $('.update-data').on('vclick', function(){
      var id = $(this).id;
          id = id.split('');
       var htm = '<div id="data-popup" data-role="popup">';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';

         $('#mon-popup').html(htm).trigger('create');
     });

</script>

In the above code if I examine the innerHTML using:

console.log("Common Inner Html: " + document.getElementById('mon-popup').innerHTML);

I can see the updated contents, however when I open the pupup, I still see the older contents. Please let me know how to refresh the contents on popup

JS Fiddle: /

In the Fiddle I can only see the initial contents, they are not refreshed upon the update

If I examine the innerHTML of the popup, it gives me new contents but cannot see them on the popup.

Here is my example code:

    <body>
    <div id="mon-popup">

       <div id="data-popup" data-role="popup">';
         <p>Name: N/A<p> 
         <p>DOB: N/A <p>
       </div> <!--Popup div ends -->
    </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"/>
       <a href="#data-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>
   </body>
<script type="text/javascript">
   $('.update-data').on('vclick', function(){
      var id = $(this).id;
          id = id.split('');
       var htm = '<div id="data-popup" data-role="popup">';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';
           htm += '<p>Name: ' + $('#p' + id[1] + '_name').val()  +'<p>';

         $('#mon-popup').html(htm).trigger('create');
     });

</script>

In the above code if I examine the innerHTML using:

console.log("Common Inner Html: " + document.getElementById('mon-popup').innerHTML);

I can see the updated contents, however when I open the pupup, I still see the older contents. Please let me know how to refresh the contents on popup

JS Fiddle: http://jsfiddle/bhavik89/49QwL/1/

In the Fiddle I can only see the initial contents, they are not refreshed upon the update

Share Improve this question edited Aug 3, 2014 at 23:01 asked Aug 3, 2014 at 15:54 devop 492 silver badges12 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Instead of putting the popup in a DIV, just leave it under the body. Then when recreating it, leave the top level DIV there and just replace the contents:

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

Make sure your link has data-rel="popup":

<a href="#data-popup" data-rel="popup"> Watch Data </a>

Give your update button some text so we can see the button:

<button class="update-data" id="b1" >Update</button>

With this in place initialize the popup on document ready and then on the update button click, replace the popup HTML, call enhanceWithin() and finally call popup("refresh") to update the popup widget:

$(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");       
   });    
});

Here is a working DEMO

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery Mobile popup dynamic contents are not refreshed - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)