CODEWITHSUNDEEP
javascripthtmlonclickdom-events
Twister1002
Twister1002

Reputation: 557

onClick functions executes twice

I'm trying to get JavaScript to execute correctly when either clicking a checkbox, or clicking a <tr>. However it seems to be executing the code twice; once for the checkbox and once for the <tr>.

Now you may say "Why not just put it on the checkbox and be done with it?" If it was that simple, I would have done that. But it was requested to have it trigger when they click the <tr> or on the checkbox.

Now to add some more complexity, when the onClick fires, it sends the data back to the parent, in an array, for processing until it is time for the update.

Child Window (Problem area)

function FnSearch(urembroid, embroideryID){
  if (document.getElementById("embroid"+embroideryID).checked == false){
                    try {
                            parent.window.EmbroideryDataReturned("add", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("add", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = true;
            } else {
                    try {
                            parent.window.EmbroideryDataReturned("remove", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("remove", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = false;
            }

Child window HTML -- Please note PHP is making the and fields.

echo "<tr id='embroideryData' onclick=\"javascript:FnSearch('" . $data['urembroidid'] . "', '".$data['EmbroideryID']."')\">"; // On a <tr> execute the update
    if (OrderKeyExists($data['EmbroideryID'])) {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."' checked='checked'/></td>";
    } else {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."'/></td>";
    }
echo "</tr>\n";

I only need this code to execute once. The code works correctly when clicking on the <tr> but executes twice when the checkbox is clicked on. However it also messes up the array inside the parent window to where it could have false data when clicking on the checkbox. When debugging, it sends a onClick to FnSearch as if the checkbox was originally "checked" when it was not. So it sends a "remove" to the parent, but the second time it does the complete opposite. This is causing the data integrity.

So the main question is: How do you get the checkbox to only execute FnSearch once?

If anyone has any input, that would be greatly appreciated!

Upvotes: 0

Views: 703

Answers (1)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

There are many ways of fixing it...

(1) This is the way I fixed same issue...because I also wanted custom checkboxes...

You can use images of checked and unchecked boxes instead of checkbox and toggle the src on tr click...

Also you have provided same id checkbox to all td which wont work...

function toggleRowSelection(row){
   if(row.getElementsByTagName('img')[0].src == "checked.jpg")
       row.getElementsByTagName('img')[0].src = "unchecked.jpg"
   else
       row.getElementsByTagName('img')[0].src = "checked.jpg"
}

HTML (approx.)

<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>
<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>

(2) Get the element which is clicked in the row using event.target and if it is td check/uncheck the checkbox.....

and if it is checkbox just perform your operations

(3) Also check event.preventDefault() and event.stopPropagation() ...it might help you

Upvotes: 1

Related Questions