jquery script is not working on clicking on button

Question

I am trying to get the selected data from table, I am using bootstrap and jquery. After selecting checkbox and click on Add to Cart button I have to get the selected data from table. Below is my code snippet:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
    	<script type="text/javascript">
    	var checkedRows = [];
    	$('#eventsTable').on('.bs-checkbox', function (e, row) {
    		checkedRows.push({id: row.id, name: row.name, forks: row.forks});
    	  console.log(checkedRows);
    	});
    
    	$('#eventsTable').on('uncheck.bs.table', function (e, row) {
    	  $.each(checkedRows, function(index, value) {
    	    if (value.id === row.id) {
    	      checkedRows.splice(index,1);
    	    }
    	  });
    	  console.log(checkedRows);
    	});
    
    	$("#add_cart").click(function() {
    	  $("#output").empty();
    	  console.log(checkedRows);
    	  $.each(checkedRows, function(index, value) {
    	    $('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
    	  });
    	});
    	</script>
    </head>
    
    <body>
    	<div style="position: absolute;bottom: 42px; padding-left:10px;  "> 
    	 <table id="eventsTable"
           data-toggle="table"
           data-height="300"
           data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
           data-pagination="true"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-toolbar="#toolbar">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="name">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="description">Description</th>
        </tr>
        </thead>
    </table>
    
    <button id="add_cart">Add to card</button>
    <ul id="output"></ul>
    </div>
    </body>
    </html>

When I click on my button none of my jquery functions are calling. I have referred : Getting values of selected table rows in bootstrap using jquery

Kindly help me to resolve this. Thanks in advance.

Do you have any console errors?

The One and Only ChemistryBlob
– The One and Only ChemistryBlob

2016-09-09 13:17:54 +00:00
Commented Sep 9, 2016 at 13:17 — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Sep 9, 2016 at 13:17

nvugteveen · Accepted Answer · 2016-09-09 13:19:16Z

4

The problem is casued by the fact that your js loads before the DOM is ready.

You can do one of two things:

Put your script tag with the event handlers in it before

</body>

Add a document ready event around your code

$(document).ready(function(){
   // your code here
});

answered Sep 9, 2016 at 13:19

nvugteveen

5163 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mani · Accepted Answer · 2016-09-09 13:31:09Z

-1

Use #add_cart click function like this

$(document).ready(function(){
    $("#add_cart").click(function() {
        $("#output").empty();
        $("tbody tr").each(function() {
            if($(this).hasClass("selected")){
                $('#output').append($('<li>'+$(this).find("td:eq(1)").text()+' | '+$(this).find("td:eq(2)").text()+'</li>'));
            }
        });
    });
});

answered Sep 9, 2016 at 13:31

Mani

2,6552 gold badges23 silver badges44 bronze badges

1 Comment

user3355101 Over a year ago

Hi Mani, if i check last row of the table getting full dom in output.

Collectives™ on Stack Overflow

jquery script is not working on clicking on button

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related