jQuery Grid Plugin - jqGrid - Topic: Button "Edit Selected" not functional

maggie on Button "Edit Selected" not functional

Wed, 07 Jan 2009 11:26:24 +0200

Hello!

I put $(”#bedata”).click inside of ready. It works now! !

Thank you so much for your help!!!

Maggie

MamaliFrenchi on Button "Edit Selected" not functional

Wed, 07 Jan 2009 10:57:10 +0200

I did not go through your entire code, but it looks like your $(”#bedata”).click code is outsite of jQuery(document).ready(function(){ });

it should be inside of ready, or apply <input type=”BUTTON” id=”bedata” value=”Edit Selected” onclick='yourfunction();' /> then define yourfunction to call editGridRow. Just move }); before $('#bedata').click at the end of your script.

maggie on Button "Edit Selected" not functional

Wed, 07 Jan 2009 08:56:12 +0200

I added the alert message but nothing happened when I click on the button. Here are my html codes:

<html>
<head>
  <title>jqGrid Demo</title>
  <link rel="stylesheet" type="text/css" media="screen"
   href="jquery/themes/basic/grid.css" />
  <link rel="stylesheet" type="text/css" media="screen"
   href="jquery/themes/jqModal.css" />

  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script src="jquery/jquery.jqGrid.js" type="text/javascript"></script>
  <script src="jquery/js/jqModal.js" type="text/javascript"></script>
  <script src="jquery/js/jqDnR.js" type="text/javascript"></script>
  <script type="text/javascript">
  jQuery(document).ready(function(){
      jQuery("#editgrid").jqGrid({
           url:'http://localhost:8080/ReportsP.....d',
           datatype: 'xml',
           mtype: 'GET',
           colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
           colModel :[
              {name:'invid', index:'invid', width:60, editable:false,editoptions:{readonly:true,size:10}},
              {name:'invdate', index:'invdate', width:90, editable:true,editoptions:{size:25}},
              {name:'amount', index:'amount', width:80, align:'right', editable:true,editoptions:{size:25}},
                    {name:'tax', index:'tax', width:80, align:'right', editable:true,editoptions:{size:25}},
                    {name:'total', index:'total', width:80, align:'right', editable:true,editoptions:{size:25}},
                    {name:'note', index:'note', width:150, sortable:false, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} ],
                pager: jQuery('#pager'),
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'invid',
                sortorder: "desc",
                viewrecords: true,
                imgpath: 'jquery/themes/basic/images',
                caption: 'My first grid',
                editurl:"someurl.jsp"
            });
         });

        $("#bedata").click(function(){
      var gr = jQuery("#editgrid").getGridParam('selrow');
      alert ("rowid" + gr);
   //if( gr != null ) jQuery("#editgrid").editGridRow(gr, {height:280,reloadAfterSubmit:false});
      //else alert("Please Select Row");
   alert ("test!");
  });
         </script>
</head>
<body>
  <table id="editgrid" class="scroll" cellpadding="0" cellspacing="0"></></table>
  <div id="pager" class="scroll" style="text-align: center;"></div>

  <input type="BUTTON" id="bedata" value="Edit Selected" />


</body>
</html>

Do I miss including some javascripts?

Thanks! Maggie

MamaliFrenchi on Button "Edit Selected" not functional

Tue, 06 Jan 2009 20:50:54 +0200

What's your html code for jqGrid? add alert(gr); after the gr = jQuery(”#editgrid”).getGridParam('selrow'); to see if you get the selected row ID, also use jut ' instead of " everywhere sometimes it matters. your code should work. I am using exactly the same way from a button in my pager

maggie on Button "Edit Selected" not functional

Tue, 06 Jan 2009 18:53:47 +0200

Hello,

I want to set up form editing. I tried to use a button "Edit Selected" as the demo. But the button is not functional.

the html code for the button:

the javascript :

$("#bedata").click(function(){
var gr = jQuery("#editgrid").getGridParam('selrow');
if( gr != null ) jQuery("#editgrid").editGridRow(gr,{height:280,reloadAfterSubmit:false});
else alert("Please Select Row");
});

Any ideas? Thanks!

Maggie