通過AJAX更改動態添加元素的內容而無需重新加載

我目前正在構建Twitter帖子的直播。我使用10秒的時間間隔成功推出了新的推文，新的推文立即彈出。通過AJAX更改動態添加元素的內容而無需重新加載

但是，我顯示了自鳴叫創建以來的時間，例如，「24秒前」或「1天前」，並希望實時更新這些值，而無需重新加載頁面。但是，我不想使用10秒的其他間隔，而是使用1秒的新間隔來顯示第一個第二個更改。

我創建了一個正確更新時間的函數，但這對我的AJAX調用添加的新元素無效。爲了呈現一些代碼：

HTML其實並不重要，重要的部分是與類的「時間差」，它擁有的「2秒。」或「3日」，應動態地改變跨度。

<div class="row tweet-wrapper" data-crdate="' . $tw_timestamp . '"> 
<div class="col-xs-1 user-profile-picture"> 
    <img class="img-responsive" src="' . $user_profile_pic . '"> 
</div> 
<div class="col-xs-11 tweet-content"> 
    <p class="tweet-header"> 
     <a href="https://twitter.com/' . $user_screen_name . '">' . $user_screen_name . '</a> 

     <span class="tweet-header-sub">' . $user_name . '</span> 
    </p> 
    <p class="tweet-content"> 
     ' . $tw_text . ' 
    </p> 
    ' . (!empty($images) ? ' 
    <p> 
     ' . $images . ' 
    </p> 
    ' : '') . ' 
    <p class="tweet-footer"> 
     <span class="tweet-footer-time"> 
      <a href="https://twitter.com/' . $tw_gen_screen . '/statuses/' . $tw_gen_tw_id . '"> 
       <img height="15" width="15" src="res/img/twitter-logo.svg"> 
       <span class="time-difference">' . $difference_show . ' ' . $difference_word . '</span> ago 
      </a> 
     </span> 
    </p> 
</div> 
</div>

JQuery的 - AJAX的呼叫 - $（ '集裝箱液'。）前置（數據）。添加新的容器，以我的包裝的div

function loadNewTweets() { 
var latestTweet = $('div.tweet-wrapper:first').data('crdate'); 

$.get('res/php/update.php', { latest: latestTweet }, function(data) { 
    if(data && data != '') { 
     $('.container-fluid').prepend(data); 

     window.scrollTo(0, 0); 
    } 
}, 'html'); 
};

除了與間隔調用該函數，任何$之外（函數（）{}）調用。

var intervalLoadTweets = setInterval(function() { 
    loadNewTweets();   
}, 1000 * loadNewTweetsInterval);

Update.php（服務AJAX） 基本上做了一堆東西來格式化微博，通過比較它們的時間戳，過濾掉已有的鳴叫，然後返回一個div容器，這正是與上述相同。

我不能設置小提琴，因爲我不想透露我的生產twitter api的祕密，但我認爲它應該是可以理解的沒有。

我見過類似問題的不同答案（更新時間間隔，重新聲明函數......），但這些似乎都不適合我，因爲現有（在頁面加載）推文的時間在實時更新，但是通過Ajax添加的新推文根本沒有改變。

我建了一個Codepen，做幾乎同樣的事情，增加的內容，但沒有AJAX，它的工作原理：https://codepen.io/anon/pen/PKVmbg

因此很明顯，Ajax是造成麻煩的我，但我不知道如何解決這個問題。

編輯：功能改變時間值：

var reloadTweetTimes = function() { 
$.each(findElement, function() { 
    var crdate  = $(this).data('crdate'); 
    var nowts  = parseInt($.now()/1000); 
    var difference = nowts - crdate; 

    var difference_word = ''; 
    var difference_show = ''; 

    if(difference == 1) { 
     difference_word = 'second'; 
     difference_show = difference; 
    } 
    else if(difference < 60) { 
     difference_word = 'seconds'; 
     difference_show = difference; 
    } 
    else if(difference >= 60 && difference < (60 * 2)) { 
     difference_word = 'minute'; 
     difference_show = parseInt((difference/60)); 
    } 
    else if(difference < (60 * 60)) { 
     difference_word = 'minutes'; 
     difference_show = parseInt((difference/60)); 
    } 
    else if(difference >= (60 * 60) && difference < (60 * 60 * 2)) { 
     difference_word = 'hour'; 
     difference_show = parseInt((difference/60/60)); 
    } 
    else if(difference < (60 * 60 * 24)) { 
     difference_word = 'hours'; 
     difference_show = parseInt((difference/60/60)); 
    } 
    else if(difference >= (60 * 60 * 24) && difference < (60 * 60 * 24 * 2)) { 
     difference_word = 'day'; 
     difference_show = parseInt((difference/60/60/24)); 
    } 
    else { 
     difference_word = 'days'; 
     difference_show = parseInt((difference/60/60/24)); 
    } 

    $(this).find('.time-difference').text(difference_show + ' ' + difference_word); 

    $('.tweet-wrapper').css('opacity', 1); 
}); 
};

間隔調用函數

var intervalRefreshTimes = setInterval(function() { 
    reloadTweetTimes(); 
}, 1000 * refreshTimesInterval);

來源

2017-09-01 N. M.

更新時差內容的代碼在哪裏？ – Dave

我編輯了底部的主帖，很抱歉錯過了！ –

-1

添加更新時間差代碼在Ajax調用的成功方法。因爲如果您在ajax調用之後進行更新，DOM將不可用，因爲$ .get（）將創建一個新線程。

$.get('res/php/update.php', { latest: latestTweet }, function(data) { 
if(data && data != '') { 
    $('.container-fluid').prepend(data); 
    // Add here the time difference calculation function. 
    window.scrollTo(0, 0); 
} 
}, 'html'); 
};

來源

2017-09-01 14:04:19

我嘗試重新定義間隔，我嘗試更新時間本身，兩者都不起作用。 –

$ .get（）的完整函數總是可以訪問DOM。 – Dave

@Dave我提到，如果DOM操作函數在$ .get（）函數外部定義（成功/完成回調之外），那麼通過$ .get（）函數添加的DOM將不可用。 '/ *之前調用get */ $獲得（網址，數據，函數（響應）{// 成功回調 }）; /*調用get之後 - $ .get（）被操作的DOM在這裏將不可用，除非它在該行執行之前完成其執行。 * /' –

對於reloadTweetTimes迭代的內容，我還有點不清楚，因爲您沒有findElement的定義。但我懷疑問題是，findElement是jQuery對象只綁定到文檔加載時存在的元素。如果這是真的，你有兩個選擇：

添加新的元素，findElement你用Ajax加載它們後添加它們的文件。
每次運行reloadTweetTimes時都會搜索新項目。（如果頁面加載的元素太多，可能會變慢）

如果您想要添加findElement的設置方式，我可以提供兩種代碼示例。

來源

2017-09-01 16:16:36 Dave

通過AJAX更改動態添加元素的內容而無需重新加載

回答

相關問題