JQM setting radio programmatically

JQM setting radio programmatically

Howdy -

I'm using jQM 1.4.5 & jQ 1.11.1

Essentially i am trying to edit records. One page is a listview of records where clicking on the item takes you to the edit page. This process is done by sending an ajax request to the server to return some json data about the record, then altering the form via JS and then showing the form page. The form is a pretty simple form with a few fieldsets of radio inputs. Each radio input has it's own id. The js takes the data from the json return should then set the radio buttons to checked (and uncheck everything else), then show the page. Easy right?

Here is the js for setting the radio inputs:

  1. function changePage( page ) {
  2.     $('body').pagecontainer( "change", page );
  3. }
  4. function editRecord(type, id) {
  5.     $.get( 'a.php?action=getRecord&type=' + type + '&id=' + id, function( response ) {
  6.         if ( type == 'food' ) {
  7.             $('#food-id').val( id ); 
  8.             $('#form_food input[type="radio"]').removeAttr( 'checked' ); // clear all checked items
  9.             $('#meal-' + response.data.meal.toString() ).attr( 'checked', 'checked' ).checkboxradio( 'refresh' );
  10.             $('#eat-' + response.data.eat.toString() ).attr( 'checked', 'checked' ).checkboxradio( 'refresh' );
  11.             $('#drink-' + response.data.drink.toString() ).attr( 'checked', 'checked' ).checkboxradio( 'refresh' );
  12.             changePage( '#page-food' );
  13.         }
  14.     });
  15. }

the html for the form page is here:
  1.         <div id='page-food' data-role="page" data-add-back-btn="true">
  2.             <div class="ui-content">
  3.                 <form class="app_form" id="form_food" action="#" method="get">
  4.                     <input type="hidden" name="action" value="saveFood" />
  5.                     <input type="hidden" name="id" id="food_id" value="0" />
  6.                     <input type="time" name="time" id="food_time" />
  7.                     <fieldset data-role="controlgroup" data-type="horizontal">
  8.                         <input type="radio" name="meal" id="meal-0" value="0" checked="checked"><label for="meal-0">Breakfasy</label>
  9.                         <input type="radio" name="meal" id="meal-1" value="1"><label for="meal-1">Lunch</label>
  10.                         <input type="radio" name="meal" id="meal-2" value="2"><label for="meal-2">Dinner</label>
  11.                     </fieldset>
  12.                     <fieldset data-role="controlgroup" data-type="horizontal">
  13.                         <input type="radio" name="eat" id="eat-0" value="0" checked="checked"><label for="eat-0">None</label>
  14.                         <input type="radio" name="eat" id="eat-1" value="1"><label for="eat-1">A bit</label>
  15.                         <input type="radio" name="eat" id="eat-2" value="2"><label for="eat-2">A lot</label>
  16.                     </fieldset>
  17.                     <fieldset data-role="controlgroup" data-type="horizontal">
  18.                         <input type="radio" name="drink" id="drink-0" value="0" checked="checked"><label for="drink-0">None</label>
  19.                         <input type="radio" name="drink" id="drink-1" value="1"><label for="drink-1">Water</label>
  20.                         <input type="radio" name="drink" id="drink-2" value="2"><label for="drink-2">Juice</label>
  21.                     </fieldset>
  22.                     <div class="ui-grid-a ui-responsive">
  23.                         <div class="ui-block-a"><a href="#page-options" class="ui-shadow ui-btn ui-corner-all ui-mini" data-rel="back">Cancel</a></div>
  24.                         <div class="ui-block-b"><button type="submit" id="submit_food" class="ui-shadow ui-btn ui-corner-all ui-mini">SAVE</button></div>
  25.                     </div>
  26.                 </form>
  27.             </div>
  28.         </div>

Here is a sample JSON return:
  1. {"status":"success","data":{"id":"218939","drink":"2","eat":"1","meal":"3"}}
Ok so the issues:
Problem is that while the inputs are being correctly set to checked (as verified by inspecting the element), the ui is not refreshing those inputs properly. Whenever i click a record. the page is shown with sometimes the correct elements, sometimes nothing is highlighted, or a combination therein. It has NEVER actually worked as designed.

Further, if i try to do the edit function BEFORE showing the form page, i get this error in the console:
  1. Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
But, if i go to the page first and then try the edit function it does not work. NOR does changing to the page first, then resetting the radios.

I've spent hours on this bug. I do NOT want to revert to 1.2 to test out the legacy functionality. The current workaround is to change all the radio functions to selects, but i would rather have this behavior be like buttons.

Can someone verify that this is a bug? I've already pulled all my hair out.

thanks, graham