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>