Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
This topic is locked No permission to create posts
sp_Feed Topic RSS sp_TopicIcon
Dynamically Populate Select Dropdown
18/12/2009
10:29
Avatar
Nikk
Guest
Guests

In advance, I would like to thank you for your awesome plug-in.  I've been greatly enjoying using it.  Also, I'm sure that this question has been asked and answered before here, but my search-fu is weak at the moment.

The basics of the problem is that I have two selects.  The first select box is the US states, the second is the counties within the state.  What I would like to do is when a different state is selected from the dropdown, the appropriate list of counties would then be available in the county dropdown. 

I have a dataEvent for 'change' bound and am retrieving the data, but am having issues getting the retrieved data to translate into a freshly populated select box for counties.

Please advise and thank you!

Nikk

18/12/2009
21:52
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello Nikk,

Yes, this is discussed many times and it seems that I should do a example for this.

I have edit this post finding a better solution – I will post it tomorrow.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/12/2009
05:45
Avatar
Nikk
Guest
Guests

Tony,

Thank you very much.   Your assistance is greatly appreciated!

I look forward to seeing the new post.

Nikk

19/12/2009
17:04
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

As promised. This example works ok on my demo

 colModel:[

...

{name:'select_one',

editable: true,

edittype:"select",

editoptions: {

dataUrl:'test_one.php',

dataEvents :[

{ type: 'change', fn: function(e) {

var thisval = $(e.target).val();

$.get('test_two.php?myid='+thisval, function(data)

{ var res = $(data).html();

$("#select_two").html(res);

}); // end get

}//end func

} // end type

] // dataevents

} // edit option

},
{name:'select_two',editable: true,edittype:”select”, editoptions:{dataUrl:'test_two.php?myid=initialid'}}       


],

You should perform of course additional checking, but you got the point.

This is for form editing. For inline edit you should use other id when you load the data -

i.e – $(rowid_select_two).html(res);

where rowid is the id of the selected row and can be obtained with  getGridParam.

Enjoy

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/12/2009
20:45
Avatar
nikk
New Member
Members
Forum Posts: 2
Member Since:
19/12/2009
sp_UserOfflineSmall Offline

Thank you very much Tony, you're a life saver!

21/01/2010
00:41
Avatar
shah
Member
Members
Forum Posts: 26
Member Since:
30/12/2009
sp_UserOfflineSmall Offline

Hello Tony,

I tried to work with the example you gave above. withl slight variatiion and does not work right

Here is the js

http://pastie.org/787340

The js

the target select list has something like

0:SELECT ZERO;1:SELECT ONE

