Блог

Почему функция с fadeOut никогда не достигается? Каждый раз, когда функция запускается, она обновляет страницу вместо использования AJAX.

 <script type="text/javascript">


function deleterow(id){
if (confirm('Are you sure want to delete?')) {
$.post('delete.php', {id:  id, ajax: 'true' },
function(){
$("#row_" id).fadeOut("slow");
});
}
}

</script>
  

Вот вывод html с помощью php:

 <button onclick="deleterow('.$entry['rowid'].')" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-trash"></span></button>
  

Трудно сказать наверняка, не видя кода / html, который вызывает функцию, но я предполагаю, что это каким-то образом привязано к onclick обработчику. Поэтому, если вы не предотвратите действие по умолчанию (следующее за href тегом a ), оно обновит страницу. Вам нужно вернуть false из функции-обработчика или вызвать event.preventDefault() из нее.

Я бы использовал эту разметку вместо:

 <button 
  value="$entry['rowid']"
  class="fg-delete fg-button fg-button-icon-left ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-trash"></span>
</button>
  

Кодируя rowid в dom (в данном случае как value ), мы можем получить к нему доступ в наших функциях без необходимости жестко кодировать его в вызове функции и сохранять обработчик незаметным.

 // pulling this into a full definition for clarity
// you could of course just use an anon function inside you $.click call
function handleDelete(event){
   event.preventDefault();
   var $this = $(this);
   var rowId = $this.val();
   deleterow(rowId);
   return false;
}


$('button.fg-delete').click(handleDelete);
  

Демонстрация:http://jsfiddle.net/eBa7v/1 /