Problem with checkbox state when checkboxes are in the expanded div.

[boulderbri]

Hi.

We are building an ASP.NET application that has a list of checkboxes inside of a div. We are trying to use the expander on the div element so the user only sees some of the checkboxes but can click 'more' to see the rest.

The expander is allowing us to click on the more/less and that works fine, however, when a person unchecks a checkbox, the checkbox value is not sent back properly on the submit (it always comes back as checked). We've verified this with Fiddler. If I comment out the line with expander(), all works fine with the checkboxes.

After some experimentation, we've also noticed that this behavior only occurs on 'always visible' checkboxes. If I check/uncheck a checkbox that is hidden by the more/less, that correct value is posted back.

I've verified this with Chrome and IE9. Have you seen anything like this? Can the expander be used with form controls like checkboxes and text boxes?

Thanks!
Brian

[boulderbri]

I've created a very basic example demonstrating this problem without ASP.NET. The html is in:

https://gist.github.com/4225453

I apologize if this is not the best way to send source.

With this example, I'm seeing two issues. It appears there are two different states maintained for the checkbox values. For example, when contracted, I can uncheck 1-5 and check 6-10 and, when expanded, I can uncheck 8-14 and check 1-7. If I flip back and forth between more/less, the state of the values also flips back and forth.

The second issue I'm seeing is what I described above. In the contracted state, if I uncheck 1-5 and hit submit, the form data sent shows 1-5 as checked.

It appears to be always submitting the values of the checkboxes in the expanded state. I was able to verify this with a few tests.

Am I using this wrong or should I not be using the expander with form elements? I appreciate any help! Thanks for your time in building and supporting these great tools!

Regards,
Brian

[kswedberg]

Thanks for the report. I'm not sure, just by reading your description, why this would be happening, so I really appreciate the gist. It's kind of confusing since, once the plugin modifies the DOM when it's called, it doesn't do anything special with the contents of the details other than show and hide them. I'll look into it and get back to you as soon as I can.

[boulderbri]

Hi Karl,

I have a home-grown expander on another similar page also just using
hide/show. I thought that behavior was really strange, especially
maintaining the state between the two. Please let me know if I can help
explain, test or do anything else.

Kind regards,
Brian

On Thu, Dec 6, 2012 at 11:07 AM, Karl Swedberg notifications@github.comwrote:

Thanks for the report. I'm not sure, just by reading your description, why
this would be happening, so I really appreciate the gist. It's kind of
confusing since, once the plugin modifies the DOM when it's called, it
doesn't do anything special with the contents of the details other than
show and hide them. I'll look into it and get back to you as soon as I can.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/55#issuecomment-11096682.

[kswedberg]

Thanks, Brian. I think I figured out what the problem is. When the plugin detects block-level elements that need to be split up, it takes the "safe route" and retains the entire contents for the "detail" as well as slicing up just enough for the "summary" and copying it into the summary div. This helps preserve the block formatting and avoids all sorts of brokenness. In your case, unfortunately, it means that you have two sets of the first 10 checkboxes. One thing you could do is bind a change handler to the checkboxes that changes the checked state of any other checkbox with the same name. Not terribly elegant, but it's working here: http://jsfiddle.net/kswedberg/YEwVu/

[boulderbri]

Wow. Good catch, Karl. That's interesting.

I appreciate your suggested fix. I'll put that in and try it out. Since
I'm in ASP.NET and using autopostbacks with update panels, the autopostback
already binds a change handler to the checkbox. I'll give it a try and
test!

Thanks again!
Brian

On Thu, Dec 6, 2012 at 1:50 PM, Karl Swedberg notifications@github.comwrote:

Thanks, Brian. I think I figured out what the problem is. When the plugin
detects block-level elements that need to be split up, it takes the "safe
route" and retains the entire contents for the "detail" as well as slicing
up just enough for the "summary" and copying it into the summary div. This
helps preserve the block formatting and avoids all sorts of brokenness. In
your case, unfortunately, it means that you have two sets of the first 10
checkboxes. One thing you could do is bind a change handler to the
checkboxes that changes the checked state of any other checkbox with the
same name. Not terribly elegant, but it's working here:
http://jsfiddle.net/kswedberg/YEwVu/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/55#issuecomment-11103169.

[kswedberg]

Closing due to inactivity.