Calling Javascript Function from HTML

Question

I have an HTML table with 5 rows (say) that displays on a web page. The first column of the RowID table (which is unique for each row), and the last column of each row is the [X] button (which, when clicked, deletes the row). The whole table is in the <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 delete the line:

STEP1: When the user clicks the [X] button, the XMLHTTPRequest function sends a message to the PHP code with a unique identifier for each line. During the time that the PHP code deletes the line, the DIV element shows "Loading ..."

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

STEP2: The PHP code will delete the row from the table (and from the database) and 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, derived from the PHP code, is then shown in the DIV element using the following line:

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

My problem: Suppose I have a table with 5 rows. When I click the Delete button, the row is deleted successfully, and the table is displayed with the 4 remaining rows. This raises the problem: when I want to delete another row from the table: nothing happens. In other words, if I press [X] again on some line , then nothing happens . The XMLHTTPRequest function is not called. Ideally, it should call the XMLHTTPRequest function again using this unique RowID, and then the table should be displayed with the remaining 3 rows.

IMPORTANT NOTE! When I refresh the page, I can delete another line. But this time I can only delete one line. To delete another one, I have to refresh the page again.

Can anyone identify the problem here? Please help.

NOTE. My table is actually a shopping cart that contains the product in each row. The [X] button actually means “delete item” from the recycle bin.

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 removeitem function displays the warning "The first item to be removed: 123", but does not appear a second time. When I check the Firebug console, the following error occurs a second time:

removeitem is not a function

Please, help!

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

My point of view. So, I think the question comes to a simple point: if a web page requests some HTML from a PHP page using XMLHTTPRequest - and if this HTML (sent by PHP) contains some button that calls the Javascript function - then what will be in this situation [?]. Now, since I can delete the line for the first time, I think it is wrong to say that the above situation will not work. The fact is that the code that came from PHP and already loaded Javascript does not know about the presence of each other when I click the button a second time.

Answer 1

Inside the removeitem function removeitem you overwrite removeitem XMLHttpRequest object. Therefore, a later error removeitem is not a function .

To fix this, use the removeitem prefix by var (recommended) or use a different 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 to removeitem fixes the problem as the variable is locally defined. When var omitted, the new value will be bound to the nearest parent declaration (in this case, the function).

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

The previous line is not suitable for:

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

Answer 2

this is not like you are avoiding double quotes, as pointed out by @Rob W. Usually I use single quotes when using php to write HTML. I think this is a good practice, in my opinion.

The only thing I can think of is that maybe your function is not outside the text of the AJAX response. Just check out Firebug or look at the source of what is displayed after the first answer.

Hope this helps.

Answer 3

Why do you download the whole html table every click? You can only send true or false when deleting and after deleting a TR element using jQuery.

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