Unable to call jquery onclick of dynamically generated checkbox

Question

In My jsp file

$(document).ready(function() {

alert("inside");//this prints
function addToCompare(productID) { alert("productID"); //this does not

}

});

<!-- JSP -->
<input type="checkbox" id="check${productData.productID}" onclick="addToCompare(${productData.productID});"/>Add to compare

Am I missing any syntax here ? Please help.

I am calling it in my jsp file. Attached the code just now .sorry — ADIT
– ADIT, Commented Jun 9, 2018 at 21:12

Tibrogargan · Accepted Answer · 2018-06-09 21:53:38Z

1

There's a whole bunch going on here.

The issue you describe is due to the function addToCompare being out of scope when your HTML is created, not only because it is declared locally to your onReady function, but it almost certainly will not exist at the time your HTML is processed.

You're also going to cause yourself headaches because JSP is probably not going to add quotes when it interprets addToCompare(${productData.productID}). Also, putting the ID of the element in an onClick handler is redundant since this will be set in the handler, not to mention setting onClick handlers in HTML is considered a bad practice

To solve these, you can declare the function in the document/window scope and then attach it to the click handler for your product checkbox when the document is ready.

Since you don't really need the DOM id attribute for your business logic, you might want to consider supplying the product ID as purely a data attribute - helps preserve separation between layers.

function addToCompare() {
    console.log("Product ID: "+ this.id);
    console.log("Product ID: "+ this.dataset.productId);
}

$(function() {
    $('.productCheckbox').click(addToCompare);
    console.log("Document is ready");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input     type="checkbox"
          class="productCheckbox"
             id="whateverTheJSPputsHere"
data-product-id="theProductID"
/> Add to compare

JSP code (without the id):

<input type="checkbox" class="productCheckbox" data-product-id="${productData.productID}"/>Add to compare

edited Jun 9, 2018 at 21:53

answered Jun 9, 2018 at 21:19

Tibrogargan

4,6323 gold badges21 silver badges41 bronze badges

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

3 Comments

ADIT Over a year ago

How will I get productID inside .click method ? The checkbox is generated dynamically and have to store the product ID's selected by user in session /cookie. Thats why I need it inside my .click method OR / addToCompare

Tibrogargan Over a year ago

@Aditi Was getting to that :) You may not want to use id here, consider using data (also shown)

ADIT Over a year ago

Thank you so much for the information. This was really helpful.

score 1 · Accepted Answer · 2018-06-09 21:37:38Z

1

You are facing problem of scope, your function has limited scope.

Option 1: Move your function outside of document ready callback.

function addToCompare(productID){
  alert(productID);
}

$(document).ready(function(){
   /* to do */
});

Option 2: Expose your function to global scope.

$(document).ready(function(){
  function addToCompare(productID){
    alert(productID);
  }
  window.addToCompare = addToCompare; /* exposed */
});

Edited:

Uncaught Reference Error : P0001 is not defined. P0001 is the value of productData.productID

You need to escape the string value using \" or just use '

Option 1: onclick="addToCompare(\"${productData.productID}\");"

Option 2: onclick="addToCompare('${productData.productID}');"

edited Jun 9, 2018 at 21:37

answered Jun 9, 2018 at 21:12

user2575725

Collectives™ on Stack Overflow

Unable to call jquery onclick of dynamically generated checkbox

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related