1

Getting this message:

Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

i followed the demo found here: Ugly Mongrel

Here's a snip of my JS:

function(){ var $pbNum = $('<input checked="checked" id="component-pbnum-'+ _val+ '" name="component-pbnum[]'+ '" type="checkbox" value="'+ _val+ '" data-mini="true">'+ '<label for="component-pbnum-'+ _val+ '">'+ _val+ '</label>'), $pbNumChk = $($pbNum[0]).on("change", function(ev){ $pbNum.remove(); // UNCAUGHT EXCEPTION: "cannot call methods on checkboxradio prior // to initialization; attempted to call method 'refresh'" }); $pbnumList.controlgroup("container").append($pbNum); $pbNumChk.checkboxradio(); // Have also tried $pbNumChk.checkboxradio().checkboxradio("refresh") // as hinted by other answers. No difference. }

i need to add checkboxradio (checkboxes in this case) dynamically, but provide the ability to remove them when they're click/tapped.

It's actually kinda frustrating how limited jQM seems to be compared to jQUI. No (documented) "destroy" method for these widgets? Anyway...

Checkboxes add to my ControlGroup just fine. When i click to remove them in a full browser, they are removed, but an exception is thrown. Everything i've found so far answers with something similar to this: https://stackoverflow.com/a/15180600/258598

Here's what i looked for: https://www.google.com/search?q=cannot+call+methods+on+checkboxradio+prior+to+initialization

i don't get it. Why is JS throwing an error about the widget when i'm removing it - and especially when it WAS initialized when it was inserted?

[EDIT]
Fixed a small typo in the $pbNum HTML string

Improve this question
8
  • Are you using type=checkbox for the input? You don't need to refresh after removing. To remove a checkbox, use $(this).closest('div').remove() Commented Jun 8, 2013 at 19:56
  • Also, which version if jquery and jquery mobile are using? Because the code in the link provided is quite old. Commented Jun 8, 2013 at 21:05
  • Yes, using type=checkbox. i had tried a container removal approach, but on a touch device it had the side-effect of deleting the checkbox i tapped AND the one next to it. And as you can see, i'm not making any attempt to refresh the checkbox during its removal. Using my script sample, the checkbox is cached, and successfully deletes on touch devices as well as full browser. But the exception is thrown on a full browser in either approach (directly on the cached $pbNum or in your suggestion). Commented Jun 8, 2013 at 21:13
  • I'll go through the code. Anyway, it's recommending using JQ 1.9.1 and JQM 1.3.1 Commented Jun 8, 2013 at 21:17
  • Thanks. i do happen to be using JQ 1.10.1, but tested with 1.9.1 & got the same issue. Commented Jun 8, 2013 at 21:25

1 Answer 1

Reset to default
1

I went through jQuery Mobile JS file and found out that when change triggers, jQM adds/removes classes to the checkbox and then call refresh method .checkboxradio('refresh') to enhance the markup.

It seems that .remove() occurs before refresh takes place, so if you delay the removal process by 1ms, refresh will before the checkbox is removed.

It's worth mentioning that stopImmediatePropagation() didn't help stopping the error message.

Demo

Code

$(document).on('change', '.ui-checkbox', function () { var box = $(this); setTimeout(function () { box.remove(); $('#group').controlgroup().trigger('create'); }, 1); });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

i'm not fond of using forced delays like that, because it doesn't address the underlying problem. But until the JQM team improves event handling & adds more widget methods to avoid these conflicts, this will have to do. Thanks for the effort.
My pleasure @cautionbug. The question is..why would you want to remove a checkbox on click, if I may ask? :)
In this form, a user can enter a part #. If it exists, it's added to a list of part #s for the final search query (w/several other parameters). i tried using a dynamically loaded selectmenu instead, but that widget already has issues (github.com/jquery-archive/jquery-mobile/issues/6077) & doesn't function correctly when nested that far into the DOM (underlying SELECT wasn't updated when OPTIONs change). So i had to come up with another multi-item grouping object. They can add items, and tap to remove if they made a mistake or want to adjust their results.
Oh okay, got the idea. I wish you all the best in your project. If you need further assistance, don't hesitate :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.