无法在jQuery Mobile Cordova PhoneGap中显示两次相同页面

Question

Confused why this happened, when I am in second page (ex: product_detail.html?id=1), then I want to click the same page but different id (ex :product_detail.html?id=5) it is not working, nothing displayed.

Here is my index.html

<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>

<div class="item">
 <a href="product_detail.html?id=1"><img src="http://web/banner2.jpg"></a>
</div>
 <div class="item">
 <a href="product_detail.html?id=17"><img src="http://web/banner3.jpg"></a>
 </div>


<script>
$( document ).on( "pageinit", "#detailsPage", function( event ) {
  var parameters = $(this).data("url").split("?")[1];
  parameter = parameters.replace("id=","");
  var devid=localStorage.getItem("macid");
  $.getJSON('http://url_web_services/related_product.php?id='+parameter, product_detail);

});



function product_detail(data) {

    var employee = data.item;
    var urls="";
    urls="http://url_web_services/"+employee.product_image;
    var myid3="";
    myid3 = localStorage.getItem("macid");

    $('#product_detail').append('<a href="product_detail.html?id='+employee.product_id+'"><div class="item">'); 
    $('#product_detail').append('<div class="xxw"><img src="http://webservice' + employee.promo_image +'"></div>'); 
    $('#product_detail').append('<div style="background-color:#2E64FE;margin-top:15px;"><font color="#FFFFFF" face="arial" size="3">' + employee.product_name + '</font></div><br>');
    $('#product_detail').append('</div></a>');

    //SIMILAR PRODUCT

    var idp=employee.promo_id;

    $.getJSON('http://webservice/product_related.php?id='+idp, function(data) {
        employees2 = data.items;
        $.each(employees2, function(index, employee2) {

               $('#product_similar').append('<a href="product_detail.html?id='+employee2.product_id+'"><div class="some">'+
               '<div><img src="http://webservice/' + employee2.product_image +'" class="bgr"></div>'+
               '<div class="four"><p style="margin-left:5px;margin-top:2px;"><font face="arial" size="2" color="black"><b>'+employee2.product_name+' ....</b></font></p></div>'+
               '</div></a>');


        });

    });

}

</script>

here is my second page product_detail.html

<div data-role="page" id="detailsPage">


            <div data-role="header" data-tap-toggle="false" data-theme='b'>
                <h1 class="header-title">Detail</h1>
            </div>

            <div data-role="content" id="product_detail">     


            </div>
            <br>
            <div style="background-color:#3104B4;margin-top:5px;"><font color="#FFFFFF" face="arial" size="3"><center>PRODUCT SIMILAR</center></font></div>

            <div id="product_similar" style="background-color:#E6E6E6;margin-top:2px;">

            </div>

            <div data-role="footer" data-theme="none" data-inner="true" data-border="false">

            </div>


</div>

when I click one of item in product_similiar (it means reload the same page, but different ID, it displays nothing)

Answer 1

You can try dynamically creating page with the new values, here is an example:

<a href="javascript: create_page(2);"><img src="http://web/banner2.jpg"></a>

    <script>
            function create_page(page_id) {
                var jsonUrl = 'http://url_web_services/related_product.php?id=' + page_id
                var content = $('#detailsPage').html();
                var newPage = '<div data-role="page" id="product_detail_id=' + page_id + '">' + content + '</div>'

                $('body').append(newPage);

                //initialize the new page 
                $.mobile.initializePage();
                //navigate to the new page
                $.mobile.changePage("#product_detail_id=" + page_id, "pop", false, true);
                //now you can get #product_detail
                $.getJSON(jsonUrl , product_detail);

            }
    </script>

With some adjustments it should work