У меня есть таблица HTML с 5 строками (скажем), которая отображается на веб-странице. Первый столбец таблицы – это RowID (который уникален для каждой строки), а последний столбец каждой строки – кнопка [X] (которая по щелчку удаляет строку). Вся таблица находится в элементе <div> с id="cartmain"
<div id="cartmain"> <table> <tr> <td>....</td> <td>....</td> <td> <a href="#" onclick="removeitem('id1')"> [X] </a> </td> </tr> .. .. </table> </div>
Вот как я удаляю строку:
STEP1: Когда пользователь нажимает кнопку [X], функция XMLHTTPRequest отправляет сообщение в код PHP с уникальным идентификатором каждой строки. За время, когда PHP-код удаляет строку, элемент DIV показывает «Загрузка …»
document.getElementById("cartmain").innerHTML = "Loading..."
STEP2: PHP-код удалит строку из таблицы (и из базы данных) и вернет оставшуюся таблицу.
<?php //removing row from database/table... //send the remaining table back to the XMLHTTPRequest function... echo "<table>"; echo "<tr><td>...</td> <td>...</td> <td> <a href=\"#\" onclick=\"removeitem('id1')\"> [X] </a> </td>"; echo "</tr>"; ... ... ... echo "</table>"; ?>
Эта оставшаяся таблица, полученная из кода PHP, затем отображается в элементе DIV, используя следующую строку:
document.getElementById("cartmain").innerHTML = removeitem.responseText;
Моя проблема: предположим, что у меня есть таблица с 5 строками. Когда я нажимаю кнопку «Удалить», строка удаляется успешно, а таблица отображается с 4 оставшимися строками. Здесь возникает проблема: когда я хочу удалить еще одну строку из таблицы: ничего не происходит. Другими словами, если я снова нажму на [X] какой-то строки, тогда ничего не произойдет . Функция XMLHTTPRequest не вызывается. В идеальном случае он должен снова вызвать функцию XMLHTTPRequest с помощью этого уникального RowID, и тогда таблица должна отображаться с остальными 3 строками.
ВАЖНОЕ ПРИМЕЧАНИЕ. Когда я обновляю страницу, я могу удалить другую строку. Но на этот раз я могу удалить только одну строку. Для удаления еще одного, я должен обновить страницу еще раз.
Кто-нибудь может определить проблему здесь? Пожалуйста помоги.
ПРИМЕЧАНИЕ. Моя таблица фактически является корзиной покупок, которая содержит продукт в каждой строке. Кнопка [X] фактически означает «удаление элемента» из корзины.
Вот код JavaScript:
function removeitem(itemid) { alert("The item to be removed is: "+itemid); if(window.XMLHttpRequest) { removeitem = new XMLHttpRequest(); } else { removeitem=new ActiveXObject("Microsoft.XMLHTTP"); } removeitem.onreadystatechange=function() { if (removeitem.readyState==4 && removeitem.status==200) { document.getElementById("cartmain").innerHTML=removeitem.responseText; } else if(removeitem.readyState < 4) { document.getElementById("cartmain").innerHTML="Loading..."; } } var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID. removeitem.open("GET",linktoexecute,true); removeitem.send(); }
Функция removeitem показывает предупреждение: «Элемент, который нужно удалить: 123», впервые, но не отображается во второй раз. Когда я проверяю консоль Firebug, следующая ошибка приходит второй раз:
removeitem не является функцией
Пожалуйста помоги!!
Все мои функции Javascript находятся в отдельном файле (sc.js), для которого я использую <script type="text/javascript" src="js/sc.js"></script> в теге HEAD моей страницы.
Моя точка зрения. Итак, я думаю, что вопрос приходит к простой точке: если веб-страница запрашивает некоторый HTML-код с PHP-страницы с использованием XMLHTTPRequest – и если этот HTML-код (отправленный PHP) содержит некоторую кнопку, которая вызывает функцию Javascript, то что будет в этой ситуации [?]. Теперь, поскольку я могу удалить строку в первый раз, я думаю, что неверно говорить, что выше ситуация не будет работать. Дело в том, что код, который пришел из PHP и уже загруженного Javascript, не знает о присутствии друг друга, когда я нажимаю кнопку второй раз.
Внутри функции removeitem вы переписываете removeitem объектом XMLHttpRequest . Следовательно, более поздняя ошибка removeitem is not a function .
Чтобы исправить это, либо префикс removeitem по var (рекомендуется), либо использовать другое имя переменной, либо и то, и другое.
Рекомендуемый код:
function removeitem(itemid) { alert("The item to be removed is: "+itemid); var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); removeitem.onreadystatechange = function() { if (removeitem.readyState == 4 && removeitem.status == 200) { document.getElementById("cartmain").innerHTML = removeitem.responseText; } else if(removeitem.readyState < 4) { document.getElementById("cartmain").innerHTML="Loading..."; } } var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID. removeitem.open("GET", linktoexecute, true); removeitem.send(); }
Добавление var до removeitem устраняет проблему, поскольку переменная локально определена. Когда var опущен, новое значение будет привязано к ближайшему родительскому объявлению (функция в этом случае).
var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
Предыдущая строка не подходит для:
var removeitem; if (window.XMLHttpRequest) { removeitem = new XMLHttpRequest(); } else { removeitem = new ActiveXObject("Microsoft.XMLHTTP"); }
это не похоже на то, что вы избегаете двойных кавычек, как указано в @Rob W. Обычно я использую одинарные кавычки при использовании php для выписывания HTML. Я считаю, что это хорошая практика, на мой взгляд.
Единственное, что я могу придумать, это то, что, возможно, ваша функция не находится вне текста ответа AJAX. Просто проверьте Firebug или просмотрите источник того, что отображается после первого ответа.
Надеюсь, это поможет.
Почему вы загружаете весь стол html каждый клик? Вы можете отправлять только true или false при удалении и после удаления элемента TR с помощью jQuery.
Удаление TR: в вашей функции removeitem после ответа ajax просто вызовите $(this).parents("tr").remove();