Guriddo » Topic: filter dropdown from another dropdown

filter dropdown from another dropdown

Guriddo
filter dropdown from another dropdown

This topic has 2 replies, 2 voices, and was last updated 11 years, 7 months ago by tony.

Creator

Topic

September 9, 2014 at 12:13 am #81796

Participant

I am using the search toolbar and I have all of the features working except I cannot figure out how to pass the values from one dropdown box to the server page to narrow the returned items in the dropdown list.Â When something has been selected for field I want it to narrow down the list of well names in the other dropdown box to only those available in that field.

I was hoping the post option would be active and pass the field automatically, but of course it could not be that simple. I’m guessing this needs tied to an event but have not been be able to find any examples.

Â  Â Â Â Â <br />
// <![CDATA[<br />
<br />
Â Â  Â Â Â  Â jQuery(document).ready(function()<br />
Â Â  Â Â Â  Â { jQuery("#grid").jqGrid({<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â url: "getinfo.php",<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â datatype: "json",<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â mtype: 'POST',<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â autowidth: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â height: 330,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â colNames: ["Name", "Num", "Field", "Pad", "API", "Legal", "County, State",<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â "Lease", "Unit CA PA", "Status", "Updated", "Wildlife Stips", "Notes"],<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â colModel: [<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â { name: "well_name", width: 48,sortable: true, search:true, stype:'select', searchoptions: {dataUrl:'selectwell.php'}},<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â { name: "well_num", width: 18,sortable: true, search:true, stype:'text'},<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â { name: "field", width: 48,sortable: true, search:true, stype:'select', stype: 'select', searchoptions: {dataUrl:'selectfield.php'}},<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â { name: "pad", width: 36,sortable: true, stype:'text'},<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â Â  ...<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â ],<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â rowNum:10,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â rowList:[10,25,50,10000],<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â pager : '#pager',<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â sortname: 'field',<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â viewrecords: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â rownumbers: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â gridview: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â sortorder: "asc",<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â caption:"Master Well List Maintenance"<br />
Â Â  Â Â Â  Â Â Â  Â  });<br />
Â Â  Â Â Â  Â Â Â  Â jQuery("#grid").jqGrid('navGrid','#pager',<br />
Â Â  Â Â Â  Â Â Â  Â {<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â view: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â del: false,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â add: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â edit: true,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â search: false,<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â refresh: true<br />
Â Â  Â Â Â  Â Â Â  Â },<br />
Â Â  Â Â Â  Â Â Â  Â { /*prmEdit*/ },<br />
Â Â  Â Â Â  Â Â Â  Â { /*prmAdd*/ },<br />
Â Â  Â Â Â  Â Â Â  Â { /*prmDel*/ } ,<br />
Â Â  Â Â Â  Â Â Â  Â {<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â /*prmSearch*/<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â multipleSearch:true<br />
Â Â  Â Â Â  Â Â Â  Â },<br />
Â Â  Â Â Â  Â Â Â  Â { /*prmView*/ }<br />
Â Â  Â Â Â  Â Â Â  Â );<br />
Â Â  Â Â Â  Â Â Â  Â $('#grid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true });<br />
Â Â  Â Â Â  Â Â Â  Â $('#grid').jqGrid('navButtonAdd', '#pager', {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  caption: "",<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  title: "Toggle Search Toolbar",<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  buttonicon: 'ui-icon-search',<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  onClickButton: function () {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  this.toggleToolbar();<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  if ($.isFunction(this.p._complete)) {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible'))<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â {<br />
Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â Â Â  Â <br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $('.ui-search-toolbar', this.grid.fhDiv).show();<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  } else {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $('.ui-search-toolbar', this.grid.fhDiv).hide();<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  this.p._complete.call(this);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  fixPositionsOfFrozenDivs.call(this);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â  });<br />
Â Â  Â Â Â  Â Â Â  Â $('.ui-search-toolbar').hide();<br />
Â Â  Â Â Â  Â });<br />
Â Â Â Â Â Â Â <br />
// ]]><br />

Â Â Â Â Â

// <![CDATA[

Â Â Â Â Â Â jQuery(document).ready(function()

Â Â Â Â Â Â { jQuery("#grid").jqGrid({

Â Â Â Â Â Â Â Â Â Â Â Â url: "getinfo.php",

Â Â Â Â Â Â Â Â Â Â Â Â datatype: "json",

Â Â Â Â Â Â Â Â Â Â Â Â mtype: 'POST',

Â Â Â Â Â Â Â Â Â Â Â Â autowidth: true,

Â Â Â Â Â Â Â Â Â Â Â Â height: 330,

Â Â Â Â Â Â Â Â Â Â Â Â colNames: ["Name", "Num", "Field", "Pad", "API", "Legal", "County, State",

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â "Lease", "Unit CA PA", "Status", "Updated", "Wildlife Stips", "Notes"],

Â Â Â Â Â Â Â Â Â Â Â Â colModel: [

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â { name: "well_name", width: 48,sortable: true, search:true, stype:'select', searchoptions: {dataUrl:'selectwell.php'}},

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â { name: "well_num", width: 18,sortable: true, search:true, stype:'text'},

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â { name: "field", width: 48,sortable: true, search:true, stype:'select', stype: 'select', searchoptions: {dataUrl:'selectfield.php'}},

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â { name: "pad", width: 36,sortable: true, stype:'text'},

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â ...

Â Â Â Â Â Â Â Â Â Â Â Â ],

Â Â Â Â Â Â Â Â Â Â Â Â rowNum:10,

Â Â Â Â Â Â Â Â Â Â Â Â rowList:[10,25,50,10000],

Â Â Â Â Â Â Â Â Â Â Â Â pager : '#pager',

Â Â Â Â Â Â Â Â Â Â Â Â sortname: 'field',

Â Â Â Â Â Â Â Â Â Â Â Â viewrecords: true,

Â Â Â Â Â Â Â Â Â Â Â Â rownumbers: true,

Â Â Â Â Â Â Â Â Â Â Â Â gridview: true,

Â Â Â Â Â Â Â Â Â Â Â Â sortorder: "asc",

Â Â Â Â Â Â Â Â Â Â Â Â caption:"Master Well List Maintenance"

Â Â Â Â Â Â Â Â Â });

Â Â Â Â Â Â Â Â Â jQuery("#grid").jqGrid('navGrid','#pager',

Â Â Â Â Â Â Â Â Â {

Â Â Â Â Â Â Â Â Â Â Â Â view: true,

Â Â Â Â Â Â Â Â Â Â Â Â del: false,

Â Â Â Â Â Â Â Â Â Â Â Â add: true,

Â Â Â Â Â Â Â Â Â Â Â Â edit: true,

Â Â Â Â Â Â Â Â Â Â Â Â search: false,

Â Â Â Â Â Â Â Â Â Â Â Â refresh: true

Â Â Â Â Â Â Â Â Â },

Â Â Â Â Â Â Â Â Â { /*prmEdit*/ },

Â Â Â Â Â Â Â Â Â { /*prmAdd*/ },

Â Â Â Â Â Â Â Â Â { /*prmDel*/ } ,

Â Â Â Â Â Â Â Â Â {

Â Â Â Â Â Â Â Â Â Â Â Â /*prmSearch*/

Â Â Â Â Â Â Â Â Â Â Â Â multipleSearch:true

Â Â Â Â Â Â Â Â Â },

Â Â Â Â Â Â Â Â Â { /*prmView*/ }

Â Â Â Â Â Â Â Â Â );

Â Â Â Â Â Â Â Â Â $('#grid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true });

Â Â Â Â Â Â Â Â Â $('#grid').jqGrid('navButtonAdd', '#pager', {

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â caption: "",

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â title: "Toggle Search Toolbar",

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â buttonicon: 'ui-icon-search',

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â onClickButton: function () {

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â this.toggleToolbar();

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â if ($.isFunction(this.p._complete)) {

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible'))

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â {

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â $('.ui-search-toolbar', this.grid.fhDiv).show();

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â } else {

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â $('.ui-search-toolbar', this.grid.fhDiv).hide();

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â }

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â this.p._complete.call(this);

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â fixPositionsOfFrozenDivs.call(this);

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â }

Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â }

Â Â Â Â Â Â Â Â Â Â Â });

Â Â Â Â Â Â Â Â Â $('.ui-search-toolbar').hide();

Â Â Â Â Â Â });

Â Â Â Â Â Â Â

// ]]>

Server code…

<!--?php <br />include("../Includes/aedclass.php");<br />
$nconn = new WorkData();<br />
$conn = new PDO ($nconn->DB_DSN,$nconn->DB_USER,$nconn->DB_PASSWORD);<br />
<br />
$field = $_POST;<br />
<br />
if (strlen($field)>0)<br />
{ $sql = "SELECT field FROM master_well_list WHERE field='$field' GROUP BY field ORDER BY field asc;"; }<br />
else<br />
{ $sql = "SELECT field FROM master_well_list GROUP BY field ORDER BY field asc;"; }<br />
<br />
$stmt = $conn->prepare($sql);<br />
$stmt->execute();<br />
<br />
$response ='';<br />
$response .= '<br />
<br />
';<br />
while($row = $stmt->fetch(PDO::FETCH_NUM)) {<br />
Â Â  Â  $response .= '<br />
'.$row[0].'<br />
';<br />
}<br />
$response .= '';<br />
<br />
echo $response;<br />
<br />
?>

<!--?php include("../Includes/aedclass.php");

$nconn = new WorkData();

$conn = new PDO ($nconn->DB_DSN,$nconn->DB_USER,$nconn->DB_PASSWORD);

$field = $_POST;

if (strlen($field)>0)

{ $sql = "SELECT field FROM master_well_list WHERE field='$field' GROUP BY field ORDER BY field asc;"; }

else

{ $sql = "SELECT field FROM master_well_list GROUP BY field ORDER BY field asc;"; }

$stmt = $conn->prepare($sql);

$stmt->execute();

$response ='';

$response .= '

';

while($row = $stmt->fetch(PDO::FETCH_NUM)) {

Â Â Â $response .= '

'.$row[0].'

';

}

$response .= '';

echo $response;

Creator

Topic

Viewing 2 replies - 1 through 2 (of 2 total)

Author

Replies
September 20, 2014 at 12:03 am #102283

wexwell
Participant

bump – I still have not been able to find a working example if anybody has any suggestions.

October 3, 2014 at 12:50 pm #102301

tony
Keymaster

Hello,

Â

As far as I understand you try to make depened dropdown in search toolbar.

Using dataUrl is way to build the selects only once when the search toolbar is created.

I think you will need to bind a change event to the first dropdown on which when the values is changed to will the second with the needed values.

You can use dataEvents option to do this – see the docs.

To grab the second select element you should know that the id of this element is a combination of gs_ plusÂ the column name.

Â

Kind Regards
Author

Replies