I'm currently putting together a form with various radio buttons who's state can be saved / recalled by jQuery / Ajax. The returned Ajax JSON data is looped through and sets the radio buttons depending on the value returned, this all works fine, but if I then go and change the selected radio buttons and re-save the data for some reason the actual radio button values which get .serialized() still show the previous Ajax set values not the new values I've changed to. This is really confusing because I've tried various other test pages to prove the concept works and it's fine.
Has anyone else ever seen radio buttons visually getting updated but serialize not picking up the changes?
A demo of what I'm seeing can be seen here. Selecting a name from the drop down menu will initiate a Ajax call which populates the radio buttons. If you click the Save button you'll see the serialize() radio button data which doesn't change after the Ajax has happened.
I'm going insane trying to work out why this isn't working properly! Any help is REALLY appreciated.
Dan
After spending many hours trying to work this out, the problem was in my Ajax success function I was doing:
$.each(data, function(key,value){
$("[name='" + key + "']").val(value);
});
and
for(var key in data){
$('input#' +key+'-'+data[key]).prop('checked',true);
}
$('input:radio').button("refresh");
Both of these happen at the same time and cause confusion.
To resolve I needed to change the first operation to
for(var key in data){
$('input#' +key+'-'+data[key]).prop('checked',true);
}
Hopefully this will help someone in the future.
Dan