that worked great

I have not found an example to use the events, DATAIN, DataEvent on http://trirand.com/blog/jqgrid.....qgrid.html

It's a shame because I think a lot of people are losing hope to make things further with this plugin, especially since French is look for good keywords to find what I want to do is not easy.

The I simply trying to recover the value of a field of a line to update a drop down list linked together:

Country and state

When editing a line I want to spent the id of the country to see the list of states in the country concerned in the other list:

Thank you for your help always very valuable.

You can see that <select> element has id="dependence". So you can use

var sel = $("select#dependence");

or just

var sel = $("#dependence");

to get the <select> element. The element with id="tr_dependence" is <tr> and not <select> element. So from the element the "way" to <select> will be longer:

var sel = $("tr#tr_dependence > td.DataTD > select.FormElement")

Another problem which you can has: you have chosen the wrong place to make modification of the select element. Verify that sel.length === 1.

Best regards
Oleg 

thanks to show me the path 😉

OlegK said:

Hello!

You can use Developer Tools of Internet Explorer or Google Chrome or Firebug in Firefox to examine the current modified HTML code any time. If you use Toolbar Filtering, then you will see that ids of all items from the toolbar have prefix "gs_". Probably you try use it in form editing of inline editing.

By the way Tenerife is my favorite island from the Canary Islands (I visited almost all from there).

Best wishes from Germany
Oleg 

Yes is a great place 😉

Ok, firebug shows me that:
<tr rowpos="5" class="FormData" id="tr_dependence">

<td class="CaptionTD ui-widget-content">Dependence</td>

<td style="white-space: pre;" class="DataTD ui-widget-content">&nbsp;

<select role="select" class="FormElement" id="dependence" name="dependence" size="1"><option value="0" role="option"></option></select>

</td>

</tr>

How I can to access to the select element? I can't access with this:
$("select#tr_dependence")

I want to fill this select with data. I put another post in the forum

Regards, Adrian

You can use Developer Tools of Internet Explorer or Google Chrome or Firebug in Firefox to examine the current modified HTML code any time. If you use Toolbar Filtering, then you will see that ids of all items from the toolbar have prefix "gs_". Probably you try use it in form editing of inline editing.

By the way Tenerife is my favorite island from the Canary Islands (I visited almost all from there).

Best wishes from Germany
Oleg 

OlegK said:

Hello Candra,

It seems to me that your code have at least the error inside of $.get success handler. You should use $("select#gs_City").html(res) instead of $("#City").html(res).

Best regards
Oleg 

It doesn't work to me.

I' dont know why "select#gs_City" and not "select#City" ? where can I find information of this?

I have tried but nothing happend. I think the problem is on event change function.

dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?Country='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?Country='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_City").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents

When I choose USA of country select dropdown, the city select dropdown should consist of New York and Washington.

From here, I cann`t use multiple search. When I back to choose New York of city select dropdown, I want the country select dropdown should consist of country which New york city lies and keep selected on New York. but it always refreshed to 'all' selected.

Best Regards,

Candra

Parameters of 'navGrid' function contains options for Add, Edit, Del,View dialogs. Add and Edit options support recreateForm:true setting. So the call will be

jQuery("#list").jqGrid('navGrid','#pager',
  {edit:true, edittext:'Edit',add:true,addtext:'Add',del:true, deltext:'Delete',search:false, refresh:false, view:true, viewtext:'View'}, 
  {recreateForm:true,jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true, checkOnUpdate:true, savekey: [true,13], navkeys: [true,38,40], checkOnSubmit : true, closeAfterEdit: true},// edit options 
  {recreateForm:true,jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true,                     savekey: [true,13], navkeys: [true,38,40]                      ,  closeAfterAdd: true}, // add options 
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true}, // del options 
  {multipleSearch:true}, // enable the advanced searching 
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, navkeys: [true,38,40], closeOnEscape:true}); // view options 

Best regards
Oleg 

Excuse me, where should I put the recreateForm:true? I am sorry I don`t understand

Best Regards,

Candra

First of all please try to use recreateForm:true option which you not use currently. Look at another problem about caching of dataUrl described here and write me whether it help or not.

Best regards
Oleg 

I am sorry for bothering you. I really appreciate your help so far. Please apologize my fault and please check my code:

jQuery(document).ready(function(){
  var mygrid =
  jQuery("#list").jqGrid({
        url:'table.php?q=1',
        datatype: 'json',
        mtype: "POST",
        colNames:['Country','City'],
        colModel :[
          {name:'Country', index:'Country', width:100, editable:true, editoptions:{size:20, maxlength:'40'}, editrules:{required:true}, 

          formoptions:{elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:

          {dataUrl:'filterselect/filtercountry.php',
          dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?Country='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?Country='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_City").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents
          }},

         {name:'City', index:'City', width:70, editable:true, editoptions:{size:15}, editrules:{required:true}, formoptions:

         {elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:{dataUrl:'filterselect/filtercity.php?myid=initialid',

          dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?City='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?City='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_Country").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents
      }},
      {name:'Postal Code'      , index:'PostalCode'      , width:90,  align:'right'                , editable:true, editoptions:{size:15,

      maxlength:'30'}, editrules:{required:true}, formoptions:{elmprefix:"(*)"}}
        ],
        multiselect: true,
        altRows: true,
        pager: '#pager',
        rowNum:50,
        rownumbers: true,
        gridview: true,
        height: 260,
        shrinkToFit: false,
        width: 1105,
        rowList:[50,100,200],
        sortname: 'Country', 
        sortorder: 'asc',
        viewrecords: true,
        caption: 'POSTAL CODE',
        editurl:"edit/editpostalcode.php"
  }
  });
   
  jQuery("#list").jqGrid('navGrid','#pager',{edit:true, edittext:'Edit',add:true,addtext:'Add',del:true, deltext:'Delete',search:false, refresh:false, view:true, viewtext:'View'},
  {jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true, checkOnUpdate:true, savekey: [true,13], navkeys: [true,38,40], checkOnSubmit : true, closeAfterEdit: true},// edit options
  {jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true,                     savekey: [true,13], navkeys: [true,38,40]                      ,  closeAfterAdd: true}, // add options
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true}, // del options
  {multipleSearch:true}, // enable the advanced searching
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, navkeys: [true,38,40], closeOnEscape:true}); // view options
   
  jQuery("#list").jqGrid('navButtonAdd',"#pager",{caption:"Reset",title:"Reset Filter",buttonicon :'ui-icon-refresh',  
    onClickButton:function(){
            mygrid[0].clearToolbar()
            // remove current selection in the 'Jenis Alat' column
                var sel = $('select#gs_Country option:selected', mygrid[0].grid.hDiv)
                        .removeAttr('selected').parent();
                // select 'All' having option with the empty ('') value
                // and trigger 'change' to refresh all
                $("option[value='']", sel[0]).attr('selected', 'selected').trigger('change');
                 
                // remove current selection in the 'City' column
                var sel = $('select#gs_City option:selected', mygrid[0].grid.hDiv)
                        .removeAttr('selected').parent();
                // select 'All' having option with the empty ('') value
                // and trigger 'change' to refresh all
                $("option[value='']", sel[0]).attr('selected', 'selected').trigger('change');    
    } });
    
  jQuery("#list").jqGrid('filterToolbar',{searchOnEnter : false});   
});

filtercity.php

<?php
include '../config/connections.php';
$Country     = $_GET['Country']; //some variable
 
echo "<select>
<option value=''>All</option>";
if ($Country <> '')
{$query="SELECT * FROM table WHERE Country = '$Country' GROUP BY City";}
else
{$query="SELECT * FROM table GROUP BY City";}
$result = $db->query($query);
$numresult=$result->num_rows;
for ($i=0; $i<$numresult; $i++)
    {
    $row = $result->fetch_assoc();
       echo "<option value='$row[City]'>$row[City]</option>";
    }
echo "</select>";
?>

filtercountry.php

<?php
include '../config/connections.php';
$City     = $_GET['City']; //some variable
 
