Calling a Javascript function from HTML

Question

I am having a HTML table with 5 rows (say) which is being displayed on the webpage. The first column of the table is RowID (which is unique for each row) and the last column of each row is a [X] button (which on click will remove the row). The whole table is in a <div> element with id="cartmain"

<div id="cartmain">
     <table>
          <tr>
            <td>....</td>
            <td>....</td>
            <td> <a href="#" onclick="removeitem('id1')"> [X] </a> </td>
          </tr>
          ..
          ..
     </table>
</div>

This is how I am removing the row:

STEP1: When user clicks on [X] button, an XMLHTTPRequest function will send message to a PHP code with unique id of each row. During the time PHP code is removing the row, DIV element shows "Loading..."

document.getElementById("cartmain").innerHTML = "Loading..."

STEP2: PHP code will delete the row from table (and from database) and will return the remaining table.

<?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>";
?>

This remaining table received from the PHP code is then shown in the DIV element by using the below line:

document.getElementById("cartmain").innerHTML = removeitem.responseText;

My Problem: Suppose I have table with 5 rows. When I click on the Remove button, the row is removed successfully and table is then displayed with 4 remaining rows. Here comes the problem: When I want to remove another row from the table: Nothing is Happening. In other words, if I again click on [X] of some row then nothing happens . The XMLHTTPRequest function is not called. In ideal case, it should have called the XMLHTTPRequest function again with that unique RowID and table should then be displayed with remaining 3 rows.

IMPORTANT NOTE: When I refresh the page, then I am able to remove another row. But this time also, I can remove only one row. For removing one more, I have to refresh the page again.

Is anyone able to identify the problem here? Please help.

NOTE: My table actually is a Shopping Cart which contains a product in each row. [X] button actually signifies "removing the item" from the cart.

Here is the JavaScript code:

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();
}

The function removeitem shows an alert "The item to be removed is: 123" for the first time but does not shows second time. When I am checking in Firebug console, the following error is coming second time:

removeitem is not a function

Please help!!

All my Javascript functions are in a separate file (sc.js) for which I am using <script type="text/javascript" src="js/sc.js"></script> in the HEAD tag of my page.

My viewpoint: So finally I think the question comes to a simple point: If a webpage is requesting some HTML from a PHP page using XMLHTTPRequest -- and if that HTML (sent by PHP) contains some button which is calling a Javascript function -- then what will happen in this situation[?]. Now since I am able to remove the row for the first time, I think it is false to say that above situation will not work. It is just that the code that came from PHP and the Javascript which has already been loaded are not aware of each others presence when I click the button second time.

Answer 1

Inside the removeitem function, you're overwriting removeitem by a XMLHttpRequest object. Hence the later error removeitem is not a function .

To fix this, either prefix removeitem by var (recommended), or use another variable name, or both.

Recommended code:

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();
}

Adding var before removeitem fixes the problem, because the variable is locally defined. When var is omitted, a new value will be attached to the closest parent declaration (the function, in this case).

var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

The previous line is short for:

var removeitem;
if (window.XMLHttpRequest) {
    removeitem = new XMLHttpRequest();
} else {
    removeitem = new ActiveXObject("Microsoft.XMLHTTP");
}

Answer 2

it doesn't look like you're escaping your double quotes like @Rob W has stated. I generally use single quotes when using php to write out HTML. I find this to be a good practice in my opinion.

The only other thing I can think of is that maybe your function isn't outside AJAX response text. Just check Firebug or view source of what's being rendered after the first response returned.

I hope this helps.

Answer 3

Why you load all table html every click? You can send only true or false when deleting and after you can remove TR element with jQuery.

Removing TR: In your removeitem function, after ajax response, just call $(this).parents("tr").remove();