Forum


17:44

10/08/2009

Hello Candra,
It seems to me I understand now what you need. Try to change the code of the fn function to
var thisval = $(e.target).val();
var getSelectFilterUrl='filterselect/filterselectcity.php'; // get all cities
if (thisval !=='') {
// not "All" is choosed
getSelectFilterUrl += '?country='+encodeURIComponent(thisval);
}
$.get(getSelectFilterUrl, function(data) {
var res = $(data).html();
$("select#gs_City").html(res);
}); // end get
} //end func
You need also verify that 'filterselect/filterselectcity.php' without any 'country' parameter return full unfiltered list of all cities.
Is it close to what you need?
Best regards
Oleg
18:39

30/01/2010

Dear OlegK,
Thank you for your fast responce but that can not solve the problem. It only works when we change the value of select dropdown.
If I push the reset toolbar search, only the grid can reload but not the select value. The select value can be reloaded by refreshing the web page.
let say our country select consist of: USA, Australia and our city select consist of: NewYork, Washington, Brisbane, Perth.
If I choose Australia, the sub category select will consist of Brisbane and Perth only.
And then I want to clear my toolbar search to return original value of country select and city select.
I think it should use ajax to reset select toolbar value. How to make it works?
Best Regards,
Candra
10:19

30/01/2010

Dear OlegK,
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
14:50

10/08/2009

Hello 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
17:13

30/01/2010

Dear OlegK,
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
13:21

10/08/2009

Hello 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:
mygrid.jqGrid('navButtonAdd',
'#pager',
{
caption:"Reset", title:"Reset Filter", buttonicon:'ui-icon-refresh',
onClickButton: function() {
// remove current selection in the 'Country' 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');
mygrid[0].clearToolbar();
}
}
);
I hope this will work in your environment.
Best regards
Oleg
15:49

30/01/2010

Dear OlegK,
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
15:41

30/01/2010

19:14

10/08/2009

Hello Candra,
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
00:41

10/08/2009

Hello 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
18:53

30/01/2010

Dear OlegK,
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
19:06

10/08/2009

Hello 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
02:42

30/01/2010

03:34

10/08/2009

Hello 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
02:53

30/01/2010

Dear OlegK,
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
21:27

23/09/2010

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?
22:50

10/08/2009

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
23:29

23/09/2010

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">
<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
Most Users Ever Online: 715
Currently Online:
53 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66