Remove data-type="horizontal" in javascript

Remove data-type="horizontal" in javascript

Hi, I would like to dynamically change the checkboxradio widget from horizontal to vertical depending on the width of the page.

window.matchMedia raises an event when the window becomes small. Then using  $('.fieldset').attr('data-type', ""); the ="horizontal" part can be removed. When you create a page with just "data-type" on the fieldset the radio buttons are shown vertically as intended. However, when doing this dynamically nothing happens.

I tried to call refresh() on the fieldset, but I don't know how best to do that. I get an Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'. Maybe this has to do with the moment the matchMedia event occurs. See  http://plnkr.co/edit/CHThh2aPHYf6Rbn4fgo5 (drag the window so it gets smaller than 800px)

Currently to solve this I rebuild the page in code-behind:

  1.   $( currentPage).remove(); //Remove the current page so it does not get mixed with the new one
  2.   $(":mobile-pagecontainer").pagecontainer("change", thisPageURL, {
  3.             transition: "none", showLoadMsg: true
  4.     }) 

but it would be much more elegant to do this directly with jQuery.

Any ideas/suggestions/start-all-over comments? 

Pieter