Автоматическое обновление нескольких разделов с помощью JQuery

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

Это то, что у меня есть до сих пор:

<script type="text/JavaScript"> $(document).ready( function update() { $.get("response.php", function(data){ $("#ajaxtest").html(data); window.setTimeout(update, 10000); }); }); </script> 

Я сделал несколько поисков в stackoverflow и нашел этот отличный маленький экстракт, хотя его для одного div используют только … ( второй пример: автообновление div с jquery )

 $(document).ready( function update(el) { $.get("response.php", function(data){ el.html(data); window.setTimeout(el, 10000); }); update($("#ajaxtest")); }); 

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

 function update(divId) { $.get("response.php", function(data){ $(divId).html(data); window.setTimeout(update, 10000); } 

а потом

 $(document).ready(function(){ update("#ajaxtest"); update("#otherdiv"); update(".divsbycssclass"); }); 

Если вам нужен другой URL-адрес, который тоже. Вы можете вызвать этот метод обновления по таймеру или событию:

 $("a").click(function(){ update("#ajaxtest"); }); 

Это то, о чем вы говорили? Если нет, не стесняйтесь комментировать, и я отредактирую.

Главное, что вам нужно сделать – это вернуть сразу несколько наборов содержимого. Это означает, что вы отправляете данные в какую-то структуру, поэтому ваш JS может быстро проанализировать ее и применить содержимое по мере необходимости. Самый лучший способ сделать это – JSON – формат обмена данными, который легко читается и подмножество Javascript.

Во-первых, измените свой PHP, чтобы создать массив контента для отправки:

 $divs = array ( 'firstDiv' => $firstDivContent, 'secondDiv' => $secondDivContent ); 

Затем вам нужно будет закодировать их как JSON с помощью json_encode :

 $divs_json = $divs; 

Затем верните это в браузер с соответствующими заголовками:

 header('Content-type: application/json'); echo $divs_json; die(); 

В вашем Javascript вам нужно будет только один запрос получить обе части. Вы можете использовать setInterval и анонимную функцию, чтобы код повторялся каждые 10 секунд:

 setInterval(function(){ $.get('response.php', function(data) { //data is a JS object with two properties, firstDiv and secondDiv $('#firstDiv').html(data.firstDiv); $('#secondDiv').html(data.secondDiv); }); }, 10000); 

Это просто непроверенная идея, но попробуйте …

 function update(){ // all your defined classes which are .refreshingDivs will do the following $('.refreshingDivs').each(function(){ // foreach refreshingDiv, get their id attribute and send with request // so that response.php knows what to do for each specific div $.get('response.php?id=' + $(this).attr('id'), function(data){ // place the returned data inside refreshingDiv children // which has the .placeholder class $(this).children('.placeholder').html(data); window.setTimeout(update, 10000); }); }); } $(document).ready(function(){ update(); }); 

Если у вас есть контроллеры для обновления отдельных div, подход Simon, похоже, вам подходит.

Я добавляю некоторые проблемы, чтобы это работало, поэтому, основываясь на ответе Ран Бар-Зика, я придумал следующее, что, похоже, работает на меня.

 $(document).ready(function(){ var refreshId = setInterval(function(){ update("#test", "/test.php"); }, 30000); $.ajaxSetup({ cache: false }); update("#test", "/test.php"); }); function update(divId, fileId) { $.get(fileId, function(data){ $(divId).html(data); }); } 

У меня есть идея, если это правильно или неправильно, но это работает для меня.

Линия

 window.setTimeout(update, 10000); 

в ответе Ран Бар-Зика просто не хотелось работать для меня, не знаю, почему. Начальная загрузка работала, но обновление не было, поэтому я изменил код на выше, чтобы заставить его работать.