echo "<select>
<option value=''>All</option>";
if ($Kota <> '')
{$query="SELECT * FROM table WHERE City = '$City' GROUP BY City";}
else
{$query="SELECT * FROM table GROUP BY City";}
$result = $db->query($query);
$numresult=$result->num_rows;
for ($i=0; $i<$numresult; $i++)
    {
    $row = $result->fetch_assoc();
       echo "<option value='$row[City]'>$row[City]</option>";
    }
echo "</select>";
?>

Thank you for your help

Best Regards,

Candra

One more question: do you use recreateForm:true option? If you yet, try it. Probably it is just you problem. By the way I set the feature request to change the default value of recreateForm from false to true.

Best regards
Oleg

Sorry, but I am just a user of jqGrid. I started with JavaScript development and with jqGrid about 1,5 year ago for one project. Because I studied JavaScript and jqGrid quickly and in the next project (like in all before) I don't need it, I started to answer to the question of other people mostly to keep and to expand my current knowledge in JavaScript and jqGrid. Slowly it becomes my hobby to help other people to use jqGrid. I answer on different jqGrid question in the stackoverflow.com and in the forum. But you should understand, that I have a lot of other things to do and have to do my main job which brings money for me and my family.

Your question is interesting for me. I think that other people could have the same requirements. So I tried to help you. But the problems which you describes in your last post are more specific to your existing code. You posted only pieces of the code. To be able to help you I have to write a small web service (I can not use your code fragments in PHP because PHP is not a language which I use for development) and of course the client code. I posted you many code fragments for the client and I don't know what from there you use currently, so I would have to write the client code based on the information which I have. All will take relatively much time which I don't have currently. Later I could go back to the problem, but currently I have to implement one project till the end of January, so I am not sure that I could help you before.

If you will make my work easy and post most code which can be used to reproduce your problem, probably I could find time before, but I can not promise you that.

Best  regards
Oleg 

could you help me, please? Don`t leave me here

Candra

Happy New Year too guys.

Yes, that works. awesome but I found a new problem here.

If I choose USA of country select dropdown, the city select dropdown should consist of New York and Washington.

From here, I cann`t use multiple search. If I choose New York of city select dropdown, the contry select dropdown will change to 'All'.

How to keep the value of country select dropdown just like the original multiple search from jqgrid demo?

Thank you OlegK, you have spent a lot of your time for me.

Best Regards,

Candra

Happy New Year!

You say that if you select 'All' in the dropdown list you receive the results which you need. So I suggest you to do this with respect of jQuery inside of onClickButton and before clearToolbar. The code could be for example the following:

I hope this will work in your environment.

Best regards
Oleg

I have not succeeded yet to do your guide.

I see that if I change country of select dropdown to 'All', the city of select dropdown will return to original value ( get all cities).

I have an idea to insert your change event function into reset jqgrid section:

jQuery("#list").jqGrid('navButtonAdd',"#pager",{caption:"Reset",title:"Reset Filter",buttonicon :'ui-icon-refresh',
    onClickButton:function(){
        //do something to change the country of select dropdown to 'All', so I do not need to clear search criteria(filter)

        // set getSelectFilterUrl='filterselect/filterselectcity.php'; // get all cities

        mygrid[0].clearToolbar()
    } });

Could you help me do this, please?

Best Regards,

Candra

Thank you for explanation. Now it's clear what you mean. Probably some seaching parameters are need be reseted before staring grid reload. I recommend you to look at this old answer which describe how search criteria (filter) can be cleared. You can do this for example inside your custom beforeRefresh event handler. I hope it will work.

I have currently no working example which dynymicylly populate select dropdown list and work per ajax. Another example which implement the same locally you can find here. I hope it could help you a litle.

Best regards
Oleg

Sorry for misunderstanding.

I mean the reset toolbar search is the sixth button of six jqgrid navigation buttons on pager which looks like recycled icon. They are:

1) Add New Row,

2) Edit Selected Row,

3) View Selected Row,

4) Delete Selected Row,

5) Find Records, and

6) Reload Grid

Best Regards,

Candra