0

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>
Jean
  • 5,201
  • 11
  • 51
  • 87

1 Answers1

0

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

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Jean: I don't use PHP myself, but I suppose that the code could be like `$mySearch = $_REQUEST['mySearch'];`. You cab download some examples from [the page](http://www.trirand.com/blog/?page_id=6). [The demo files](http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo40.zip) includes some PHP code. – Oleg Feb 06 '12 at 21:00
  • perfect that's what I thought. but I have problem with the postData. Thanks anyway for your help. I'll try to do other things. – Jean Feb 06 '12 at 22:56
  • I try this, but I doesn't work even if I have the following url, the grid is empty, for example I just want all the product that contain the word microsoft so I sent this url: url:'data.php?Microsoft', do you have any idea? – Jean Feb 10 '12 at 16:37
  • @Jean: How you want to get the word 'Microsoft' from the URL: `url: 'data.php?Microsoft'`? Probably you should use `url: 'data.php?mySearch=Microsoft'`? The usage of `postData: {mySearch: 'Microsoft'}` will do the same. – Oleg Feb 10 '12 at 16:48
  • I think the problem is that I don't know where to put the postData :S – Jean Feb 10 '12 at 17:17
  • @Jean: `postData` is just an [option](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options) of jqGrid. So you can just mix it with other jqGrid options: `$("#list").jqGrid({url: 'data.php', postData: {q:1, mySearch: 'Microsoft'}, datatype: 'xml', mtype: 'GET',...});` – Oleg Feb 10 '12 at 17:22
  • I so sorry Oleg, but I desperate, can I publish the code, so you can check ir. Please??? – Jean Feb 10 '12 at 17:41
  • @Jean: Yes, of course! If you append your new code to your question, please let me this known in the comment. – Oleg Feb 10 '12 at 17:45
  • @Jean: The main part of the code seems be correct. You can even use `url: 'data.php', postData: {q: 1, mySearch: function () { return $('#fab').val(); }}`. The problem I see only because of `type="submit"` of the 'Search' button. You should use `$('#search').submit` instead of `$('#search').click` and `return false` to prevent the `action="CourseSearch.html" method="get"` which will load another page instead of refreshing the body of the grid on the current page. I wrote about the problem in the first line of my answer. I use typically `type='button'`, `click` and `fieldset` instead of `form`. – Oleg Feb 10 '12 at 17:55
  • @Jean: in you new code you use `$('#search').click`. Where the HTML code with the ` – Oleg Feb 10 '12 at 18:30