CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Feb 2020
    Posts
    1

    Question JS web function not working on client side - PHP-JS-HTML

    Hi,
    I have this code:
    HTML Code:
    ...
            <tr id="hidden-row">	
    		<td colspan=7>
    			<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
    			<button onclick="addarow()">Add a row</button>
    		</td>
    	</tr>
    </table>
    With this script:
    HTML Code:
    function addarow() {
    	var table = document.getElementById("table-items");
    	var row = table.insertRow(0);
    	var cell1 = row.insertCell(0);
    	var cell2 = row.insertCell(1);
    	var cell3 = row.insertCell(2);
    	var cell4 = row.insertCell(3);
    	var cell5 = row.insertCell(4);
    	var cell6 = row.insertCell(5);
    	var cell7 = row.insertCell(6);
    }
    $(document).ready(function() {   
      $("#addrow").click(function(){
        $(".item-row:last").after('<tr class="item-row"><td>#</td><td>New Item</td><td>New</td><td>New</td><td>New</td><td>New</td><td>New</td></tr>');
        bind();
      });
      bind();
    });
    The button and link, do the same thing.
    Here is the problem, when I test it in localhost, the button and link works fine but when I test it from a different PC, the link is not working and is the one I need to work. Any idea what can be the root cause? do I need extra permissions in my host or add an extra line of code? I am not very savvy with JS. Thank you in advance.
    Try different browsers and nothing, the link Add a row does nothing.

    PHP, javascript, html, js

  2. #2
    Join Date
    Jun 2009
    Posts
    113

    Re: JS web function not working on client side - PHP-JS-HTML

    Not sure why it works differently but you shouldn't be using the "click" method of jQuery, you should be using "on" and set it to click. You're also looking for "item-row" by class - the dot beforehand - so you can improve the performance by filtering the elements to just TR ones that have that class "item-row". I also prefer $(function(){ .... }); rather than $(document).ready
    Something like this for your jQuery (I've done away with your addarow function):
    Code:
    	<script type="text/javascript">
    	$(function() {
    		$("#addrow").on('click',function(){
    			$("tr.item-row:last").after('<tr class="item-row"><td>#</td><td>New Item</td><td>New</td><td>New</td><td>New</td><td>New</td><td>New</td></tr>');
    		});
    	});
    	</script>
    And then because you're attaching the on click event to the ID "addrow" you can just assign that ID to the button and ditch the A element.
    HTML Code:
    <table>
        <tr id="hidden-row">	
    		<td colspan=7>
    			<button id="addrow">Add a row</button>
    		</td>
    	</tr>
    	<tr class="item-row">
    		<td>#</td>
    		<td>Old Item</td>
    		<td>Old</td>
    		<td>Old</td>
    		<td>Old</td>
    		<td>Old</td>
    		<td>Old</td>
    	</tr>
    </table>

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured