Question

I am using jqwidgets. There is a nice grid widget in there what i want to use. To use the grid i use the demo code:

   $(document).ready(function () {
        var theme = getTheme();
        var url = "../sampledata/data.php";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'firstname' },
                { name: 'lastname' },
                { name: 'productname'},
                { name: 'quantity', type: 'int' },
                { name: 'price', type: 'float' },
                { name: 'total', type: 'float' }
            ],
            id: 'id',
            url: url,
            root: 'data'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: dataAdapter,
            theme: theme,
            columnsresize: true,
            columns: [
              { text: 'First Name', dataField: 'firstname', width: 100 },
              { text: 'Last Name', dataField: 'lastname', width: 100 },
              { text: 'Product', dataField: 'productname', width: 180 },
              { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
              { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
              { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
            ]
        });
    });

That works perfect. But now i want to load the grid when i press on a button in a form.

<form action="" method="post">
<select name="city">
<option value="amsterdam">amsterdam</option>
<option value="rotterdam">rotterdam</option>
<option value="denhaag">den haag</option>
<option value="eindhoven">eindhoven</option>
</select>
<input name="Submit" type="submit" value="Find family" /></form>

So when i choose amsterdam it should load data.php?city=amsterdam into the grid.

I can do this using an iframe but is there a way to do it in one page where i only reload the grid?

Answer 1

JS:

$(document).ready(function () {
  $("#submit").click(function(){
    var theme = getTheme();
    var url = "../sampledata/data.php?city="+$("city").val();
    // prepare the data
    .............
  })      

});

HTML:

<select name="city" id="city">
  .....
</select>
<input name="Submit" type="submit" value="Find family" id="submit" /></form>