$(”#targetsel”).html(targetSelect(thisval))this does not work becasue it needs html.

how do i populate key:value pairs on the dorpdown.

- Thanks Shah

22/01/2010
14:42
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

On your

targetSelect construct a <select>...</select. element using the information from the response.
Best Regards
Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

22/01/2010
17:35
Avatar
shah
Member
Members
Forum Posts: 26
Member Since:
30/12/2009
sp_UserOfflineSmall Offline

thanks that worked!

04/03/2010
17:35
Avatar
jmr239
Member
Members
Forum Posts: 7
Member Since:
02/03/2010
sp_UserOfflineSmall Offline

Tony,

Thanks for your support, but I can't seem to get this to work.  Will a dataEvent ever fire when the grid is populated with local data?  I am using inline editting and managing all the data loading and storing ajax calls myself, thus using local data in the grid.  I'm trying to implement the above in a grid as a subgrid.  Here is the part of the subgrid code i'm using to try to do this:

colModel: [
                        {name:'id',index:'id', width:55},
                        {name:"condvar",index:"condvar",width:150, editable: true, edittype:"select", editoptions:{value:"bkflag:bkflag;bkchapter:bkchapter;proptype:proptype", dataEvents :[{type:'change', fn:function(e){
                                                                                                                    alert("yo");
                                                                                                                    var thisval = $(e.target).val();
                                                                                                                    alert(thisval);
                                                                                                                    lookupField(thisval, subgrid_table_id, row_id);
                                                                                                                    }}]}
                        },

The issue is that the dataEvent never fires, thus the alerts in there to test that.  Is there any way to simply add the onChange property to the select box? This really is the last hurdle I need to get past to finish this project.. Please help

Thanks

Jeff

subGridRowExpanded: function(subgrid_id, row_id) {  
                var subgrid_table_id;
                subgrid_table_id = subgrid_id+"_t";
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    datatype: "local",
                    colNames: ['ID', 'Condition Variable','Condition','Value for Condition','Type of Value Used'],
                    colModel: [
                        {name:'id',index:'id', width:55},
                        {name:"condvar",index:"condvar",width:150, editable: true, edittype:"select", editoptions:{value:"bkflag:bkflag;bkchapter:bkchapter;proptype:proptype", dataEvents :[{type:'change', fn:function(e){
                                                                                                                    alert("yo");
                                                                                                                    var thisval = $(e.target).val();
                                                                                                                    alert(thisval);
                                                                                                                    lookupField(thisval, subgrid_table_id, row_id);
                                                                                                                    }}]}
                        },
                        {name:"condition",index:"condition",width:150, editable: true, edittype:"select",editoptions:{value:"equal:equal;notequal:notequal;greater:greater;greaterequal:greaterequal;less:less;lessequal:lessequal"}},
                        {name:"condval",index:"condval",width:150, editable: true},//, edittype:"select", editoptions:{value:"true:true;false:false"}},
                        {name:"condtypeval",index:"condtypeval",width:150,editable:true, edittype:"select", editoptions:{value:"double:double;string:string;var:var"}}
                        ],
                    onSelectRow: function(id){
                        if(id && (id!=lastsel2 || row_id!=lastsel2row)){
                            if(lastsel2!=0 && lastsel2row!=0){
                                var tempgrid = "#timelinetable_"+lastsel2row+"_t";
                                jQuery(tempgrid).saveRow(lastsel2, false, 'clientArray');
                                jQuery(tempgrid).restoreRow(lastsel2);
                                timeconditions[lastsel2row][lastsel2]=jQuery(tempgrid).getRowData(lastsel2);
                            }
                        
                            jQuery("#"+subgrid_table_id).editRow(id, true);
                            lastsel2=id;
                            lastsel2row=row_id;
                        }
                        
                    },
                    loadui:"disable",
                    height: 100,
                    imgpath: 'jqgrid/themes/basic/images',
                    caption: "Conditions for Override "+timeoverrides[row_id].cutid+" "
                });
                
                insertTimeConditionData(row_id, subgrid_table_id);
            },
04/03/2010
20:42
Avatar
kelso
Member
Members
Forum Posts: 11
Member Since:
02/03/2010
sp_UserOfflineSmall Offline

ive been doing it like this with php, works good..

{name:'freqname', index:'freqname', width : 35, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from freqband"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}},

06/05/2010
18:42
Avatar
ram2010
Member
Members
Forum Posts: 43
Member Since:
13/01/2010
sp_UserOfflineSmall Offline

Hi Tony

I have followed your example as per your post on 19/12/2009 (17:04hrs).

I have put in the code as you suggested for inline editing & it works ok. However, when adding a new record & I select the first dropdown, the 2nd dropdown doesnt load. It must be because I am specifying the wrong element to be updated(because my column definition is specific for inline editing as as use the rowId)

What can I do so that in my col definition that it will work for both Form Editing(when adding a record) & inline Editing(when editing a record) ?

Also one other thing, when I put in this code as you suggested

$(rowid_select_two).html(res);

my 2nd column did not update(I got no error in firebug).

So what i did to make this work, I did this: 

document.getElementById(rowId+'_specification.size').innerHTML = res;

any thoughts on this other question?

thanks Tony!

25/08/2010
01:49
Avatar
rpansini
New Member
Members
Forum Posts: 1
Member Since:
25/08/2010
sp_UserOfflineSmall Offline

My code looks identical to yours and it still isn't picking up the events.  Any help would be greatly appreciated. 

I'm  building my colModel like the following:

var colModels = [];

var colModel = { name: 'Product', Index: 'Product', editable: true, edittype: 'select', editoptions: { dataEvents: [
                { type: 'change', fn: function (e) { alert('change!'); } },
                { type: 'click', fn: function (e) { alert('click!'); } }
                ]
                }, editrules: { required: true}
                };

colModels.push(colModel);

Then I assign the colModel and it looks fine, but the events aren't firing.  Any insight?  I do load the drop down

after the grid is generated.

13/09/2010
21:18
Avatar
agualis
New Member
Members
Forum Posts: 1
Member Since:
13/09/2010
sp_UserOfflineSmall Offline

Hi everybody,

as all of you guys, I need a dropdown2 (subcategories) populated when another dropdown1 (categories) is changed.

I have an inline grid.

If I use the approaches explained in this forum (dataUrl and Ajax calls) everything works fine but what I want now is to

avoid all those Ajax requests to increase my site performance.

My idea is to load every option in the first load of the page so I have created a JQuery function (populateFromLocalValues)

to change the dropdown2 values working with them locally.

When I change a value in dropdown1 the values are correctly populated in dropdown2 throughtthe implementation of a

change function in the "change dataEvent" of the dropdown1.

My problem comes when I have to initialize the values of dropdown2 when I select a row. I'm using the following code:

{name:'subcategory_id',index:'subcategory_id', width:110, align:"right", sortable:false, editable: true, edittype:"select",
   editoptions:{
       dataInit :  
            function (elem) {

                 populateFromLocalValues(elem);
            },
       dataUrl: 'fake_url_that_i_dont_need'
    }
}  

The code before is working because I can get from elem and my locally stored values everything I need to init the

dropdown2 values.

I cannot use "value: buildSelect()" because I don't have the context "elem" to invoque populateFromLocalValues there so

I use dataInit to load my dropdown. But my problem is that I have to define a fake "dataUrl" option because if not ,

"dataInit" is not triggered. It would be very easy to change your code to ignore the fake dataUrl and avoid one unnecesary

request (my data is already stored locally). I hope you understand my question.

Thanks in advance.

15/09/2010
20:16
Avatar
ram2010
Member
Members
Forum Posts: 43
Member Since:
13/01/2010
sp_UserOfflineSmall Offline

When adding its no problem as its a new record you are creating.

The problem with select boxes that link to each other is in inline editing.

Using inline edit the rows all contain their correct data before you select a row. The when selecting a row all the select urls are fired.

What is the best approach? I currently have a situation where I have 5 columns each with a select list. The first select, causes the 2nd one to fire. As the second one fires, it should cause the 3rd. and so on. They selects are all related to each other and the selected values are passed from one select to another to retrieve appropriate data.

Any help on this issue is really appreciated as I am stuck.

Thanks

18/12/2010
02:57
Avatar
Candrairawan78
Indonesia
Member
Members
Forum Posts: 39
Member Since:
30/01/2010
sp_UserOfflineSmall Offline

Dear all,

I tried to implement dynamic select dropdown on toolbar searching, but I cann`t populate subcategory dropdown.

Can you show me where is something wrong?

here is my code:

{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/filterselectcountry.php',
          dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                // do what yoou need
                $.get('filterselect/filterselectcity.php?country='+thisval, function(data)
                { var res = $(data).html();
                $("#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/filterselectcity.php?City=initialid'}}

And here is  filterselectcity.php

<?php
include '../config/connections.php';
$City     = $_GET['City']; //some variable

echo "<select>
<option value=''>All</option>";
if ($City <> '')
{$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 assistance.

Best Regards,

Candra

19/12/2010
01:18
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

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 

19/12/2010
07:07
Avatar
Candrairawan78
Indonesia
Member
Members
Forum Posts: 39
Member Since:
30/01/2010
sp_UserOfflineSmall Offline

Dear OlegK,

It works. Thank you

Best regards

Candra

19/12/2010
10:40
Avatar
Candrairawan78
Indonesia
Member
Members
Forum Posts: 39
Member Since:
30/01/2010
sp_UserOfflineSmall Offline

Dear OlegK,

I found a new problem: when I implement dynamic category select drop down, the sub category works well, but when I push refresh/reset/clear filter, the sub category select cann`t return the original select. What should I do?

Could you help me please?

Best regards,

Candra

20/12/2010
00:14
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hello Candra,

I am not sure, but do you tried to reset the filter inside of dataInit?

Best regards
Oleg 

20/12/2010
14:58
Avatar
Candrairawan78
Indonesia
Member
Members
Forum Posts: 39
Member Since:
30/01/2010
sp_UserOfflineSmall Offline

Dear OlegK,

I am sorry I don`t understand what you mean with reset the filter inside of dataInit. I don`t know how to do it, please give me a guideCry

Best Regards,

Candra

This topic is locked No permission to create posts
Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
33 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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information