ajax created checkbox added to existing checkboxes

[dblado]

I have a set of checkboxes and an 'add another button' that creates the new record, and inserts the new checkbox (unstyled) into the DOM.

I've looked at #37 and #60 but still can't figure out how to do this right.

If I do something like this:

    insert = '<div class="col-md-4">' \
             '<label class="checkbox">' \
             '<input type="checkbox" checked name="good_at" value="' + str(new_proficiency.pk) + '">' \
                                                                                                 '' + new_proficiency.name + '' \
                                                                                                                             '</label>' \
                                                                                                                             '</div>'

append('#id_proficiencies', 'innerHTML', insert)

$("#write_review_form input[value=\'' + str(
        new_proficiency.pk) + '\']").iCheck({checkboxClass: "icheckbox_minimal checked",radioClass: "iradio_minimal", increaseArea: "20%"});'

only the new checkbox is clickable -- the other checkboxes are set to true|false as they are clicked but no UI updates to show the user.

if I do this instead:

$(document).trigger(\'icheck\');

all the UI is right and the true|false is updated but all previous checked items are unchecked.

any way to retain the checked state of each checkbox while adding a new checkbox programmatically?

[drgullin]

Hello David.

I need to see a demo, to figure out what actually happens.

Have you tried 2.x version?

19 Mar 2014, â 04:28, David Blado notifications@github.com íàïèñàë(à):

I have a set of checkboxes and an 'add another button' that creates the new record, and inserts the new checkbox (unstyled) into the DOM.

I've looked at #37 and #60 but still can't figure out how to do this right.

If I do something like this:

insert = '<div class="col-md-4">' \
         '<label class="checkbox">' \
         '<input type="checkbox" checked name="good_at" value="' + str(new_proficiency.pk) + '">' \
                                                                                             '' + new_proficiency.name + '' \
                                                                                                                         '</label>' \
                                                                                                                         '</div>'

append('#id_proficiencies', 'innerHTML', insert)

$("#write_review_form input[value='' + str(
new_proficiency.pk) + '']").iCheck({checkboxClass: "icheckbox_minimal checked",radioClass: "iradio_minimal", increaseArea: "20%"});'
only the new checkbox is clickable -- the other checkboxes are set to true|false as they are clicked but no UI updates to show the user.

if I do this instead:

$(document).trigger('icheck');
all the UI is right and the true|false is updated but all previous checked items are unchecked.

any way to retain the checked state of each checkbox while adding a new checkbox programmatically?

—
Reply to this email directly or view it on GitHub.

[dblado]

hi, trying to reproduce w/out ajax but it's working fine :(

I did notice that when I run $(document).trigger('icheck'); only after inserting

seems every time I insert a checkbox and run the trigger, it creates unnecessary elements

[dblado]

ok, good news, I removed all the processing to callbacks in my JS instead of trying to use the builtin ones in the ajax library I'm using. works fine now. Not sure what was causing the above but I'm moving on now :)

Thanks for the quick response -- and thanks for this awesome library.

[dblado]

hopefully someone else finds this useful :)