#php #javascript #jquery
#php #javascript #jquery
Вопрос:
недавно я создал пользовательское окно ping (чат) для личных нужд. Когда я закодировал его и протестировал в Firefox 3.6.13, он работал нормально. Однако функциональность, связанная с window.setInterval, похоже, не работает нормально в IE9 или Firefox 6.
Ниже приведен код для javascript.
<script>
function loadNewPosts(){
var id = $(".altbgcolor:first").attr("id");
$.get('/updateping.php', { updateid: id , }, function(data){
$(".newslist").prepend(data);
}, 'html');
}
window.setInterval(loadNewPosts, 1000*3)
$(document).ready(function() {
// bind form using ajaxForm
$("#pingForm").validate({
submitHandler: function(form) {
$('#pingForm').ajaxSubmit({
// target identifies the element(s) to update with the server response
target: '#pingResult',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#msg').val('');
$('#pingResult').fadeIn('slow');
$('#pingResult').fadeOut(2000);
}
});
}
});
})
</script>
Ниже приведен HTML
<ul class="newslist" style="width:630px;">
<li class="altbgcolor" id=64>
<div>
<div class="newsthumb" style="width:50; height:50; "center center no-repeat;"><img src="images/personal/sunny.jpg" /></div>
<div class="newstext" style="margin:0px;">
<h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif">how r u?</h1>
</div>
<br /><br />
<div style="font-size: 0.6em; color:#666666;">
<span style="text-decoration:none; color:none; padding:5px;"><i> from: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">Sunny</a></i></span>
<span style="text-decoration:none; color:none; padding:5px; "><i> posted: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">October 29, 2011, 9:58 am</a></i></span>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
Я попытался отладить проблему с помощью Firebug, но, хотя кажется, что window.setInterval может вызывать файл .php с требуемыми параметрами каждые 3 секунды, однако он не показывает o / p файла php.
Код php (updateping.php )
<?
require_once('includes/connection.php');
require_once('includes/functions.php');
if(isset($_GET['updateid']))
{
$updateid=$_GET['updateid'];
$sql="SELECT * FROM ping WHERE id > $updateid ORDER BY id DESC";
$res=mysql_query($sql,$connection);
if(@mysql_num_rows($res))
{
while($data=mysql_fetch_array($res))
//while($data=mysql_fetch_array($result))
{
echo '<li class="altbgcolor" id='.$data['id'].'>
<div>
<div class="newsthumb" style="width:50; height:50; center center no-repeat;"><img src="'.$data['img'].'" /></div>
<div class="newstext" style="margin:0px;">
<h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif">'.stripslashes($data['msg']).'</h1>
</div>
<br /><br />
<div style="font-size: 0.6em; color:#666666;">
<span style="text-decoration:none; color:none; padding:5px;"><i> from: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">'.$data['name'].'</a></i></span>
<span style="text-decoration:none; color:none; padding:5px; "><i> posted: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">'.$data['entry_date'].'</a></i></span>
</div>
<div class="clear"></div>
</div>
</li>';
}
}
}
?>
Я нахожусь в затруднительном положении и не понимаю, в чем может быть проблема. Это окно чата отлично работает в FF 3.6.13
Пожалуйста, помогите мне кто-нибудь!!!!!!!!!!!
ОБНОВЛЕНИЕ: я попробовал отладчик разработчика IE9 ‘F12’ и обнаружил, что каждые 3 секунды считалось, что файл php вызывается возвращаемым результатом типа 304 — не изменен. :((
Я зашел в опции «Кэш» в меню отладчика и проверил опцию «Всегда обновлять с сервера» и бамммм!!!! теперь это сработало.
Есть идеи, как настроить это в реальных настройках IE и Firefox. Проблема, похоже, связана только с кэшированием.
Комментарии:
1. Что вы получите, если вы
console.log(data)илиalert(data)в функции обратного$.get()вызова? (Кроме того, хотя, по-видимому, это не вызывает проблем, если вы подтвердили, что ваш PHP вызывается каждые три секунды, у вас есть конечная запятая в объекте{ updateid: id , }— некоторые браузеры допускают конечные запятые, некоторые нет.)2. Я удалил конечную запятую, но безуспешно:(( хорошая находка, хотя ;). Да, файл php вызывается каждые 3 секунды, я тоже проверил это в IE9, однако странно, что o / p из php не отображается на главной странице. :((
3. Но вы пробовали
console.log(data)и / илиalert(data)?4. Не совсем, но прочитайте мое обновление выше, я думаю, я что-то понял… но не уверен… Кстати, вы хотите, чтобы я заменил $.get() на alert() в функции loadNewPosts()?
5. Нет, не заменяйте
$.get(). Я имел в виду временно поместитьalert(data)илиconsole.log(data)вместо (или раньше) там, где у вас есть$(".newslist").prepend(data);, — просто для целей отладки, чтобы увидеть, чтоdataустановлено в момент, когда вы пытаетесь его использовать. И чтобы подтвердить, что эта функция обратного вызова действительно вызывается. Но, похоже, вы уже сузили его до проблемы с кэшированием, поэтому теперь нет необходимости в alert / console.log
Ответ №1:
Поскольку вы уже используете jQuery, вы можете попробовать это:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
});
В соответствии с jQuery .ajax doco jQuery автоматически добавит временную метку к вашему запросу, чтобы браузер не пытался использовать кеш для последующих запросов.
Или вы можете попытаться исправить проблему кэширования на стороне сервера с помощью настроек в разделе управления кэшем заголовка HTTP-ответа, но я не знаю, как это сделать на PHP.
Ответ №2:
Либо добавьте временную метку в свой запрос get, либо используйте post вместо этого.
$.get('/updateping.php', { updateid: id , time: new Date().valueOf() }, function(data){
...
Или
$.post('/updateping.php', { updateid: id }, function(data){
...
Комментарии:
1. Спасибо gilly3, это сработало. Я попробовал метод $.post() . Однако я не совсем понимаю техническую причину, по которой это не удалось. Не могли бы вы это объяснить?
2. Браузеры могут кэшировать
GETзапросы, но они никогда не кэшируютPOSTзапросы. Добавление метки времени в конецGETзапроса делает URL уникальным, таким образом обходя кэш браузера.