0

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. enter image description here

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.

user1149244
  • 711
  • 4
  • 10
  • 27
  • You shouldn't put `$( document ).ready()` inside events. It binds the code to run when the page loads, and the page has already loaded when the event triggers. – JJJ Jan 11 '13 at 09:05
  • Umm yes, i did that but that doesn't do the trick. I was able to make it worked now. Please seee my answer below. :) – user1149244 Jan 11 '13 at 09:07
  • Yeah sorry, that wasn't meant to be an answer to the actual problem, just a side note. – JJJ Jan 11 '13 at 09:10
  • Just found out that putting xajax in synchronous mode will not work in IE. Is there other way to bypass this? – user1149244 Jan 21 '13 at 11:12

1 Answers1

0

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

user1149244
  • 711
  • 4
  • 10
  • 27