refresh content on jquery mobile page load

Question

I have a listview and when each item is clicked on the list view, (it is added to local storage and) a dialog (page) is opened showing more info(a detailed view) of the clicked item. I am adding the markup for the dialog page, whilst doing this what happens is that when I click on an item, it shows the correct details of the clicked item on the dialog page, but when the dialog page is closed and I click on another item, it adds it on to what was previously on the dialog page. I want to refresh the dialog page once the close button is clicked and goes back to next item.

Here is where the href is for the new dialog page:

markup += '<li><a href="#fbfullpostviewpage" class="item" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true"><img src="' + thumb_url + '">' +'<h4>' + name + '</h4><p>' +'posted this photo....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>';

Here is the dialog page:

<div data-role="page" id="fbfullpostviewpage">
  <script src="facebook_feed.js"></script>
  <script type="text/javascript">

          $( '#fbfullpostviewpage' ).on( 'pageinit', function( event ) {
           if (Modernizr.localstorage) {
             //retrievPostFromLocalStorage();              
             // $('#actorDisplay').remove();




            }
            else {
                $('#message').text("Sorry your browser doesn't support local storage");
                $('#message').show();
            }
    });



  </script>
    <div data-role="header" id="fbheader" data-theme="b" data-inline="true"><div class="logo"><img src="images/facebook_64x64.png"></div>
        <h1 id="headername"style="position:relative; top:-10px;">

        </h1>
    </div><!-- /header -->
    <div id="fb-root"></div>
    <div data-role="content" data-theme="d">
      <p id="message"/>
      <div id ="actorDisplay"></div>
      <div id ="detailedpost"></div>


    </div><!-- /content -->
    <div data-role="footer" data-theme="b">
        <h5>
            CS408
        </h5>
    </div><!-- /footer -->
</div>

here is the method I do the append

 function showDetailedPost(ItemtoDisplay){


    var actorID = ItemtoDisplay.actor_id;
    var actor_name;
    var actor_markup ='';



      FB.api('/'+actorID+'', function(response) {
       // console.log(response);
                  actor_name = response.name; 
                    $('#fbheader #headername').text(actor_name);




   if ((ItemtoDisplay.attachment.media != undefined) && (ItemtoDisplay.attachment.media[0].type == "photo")) {

     actor_markup += '<img src="https://graph.facebook.com/' + actorID + '/picture">'+'  ' + actor_name + ' posted this photo ';

   var thumb_url = ItemtoDisplay.attachment.media[0].src;
   var full_url = thumb_url.replace(/(\/[^/]*)s\.jpg$/, '/s720x720$1n.jpg');

}


 $('#actorDisplay').append(actor_markup);

    });
//$('#actorDisplay').remove(actor_markup);


  }

I have tried .trigger('create'); but maybe I didnt put it in the right place. Please help

Answer 1

Clear the container prior to appending the markup.

$('#actorDisplay').empty().append(actor_markup);