Question

Hi I’m using jqgrid to show some information in a grid. But I have a problem and I don’t know how to solve.

I have the following function to fill my jqgrid:

<script type="text/javascript">
$(function(){
  $("#list").jqGrid({
    url:'data.php?q=1',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Fabricante','Codigo', 'Titulo','Descripcion'],
    colModel :[ 
      {name:'fabricante', index:'fabricante', width:137}, 
      {name:'codigo', index:'codigo', width:100}, 
      {name:'titulo', index:'titulo', width:250}, 
      {name:'descripcion', index:'descripcion', width:400}
    ],
    pager: '#pager',
    rowNum:1000,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    height: "256px",
    caption: 'Cursos'
  }); 
}); 
</script>

this is my body:

<form name="form" action="CourseSearch.html" method="get">
   <input type="text" class="search-fields" id="fab"/>
   <input class="" type="submit" name="Submit2" value="Search" />
</form>
<table id="list">
    <tr>
        <td><td/>
    </tr>
</table> 
<div id="pager">
</div> 

I just want to know how to send a string to my data.php page using my html form, because I need to get this string to using in the mysql query to get the data.

Thanks

---

This is the new code:

<script type="text/javascript">
$(function(){
  $('#search').click(function () {
    $("#list").trigger('reloadGrid', [{page: 1, current: true}]);
  });
  $("#list").jqGrid({
    url: 'data.php?q=1',
    postData: {
        mySearch: function () { return $('#fab').val(); }
    },
    datatype: 'xml',
    mtype: 'get',
    colNames:['Fabricante','Codigo', 'Titulo','Descripcion'],
    colModel :[ 
      {name:'fabricante', index:'fabricante', width:137}, 
      {name:'codigo', index:'codigo', width:100}, 
      {name:'titulo', index:'titulo', width:250}, 
      {name:'descripcion', index:'descripcion', width:400}
    ],
    pager: '#pager',
    rowNum:1000,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    height: "256px",
    caption: 'Cursos'
  }); 
}); 
</script>

---

Another change

the function

<script type="text/javascript">
$(function(){
  $('#search').click(function () {
    $("#list").trigger('reloadGrid', [{page: 1, current: true}]);
    return false;
  });
  $("#list").jqGrid({
    url: 'data.php?',
    postData: {q: 1, mySearch: function () { return $('#fab').val(); }},
    datatype: 'xml',
    mtype: 'get',
    colNames:['Fabricante','Codigo', 'Titulo','Descripcion'],
    colModel :[ 
      {name:'fabricante', index:'fabricante', width:137}, 
      {name:'codigo', index:'codigo', width:100}, 
      {name:'titulo', index:'titulo', width:250}, 
      {name:'descripcion', index:'descripcion', width:400}
    ],
    pager: '#pager',
    rowNum:1000,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    height: "256px",
    caption: 'Cursos'
  }); 
}); 
</script>

the new form

<fieldset style="border: none;">
   <input type="text" class="search-fields" id="fab"/>
   <input class="" type="submit" name="Submit2" value="Search" />
</fieldset>  

Answer 1

If I understand you correct you want refresh grid using the input field #fab on the click on the “Submit2” button.

Because you don’t need to send any parameters directly to an URL you can first change the code of the form to

Search

As a handler for the click event on the “Search” button you can do

$('#search').click(function () {
    $("#list").trigger('reloadGrid', [{page: 1, current: true}]);
});

At the end you need add to jqGrid additional postData parameter like the following

postData: {
    mySearch: function () { return $('#fab').val(); }
}

(see here for more information). In the case the parameter mySearch will be send to the URL 'data.php?q=1'. Because you used mtype: 'GET' the parameter will be appended to the URL like 'data.php?q=1&mySearch=test' for example