Passing javascript variable to ruby code

I am trying to implement an flexigrid in ruby on rails... I am successful in implementing the flexigrid code.. Then i tried to implement a dialog box for "New User" .. It worked fine .. When i click on the Add New User the _form.html.erb loads into the dialog box .. My problem is that when i tried to implement the Edit button in the flexigrid which should open the edit.html.erb for that particular user .. I need to pass the id to the ruby code where it opens the edit form in the dialog box .. Please help me guys .. I am new to ruby on rails .. Please do not mind if my question is wrong.. I am able to it in the controller but dialog box is not possible...

Please help me guys ...

My Code:

index.html.erb

<h1 style="float:left;">Users</h1> <div style="clear:both;"></div> <div id="somediv"></div> <div class="Flexgrid">   <script type="text/javascript">     var idt=0;     var $dialog;     var $editDialog;     var id;

    $(document).ready(function(){       $("#flex1").flexigrid({           url: 'http://localhost:3000/users/grid_data’,           dataType: 'json',           colModel : [             {display: 'Edit', name : 'edit', width : 20, sortable : true, align: 'center',process:EditUser},             {display: 'Delete', name : 'delete', width : 30, sortable : true, align: 'center'},             {display: 'SNo.', name : 'id', width : 20, sortable : true, align: 'center'},             {display: 'First Name', name : 'firstname', width : 90, sortable : true, align: 'center'},             {display: 'Last Name', name : 'lastname', width : 90, sortable : true, align: 'center'},             {display: 'Email', name : 'email', width : 180, sortable : true, align: 'center'}             ],           buttons : [             {name: 'Add User', bclass: 'add', onpress : AddUser},             {separator: true},             {name: 'A', onpress: sortAlpha},             {name: 'B', onpress: sortAlpha},             {name: 'C', onpress: sortAlpha},             {name: 'D', onpress: sortAlpha},             {name: 'E', onpress: sortAlpha},             {name: 'F', onpress: sortAlpha},             {name: 'G', onpress: sortAlpha},             {name: 'H', onpress: sortAlpha},             {name: 'I', onpress: sortAlpha},             {name: 'J', onpress: sortAlpha},             {name: 'K', onpress: sortAlpha},             {name: 'L', onpress: sortAlpha},             {name: 'M', onpress: sortAlpha},             {name: 'N', onpress: sortAlpha},             {name: 'O', onpress: sortAlpha},             {name: 'P', onpress: sortAlpha},             {name: 'Q', onpress: sortAlpha},             {name: 'R', onpress: sortAlpha},             {name: 'S', onpress: sortAlpha},             {name: 'T', onpress: sortAlpha},             {name: 'U', onpress: sortAlpha},             {name: 'V', onpress: sortAlpha},             {name: 'W', onpress: sortAlpha},             {name: 'X', onpress: sortAlpha},             {name: 'Y', onpress: sortAlpha},             {name: 'Z', onpress: sortAlpha}             ],           searchitems : [             {display: 'firstname', name : 'firstname'},             {display: 'email', name : 'email', isdefault: true}             ],           sortname: "firstname",           sortorder: "asc",           usepager: true,           title: 'Users',           useRp: true,           rp: 10,           showTableToggleBtn: true,           width: 700,           height: 255           }           );          $dialog = $('<div></div>')                          .load('<%= url_for new_user_path %> #dvUserForm')                          .dialog({                                autoOpen: false,                                width:400,                                height:500,                                title: 'Add User'                          });

         $editDialog = $('<div></div>')                          .load('<%= url_for edit_user_path(idt) %>')                          .dialog({                                autoOpen: false,                                width:400,                                height:500,                                title: 'Edit User'                          });     });

    function AddUser()     {       $dialog.dialog('open');     }

    function EditUser(celDiv, id) {            $(celDiv).click(              function(){                  idt=$(this).closest('tr').find('td:nth(2)') [0].textContent;                  alert(idt);                 $editDialog.dialog('open');             });     }

    function sortAlpha(com)     {     jQuery('#flex1').flexOptions({newp:1, params: [{name:'letter_pressed', value: com},{name:'qtype',value:$ ('select[name=qtype]').val()}]});     jQuery("#flex1").flexReload();     }   </script> <table id="flex1" style="display:none"></table> </div>

yrkapil wrote in post #1050834:

I am trying to implement an flexigrid in ruby on rails... I am successful in implementing the flexigrid code.. Then i tried to implement a dialog box for "New User" .. It worked fine .. When i click on the Add New User the _form.html.erb loads into the dialog box .. My problem is that when i tried to implement the Edit button in the flexigrid which should open the edit.html.erb for that particular user .. I need to pass the id to the ruby code where it opens the edit form in the dialog box .. Please help me guys .. I am new to ruby on rails .. Please do not mind if my question is wrong.. I am able to it in the controller but dialog box is not possible...

Please help me guys ...

This first thing you should do is move your JavaScript out of your HTML. Behavior should be separated from the view, just as styling should be separated from structure. Rails is best used with Unobtrusive JavaScript (UJS) and has good support for moving data between the Ruby and JavaScript worlds.

Ryan Bates has created a Railscast that shows a few different options to accomplish what you need.