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: http://goo.gl/mVOdo

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

Community
  • 1
  • 1
cautionbug
  • 435
  • 5
  • 18
  • 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() – Omar Jun 08 '13 at 19:56
  • Also, which version if jquery and jquery mobile are using? Because the code in the link provided is quite old. – Omar Jun 08 '13 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). – cautionbug Jun 08 '13 at 21:13
  • I'll go through the code. Anyway, it's recommending using JQ 1.9.1 and JQM 1.3.1 – Omar Jun 08 '13 at 21:17
  • Thanks. i do happen to be using JQ 1.10.1, but tested with 1.9.1 & got the same issue. – cautionbug Jun 08 '13 at 21:25
  • check this. http://jsfiddle.net/Palestinian/ErGgC/ the problem is checkbox should be created instead of refreshed when appended dynamicaly. – Omar Jun 08 '13 at 21:42
  • Go to the standalone of your fiddle: http://fiddle.jshell.net/Palestinian/ErGgC/show/ and activate debugging tools. It still throws the `checkboxradio` exception. i suspect at this point it's something in JQM. As long as it functions in the UI and doesn't mess up form data, i guess i'll have to tolerate it for now. Frankly i'm increasingly disappointed in JQM not having the stability & depth that its sibling projects have. In the meantime, i appreciate your attention & effort to assist. – cautionbug Jun 09 '13 at 01:52
  • i'm getting no errors whatsoever. I'm using latest chrome. Edit: sorry, you're right. it happens on removal. – Omar Jun 09 '13 at 06:53

1 Answers1

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);
});
Omar
  • 32,302
  • 9
  • 69
  • 112
  • 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. – cautionbug Jun 09 '13 at 21:50
  • My pleasure @cautionbug. The question is..why would you want to remove a checkbox on click, if I may ask? :) – Omar Jun 09 '13 at 22:12
  • In this form, a user can enter a part #, and if it exists, it'll be added to a list of part #s for the final search query (there are several other parameters). i tried using a dynamically loaded `selectmenu` instead, but that widget already has issues (http://goo.gl/SDbUR) & 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. – cautionbug Jun 09 '13 at 22:40
  • Oh okay, got the idea. I wish you all the best in your project. If you need further assistance, don't hesitate :) – Omar Jun 09 '13 at 22:56