JQuery Ajax удаляет строки из таблицы и в db

Question

У меня есть таблица html, которая заполняется значениями таблицы mysql. Таким образом:

function getCategories(){ 
    $prod = new C_Product(); 
    $cat= $prod->getCategorieenAsArray(); 

    $tr = ""; 
    foreach ($cat as $key => $value){ 
     $tr.="<tr><td>&nbsp;</td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n"; 

    } 
    return $tr; 

} 

Теперь я хочу, чтобы быть в состоянии, когда я нажимаю на кнопку Удалить, чтобы удалить эту строку из базы данных и обновления таблицы, так что это на самом деле удаляется также из таблицы на странице HTML. Я хочу использовать для этого jQuery и Ajax. Это не должно быть сложно для меня. Мой вопрос в том, как выбрать строку, которая будет удалена? Как jquery узнает, какой img нажат?

Должен ли я добавить класс в img/tr со значением в нем? Если я использую id, мне придется переопределить мою функцию jquery для каждой добавляемой строки и, следовательно, не будет правильным решением.

Так может кто-нибудь, пожалуйста, помогите мне дальше?

Благодаря

// редактировать:

В то же время я пошел на моем пути, чтобы попытаться фигурными вещами, и у меня теперь полный АЯКСА вызов с правильным идентификатором.

jQuery(document).ready(function(){ 

    jQuery("img.deleterow").click(function(){ 
     id = jQuery(this).parent().attr("id"); 
     jQuery.ajax({ 
      type: "POST", 
      data: "id=" +id, 
      url: "ajax_handler.php", 
      success: function(msg){ 
       jQuery(this).parent().remove(); 
      } 
     }); 

    }); 
}); 

Теперь единственная проблема, с которой я сталкиваюсь, заключается в удалении tr из таблицы, когда идентификатор удаляется в базе данных. Это как мой тр выглядит следующим образом:

$tr.="<tr><td>&nbsp;</td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n"; 

Answer 1

Я бы Defintely добавить класс к в IMG или тр и хотел бы также добавить идентификатор, который имеет идентификатор элемента в базе данных

, но если вы не было бы somethng как этот

$('img').click(function(){ 
    var id = $(this ~ tr).attr("id"); 
    $.ajax(type: "POST", 
      url: "some.php", 
      data: "id="+id, 
      success: function(msg){ 
      $(id).remove(); 
    }); 
}); 

EDIT ВАШЕМУ EDIT:

вы пробовали $ ("# идентификатор ~ тр") селектор, чтобы удалить его? например $(#id ~ tr).remove();

Я также хотел бы поставить идентификатор на тре при добавлении идентификаторов, то было бы $('#id').remove();, чтобы избавиться от тра

Answer 2

Обычно я хотел бы использовать ссылку вместо чисто изображение для этой цели. Так как семантически правильно:

, а затем

$ ("Кнопка удаления. ") Нажмите (функция() { вар deleteId = $ (это) .attr (" HREF").. подстрока (10); // вызов Ajax или URl и т. д. });

один шаг дальше, я даже не поместить любое изображение в а, просто положить что-то вроде:

<a href="..." class="...">Delete this row</a> 

и оставить любое правило стайлинга в CSS для обработки (например, замена изображения).

Answer 3

Смотрите эту question. Это поможет вам получить индекс строки и столбца ячейки таблицы. Затем сделайте вызов Ajax для удаления записи из базы данных.При обратном вызове успеха удалите строку из таблицы, используя стандартные действия jQuery. Вы можете заблокировать доступ к странице html, пока выполняется вызов Ajax. Это не позволит пользователю нажать другое изображение.

Answer 4

Ваша интуиция об этой проблеме была на правильном пути. Вам необходимо передать идентификатор базы данных каждой записи и сохранить ее где-нибудь в HTML, чтобы вы знали, какое значение передать на сервер. Если вы планируете внедрять решение, которое изящно деградирует для пользователей без javascript (обычно это хорошая идея), то вы можете реализовать представление, отличное от ajax, которое удаляет одну строку. Если ваше приложение использует pretty URLs, к этому представлению может быть доступен/table/delete/23 (или любой другой идентификатор). В вас генерации кода таблицы, вы хотите добавить ссылку для каждой строки, которая выглядит следующим образом:

<a class="delete-button" href="/table/delete/23">Delete</a> 

На данный момент, вы должны иметь хорошо работающий без яваскрипта решения. Теперь мы можем добавить AJAX. Этот скрипт использует некоторое javascript string mangling для извлечения последней части href и превращения ее в id.

$(".delete-button").click(function() { 
    var id = this.href.slice(this.href.lastIndexOf('/')+1); 
    // perform AJAX call using this id 
    return false; // return false so that we don't follow the link! 
}); 

Кроме того, когда вы реализуете свою серверную функцию PHP, чтобы принять запрос AJAX, не забудьте sanitize your input!