Как сохранить значения checkbox после ajax обновления?

Question

[Farades]

Здравствуйте! Столкнулся с задачей: есть html таблица, заполняемая движком из базы данных. Данные, а также количество этих данных(читай строк в таблице), изменяются клиентским приложением. В каждой строке есть checkbox. Таблица находится в блоке, который раз в секунду обновляется ajax запросом. Задача: при выделении чекбоксов и нажатии кнопки, строки в которых находятся выделенные чекбоксы, удалялись из базы данных. Проблема: при обновлении блока свойство checked слетает в false. Исходный код привожу ниже. Заранее спасибо за помощь.
Злополучный блок с таблицей:

<div id="purchase">
 <table>
  <tr>
   <td class="per_65">
   </td>
   <td>
    <table>
     <tr>
      <td>
       <h1>Список покупок</h1>
       <table cellpadding="0" cellspacing="0">
        <tr>
         <td></td>
         <td style="height:30px;"><b>Наименование</b></td>
         <td>
          <b>Количество</b>
         </td>
         <td>
          <b>Куплено</b>
         </td>
        </tr>
        <tr class="blue_tr id_1">
         <td class="image">
          <div>
           <img src="images/prod/bread.gif" alt="Хлеб" />
          </div>
         </td>
         <td>
          <p>Хлеб</p>
         </td>
         <td>
          <p><b>1</b></p>
         </td>
         <td>
          <input type="checkbox" value="1" class="chk">
         </td>
       </tr>
       <tr class="gray_tr id_6">
        <td class="image">
         <div>
          <img src="images/prod/potato.jpg" alt="Картофель" />
         </div>
        </td>
        <td>
         <p>Картофель</p>
        </td>
        <td>
         <p><b>1</b></p>
        </td>
        <td>
         <input type="checkbox" value="6" class="chk">
        </td>
       </tr>
	   <tr class="blue_tr id_8">
	    <td class="image">
	     <div>
	      <img src="images/prod/beef.jpg" alt="Мясо" />
	     </div>
	    </td>
	    <td>
	     <p>Мясо</p>
	    </td>
	    <td>
	     <p><b>1</b></p>
	    </td>
	    <td>
	     <input type="checkbox" value="8" class="chk">
	    </td>
	   </tr>
       <tr>
        <td colspan="4" align="right" style="padding-right:0;">
         <input type="submit" value="Обновить" class="refresh">
        </td>
       </tr>
       </table>
       <br />
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</div>

Вот тут при попытке выставить даже все чекбоксы, свойство checked все равно слетает.
Внимание: таймер пытался убирать вообще, но даже при единичном вызове функции update чекбоксы работают не так как надо.

<script type="text/javascript">  
	function update() {  
		$.ajax({  
			url: "",  
			cache: false,  
			success: function(html){   
				//Загружаем и обновляем блок #purchase с сервера
				$("div#purchase").load("index.php?view=purchase #purchase"); 			
			}  
		});	
	}
	$(document).ready(function(){  
		update();	
		setInterval('update()',1000); 
		$("div #purchase input:checkbox").prop("checked", "true");			
	});  
</script>

Если потребуется, выложу php код движка, но не вижу в этом смысла, потому что на время тестирования он возвращает ровно такой же html код, который приведен выше.
Надеюсь на помощь.

Answer 1

[maxaon]

Во-первых у вас два id purchase.
Во-вторых где метод show? (Корректнее setInterval(show,1000); )
В-третьих все правильно работает. jQuery получает HTML с сервер и вставляет в блок #purchase.
Если вы хотите что-то потом изменить, тогда делайте это после jQurery. Добавьте callback в метод load

success: function(html){   
                //Загружаем и обновляем блок #purchase с сервера
                $("div#purchase").load("index.php?view=purchase #purchase", function(){
                         $("div #purchase input:checkbox").prop("checked", "true");
                         // Better is 
                         $(this).find("input:checkbox").prop("checked", "true");
                }); 			
            }

Comments

[Farades]

Прошу прощения за 2 блока purchase и show - это опечатки при переносе и изменении форматирования для удобочитаемости на тостере.
За ответ огромное спасибо! Все работает!

Answer 2

[gena1977]

Ошибка заключается в том, что вы не учли, что метод update(), который вызывается в setInterval, является асинхронным. То есть сначала формируется и отправляется запрос на сервер, затем честно отрабатывает строка $("div #purchase input:checkbox").prop("checked", "true"), а затем приходит ответ от сервера и обновляется html блока. Рекомендую изучить основы асинхронного программирования и объект Deferred в jQuery.

Answer 3

[Par Mactep]

$("#purchase input:checkbox").prop({"checked": true});

Comments

[Farades]

Спасибо за ответ, но чуда не произошло. Да и не должно было. Моя реализация именно этой строки:

$("div #purchase input:checkbox").prop("checked", "true");

отлично работает.