Как я могу обновить div
с id
каждые x секунд? Я хочу, чтобы он обновлял статусы пользователей, которые содержатся внутри этого, включая время количества комментариев, сделанных на этом отдельном сообщении.
Я попробовал setInterval
но для добавления статуса требуется 10 секунд, а затем дублирует статус каждые x секунд. Все, что мне нужно, это обновлять данные ответов, а не добавлять комментарий, который будет добавляться каждые 10 секунд.
HTML:
<div id='divider-"+response['streamitem_id']+'></div>
JavaScript:
$(document).ready(function(){ $("form#myform").submit(function(event) { event.preventDefault(); var content = $("#toid").val(); var newmsg = $("#newmsg").val(); $.ajax({ type: "POST", url: "insert.php", cache: false, dataType: "json", data: { toid: content, newmsg: newmsg }, success: function(response){ $("#homestatusid").html("<div id='divider-"+response['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+response['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+response['streamitem_id']+"');\">X</div><a href='/profile.php?username="+response['username']+"'>"+response['first']+" "+ response['middle']+" "+response['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+response['streamitem_timestamp']+"</a><hr>"+newmsg+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+response['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+response['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a id='likecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+response['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'>Like</div></a><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'></div></div><div id='streamdislike'><a id='dislikecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+response['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'>Dislike</div></a><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'></div></div></div><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><td valign=top align=left><div class='stream_comment_inputarea'><input id='addcomment' type='text' name='content' style='width:100%;' class='input_comment' placeholder='Write a comment...' onkeyup='growcommentinput(this);' autocomplete='off' onkeypress=\"if(event.keyCode==13){addcomment("+response['streamitem_id']+",this.value,'comment_list_"+response['streamitem_id']+"',"+response['id']+",'"+response['first']+" "+ response['middle']+" "+response['last']+"');this.value='';}\"><br/></div></div>"); } }); return false }); });
insert.php
$json = array(); $check = "SELECT streamitem_id FROM streamdata WHERE streamitem_creator='$user1_id' ORDER BY streamitem_id DESC"; $check1 = mysql_query($check); $resultArr = mysql_fetch_array($check1); $json['streamitem_id'] = $resultArr['streamitem_id']; mysql_free_result($check1); $check = "SELECT streamitem_timestamp FROM streamdata WHERE streamitem_creator='$user1_id' ORDER BY streamitem_timestamp DESC"; $check1 = mysql_query($check); $resultArr = mysql_fetch_array($check1); $json['streamitem_timestamp'] = Agotime($resultArr['streamitem_timestamp']); mysql_free_result($check1); $check = "SELECT username, id, first, middle, last FROM users"; $check1 = mysql_query($check); $resultArr = mysql_fetch_array($check1); $json['username'] = $resultArr['username']; $json['id'] = $resultArr['id']; $json['first'] = $resultArr['first']; $json['middle'] = $resultArr['middle']; $json['last'] = $resultArr['last']; mysql_free_result($check1); echo json_encode($json);
Сначала завершите вызов Ajax в функции однократного выполнения, причем функция обратного вызова ссылается на то же:
$(function() { (function ajaxcall() { $.ajax({ url: 'foo.php', data: {boo:'moo',goo:'loo'}, timeout: function() { ajaxcall(); }, success: function(data) { //do somethng with the data //done, now call the function again: ajaxcall(); } }); }()); });
Затем в PHP напишите что-нибудь вроде:
$timeout = 30; $pollinterval = .5; $counter = 30; while ($counter >= 0) { //function which fetches fresh data and sets $test to true if data is returned list($test,$dataarray) = fetchdata(); if ($test) { //JSON_encode the data array and send it echo JSON_ENCODE($dataarray); } else { //no fresh data, query the db again after wating for some time) usleep($pollinterval*1000); $counter -= $pollinterval; } //timeout, return whetever you have! echo JSON_ENCODE($dataarray);
Вы можете использовать setInterval
( см. Документацию ) или setTimeout
( см. Документацию ).
Звучит как опрос. Вы можете включить вызов AJAX, который отправит запрос на PHP-скрипт, который будет искать базу данных для дальнейшего обновления. если он найден, он немедленно вернет новый результат. Клиентская сторона JS при получении новых данных будет ждать 30 секунд, прежде чем делать другой запрос. Если PHP не найдет никаких новых данных, он снова запросит БД, скажем через 5 секунд, и продолжит делать это до тех пор, пока не произойдет определенный тайм-аут, скажем, 25 секунд. Затем он вернет пустой результат при приеме, который клиентская сторона JS немедленно сделает другой запрос.
Я думаю, что это то, чего вы хотите, используя JQuery:
HTML:
<div id="divider-whatever"></div>
Jquery:
$(document).ready(function() { setInterval(function() { div = $("#divider-whatever"); $.get(data.php, function(responseData) { div.html(responseData); }, 1000); // change 1000 to whatever time you need // change data.php to the file where your data is coming from }); });
*не испытано
Надеюсь это поможет!