Обновить контент при загрузке страницы jquery для мобильных устройств

У меня есть просмотр списка, и когда каждый элемент щелкается в представлении списка, (он добавляется в локальное хранилище и) открывается диалоговое окно (страница), показывающее дополнительную информацию (подробный вид) выбранного элемента. Я добавляю разметку для страницы диалогового окна, и при этом происходит следующее: когда я нажимаю на элемент, он отображает правильные сведения о выбранном элементе на диалоговой странице, но когда диалоговая страница закрывается, и я нажимаю на другую элемент, он добавляет его к тому, что было ранее на странице диалога. Я хочу обновить страницу диалога после нажатия кнопки закрытия и перехода к следующему элементу.

Вот где href для новой страницы диалога:

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>';

Вот страница диалога:

<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>

вот метод я делаю добавление

 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);


  }

Я пробовал.trigger ("создать"); но возможно я не поместил это в правильное место. Пожалуйста помоги

Источник

1 ответ

Решение

Очистите контейнер до добавления разметки.

$('#actorDisplay').empty().append(actor_markup);
Источник
Другие вопросы по тегам