0

So I have a business case where I've got groups (called Bundles) and they can contain other Bundles. Now, in my interface, I'm trying to have it so when you check the top level, it automatically checks (and disables, but I'm not there yet) the child bundles.

In order to accomplish that, each checkbox has an onchange event where it passes in this and a comma-delimited list of other Bundles that should be checked. The code I've pasted below behaves unexpectedly. Namely, when I'm forcing the Change event to be called (because programatically manipulating the checked state doesn't raise the Change event) the subsequent call winds up using the exact same arguments that the original Change event used.

It's almost as if when I call .change(), it's passing my original checkbox (not the cascaded one) and original list of children.

I've put in a ton of alerts, and the clutch one says "about to trigger change for [the right checkbox]", but then the very next alert says "disable raised for [the original/wrong checkbox]".

Any ideas on why programmatically raising the Change event is causing its arguments to be all messed up?

function disableChildren(chkBundle, childBundles) {

        var bundleId = chkBundle.id.substr(chkBundle.id.lastIndexOf("chk"));
        alert("disable raised for '" + bundleId + "' using children '" + childBundles + "'");
        jQuery("#BundleList input:checkbox[id*=" + bundleId + "id]").attr("checked", chkBundle.checked);

        var childIds = childBundles.split(",");

        for (var i = 0; i < childIds.length; i++) {
            jQuery("#BundleList input:checkbox[id$=chk" + childIds[i] + "]").each(function(index, domEle) {
                if (domEle.checked != chkBundle.checked) {
                    alert('about to check ' + domEle.id);
                    domEle.checked = chkBundle.checked;
                    alert('about to trigger change for ' + domEle.id);
                    domEle.change();
                    alert('done triggering ' + domEle.id);
                }
            });
        }
    }

And an example of one of the html for a checkbox:

<input id="BundleAssignment_rptMainBundle_ctl02_chk1" 
type="checkbox" name="BundleAssignment$rptMainBundle$ctl02$chk1" 
onchange="disableChildren(this,'7,8')" onclick="disableChildren(this,'7,8')" />
JustLoren
  • 3,224
  • 3
  • 27
  • 34
  • Possibly relevant: http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie – Cristian Sanchez Aug 27 '10 at 18:40
  • I'm using both click and change :/ – JustLoren Aug 27 '10 at 18:45
  • 1
    leave the `click` handler and remove the references to `change`- that's going to repeat the process and possibly create unintended consequences. also do not manually call `.change()` – lincolnk Aug 27 '10 at 18:59
  • 1
    Are you adding a custom `change` method to the DOM elements as an expando? There is no standard DOM method called `change()` like there is `click()`. – bobince Aug 27 '10 at 19:00
  • @lincolnk: Ok, if I'm not supposed to manually call change, how do I raise the change event on these checkboxes? @bobince: I'm using jQuery, which has the .change() function. I'm unsure what your point is. – JustLoren Aug 27 '10 at 19:02
  • @JustLoren call `.click()`, or alternately make the call yourself like `disableChildren(domEle, );` – lincolnk Aug 27 '10 at 19:06
  • @lincolnk: oh snap! Submit as answer, good sir :D Specifically, calling as .Click submitted the arguments as expected. – JustLoren Aug 27 '10 at 19:13

1 Answers1

3

remove anything to do with change. replace domEle.change(); with domEle.click();

lincolnk
  • 11,218
  • 4
  • 40
  • 61