Xajax and Jquery

Question

I have a page where the pagination is implementated in xajax. Each row has 3 columns for radio button where user can select (see the sample layout attached to figure out). Then when I selected from page 1 and moved to page 2, the value should be retained. If I moved back to page 1, I can see the selection that I have made.

I have a code that will take care of the selection of values, from page 1 to another.

$('.pagination_wrapper').live('click', function(){                      
            $(document).ready(function(){
                var my_option_1 $('#sel_option_1_val').val();
                var my_option_2= $('#sel_option_2_val').val();  
                var my_option_3= $('#sel_option_3_val').val();              
                $('[type="radio"][name="sel_option_1_val_option"][value="'+my_option_1+'"]').attr('checked','checked');
                $('[type="radio"][name="sel_option_2_val_option"][value="'+my_option_2+'"]').attr('checked','checked');
                $('[type="radio"][name="sel_option_3_val_option"][value="'+my_option_3+'"]').attr('checked','checked');             
            });
        }); 

Now my problem is, when i move from page 1 to another the radio button is not being selected even if its in the table list because the xajax request is not yet done but jquery already performed the selection. Adding alert in the function will make it work fine, because the dom is already loaded and before this part is executed $('[type="radio"][name="sel_option_1_val_option"][value="'+my_option_1+'"]').attr('checked','checked');

This is the code with alert:

$('.pagination_wrapper').live('click', function(){                      
            $(document).ready(function(){
                var my_option_1 $('#sel_option_1_val').val();
                var my_option_2= $('#sel_option_2_val').val();  
                var my_option_3= $('#sel_option_3_val').val();  
alert('test');              
                $('[type="radio"][name="sel_option_1_val_option"][value="'+my_option_1+'"]').attr('checked','checked');
                $('[type="radio"][name="sel_option_2_val_option"][value="'+my_option_2+'"]').attr('checked','checked');
                $('[type="radio"][name="sel_option_3_val_option"][value="'+my_option_3+'"]').attr('checked','checked');             
            });
        }); 

Any idea on what do I need to do so that the selection of the radio button will only be executed once the xajax request is done? I have tried setTimeout(), jquery.load but it isnt working still.

Answer 1

I was able to fixed it in my own. Configured my xajax request to be synchronous.