Вызов функции Javascript из HTML

Question

У меня есть 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, который уже был загружен, не знают о присутствии друг друга, когда я нажимаю кнопку во второй раз.

Answer 1

Внутри функции 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");
}

Answer 2

Почему вы загружаете все таблицы HTML каждый клик?Вы можете отправить только true или false при удалении и после того, как вы можете удалить элемент TR с помощью jQuery.

Удаление TR: В вашей функции removeitem после ответа ajax просто вызовите $(this).parents("tr").remove();

Answer 3

не похоже, что вы избегаете двойных кавычек, как заявил @Rob W.Я обычно использую одинарные кавычки при использовании php для записи HTML.Я считаю, что это хорошая практика, на мой взгляд.

Единственное, о чем я могу думать, это то, что, возможно, ваша функция не находится вне текста ответа AJAX.Просто проверьте Firebug или просмотрите источник того, что отображается после первого ответа.

Надеюсь, это поможет.