title: Load data in grid using jquery
body: <p>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:</p>
  
  <pre><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' }
              ]
          });
      });
  </code></pre>
  
  <p>That works perfect. But now i want to load the grid when i press on a button in a form.</p>
  
  <pre><code>&lt;form action="" method="post"&gt;
  &lt;select name="city"&gt;
  &lt;option value="amsterdam"&gt;amsterdam&lt;/option&gt;
  &lt;option value="rotterdam"&gt;rotterdam&lt;/option&gt;
  &lt;option value="denhaag"&gt;den haag&lt;/option&gt;
  &lt;option value="eindhoven"&gt;eindhoven&lt;/option&gt;
  &lt;/select&gt;
  &lt;input name="Submit" type="submit" value="Find family" /&gt;&lt;/form&gt;
  </code></pre>
  
  <p>So when i choose amsterdam it should load data.php?city=amsterdam into the grid.</p>
  
  <p>I can do this using an iframe but is there a way to do it in one page where i only reload the grid?</p>