Login Register

Programmatic filteringSelect onchange problems

I'm having some difficulties with an onchange event in a programmatically created filteringSelect...well actually the problem I'm having is that it doesn't seem to work....

Its like the onChange event just gets completely ignored in a filtering select???? From what I can see, the only time the onChange event gets called is when the widget initially gets created, and NOT every time that the users makes a different selection?? You can see that the value of the widget is being changed upon each selection, by clicking on the "test filterValue" link...so what gives here? I must be doing something wrong...does anyone have any thoughts/suggestions?



	filtering select test
	
	
		
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
		
		function test()
		{
			if (dojo.byId("filteringSelectTest").value != undefined)
			{
			alert(select.getValue());
			}
			else
			{
			alert('curses!');
			}	
		}
				
		
		var store;
		var select;
		dojo.addOnLoad(function() {
		
			store = new dojo.data.ItemFileReadStore({url: "http://localhost:8080/dojoTests2/assets/js/dojo10/dijit/tests/_data/states.json"});
				select = new dijit.form.FilteringSelect({
				autoComplete:false,
				store: store,
				searchAttr:"name",
				labelAttr:"label",
				labelType:"html",
				onchange:test()
				}, dojo.byId("filteringSelectTest"));
				
				
				//uncomment the following lines to try this, too, still doesn't work
				//testFilter = dojo.byId("filteringSelectTest");
				//dojo.connect(testFilter, 'onchange', 'test');
		
		});
				
	
	
		@import "assets/js/dojo10/dojo/resources/dojo.css";
		@import "assets/js/dojo10/dijit/themes/tundra/tundra.css";
		


	
	

Try case-sensitive onChange...

as in:

onChange:test

not:

onchange:test()

Sort of having the same problem.

I am getting the same problem, onblur works fine but onchange dosnt.

var wdgt.
comboBox : function (newDivId,putDivId,evtTriger,evtSend,URL,searchAt)
							{
							    dojo.require("dijit.form.ComboBox");
							    dojo.require("dojo.data.ItemFileReadStore");
								var e = document.createElement('INPUT');
									e.setAttribute('id',newDivId);
								document.getElementById(putDivId).appendChild(e);
								var store = newDivId + 'store';
									store = new dojo.data.ItemFileReadStore({url: URL});
								var combo = new dijit.form.ComboBox({
									name:newDivId + 'cmbboxs',
									autoComplete:false,
									store: store,
//									'class':wClass,
									searchAttr:searchAt
								}, dojo.byId(newDivId));
								dojo.connect(dojo.byId(newDivId),evtTriger,evtSend);
							},
}

When I call this
wdgt.comboBox ('email','onpage','onchange','someFunction','http://www.xxx.com','SearchThing');
nothing happens, but if I use onblur it works fine. I think my trigger event is working because I can use onblure. Anyone know a solution?
Thanks,
timgerr

onChange instead of onchange

onChange instead of onchange in the combo/filteringSelect declaration works! Thanks FrankF!!!

The only problem is that since filteringSelect doesn't have an initial value, the onChange doesn't register until the SECOND time the user selects from the drop down?? Anyway around that one?

So as frankF pointed out, it should look like this:

store = new dojo.data.ItemFileReadStore({url: "http://localhost:8080/dojoTests2/assets/js/dojo10/dijit/tests/_data/states.json"});
                                select = new dijit.form.FilteringSelect({
                                autoComplete:false,
                                store: store,
                                searchAttr:"name",
                                labelAttr:"label",
                                labelType:"html",
                                onChange:test
                                }, dojo.byId("filteringSelectTest"));

Any suggestions on how to get that onChange to trigger on the user's FIRST selection are much appreciated!
Nathan

Try labelFunc

Try:

labelFunc:yourfunction

You may want to use it instead of onChange. It fires when the displayed value changes, which seems to be what is needed.

same problem using declarative form

It seems that I got the same problem on Firefox.
When declarative "dijit.form.FilteringSelect" is parsed by dojo, "onChange" and "labelFunc" are both called, and same thing when change is performed by the user.

onChange and labelFunc

labelFunc gets us one step closer....at least the very first time the user selects something from the dropDown, labelFunc fires off the associated function properly....but from my observations the value of the filteringSelect gets set AFTER labelFunc get called, so in the example provided above, that very first user change event returns a value of "", which of course isn't all that helpful...we need to know what the value of that filteringselect is AFTER the user has made that first (and subsequent) selection....

I've updated the example...if you paste this code and hook up your datastore URL to point to your states.json, make a selection, you'll see the problem I (we) are having....

So, as always, any suggestions, thoughts on this are greatly appreciated :)

Nathan

<head>
        <title>filtering select test</title>
        <script type="text/javascript" src="assets/js/dojotoolkit2/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true,usePlainJson:true" ></script>
        <script type="text/javascript">
               
                dojo.require("dijit.form.FilteringSelect");
                dojo.require("dojo.data.ItemFileReadStore");
                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
               
                function test()
                {
                        if (dojo.byId("filteringSelectTest").value != undefined)
                        {
                        alert(select.getValue());
                        }
                        else
                        {
                        alert('curses!');
                        }       
                }
                               
               
                var store;
                var select;
                dojo.addOnLoad(function() {
               
                        store = new dojo.data.ItemFileReadStore({url: "http://localhost:8080/dojoTests2/assets/js/dojo10/dijit/tests/_data/states.json"});
                                select = new dijit.form.FilteringSelect({
                                autoComplete:false,
                                store: store,
                                searchAttr:"name",
                                labelAttr:"label",
                                labelType:"html",
                                labelFunc:test()
                                }, dojo.byId("filteringSelectTest"));
                               
                               
                                //uncomment the following lines to try this, too, still doesn't work
                                //testFilter = dojo.byId("filteringSelectTest");
                                //dojo.connect(testFilter, 'onchange', 'test');
               
                });
                               
        </script>
        <style type="text/css">
                @import "assets/js/dojo10/dojo/resources/dojo.css";
                @import "assets/js/dojo10/dijit/themes/tundra/tundra.css";
        </style>       
</head>
<body class='tundra'>
       
        <div id="filteringSelectTest"></div>
        <div><a href='javascript:test()'>test filterValue</a></div>
       
</body>

Does this help?

Your code, edited (substitute your paths...):

<html><head>
        <title>filtering select test</title>
        <script type="text/javascript" src="./js/dojo1/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true,usePlainJson:true" ></script>
        <script type="text/javascript">
               
                dojo.require("dijit.form.FilteringSelect");
                dojo.require("dojo.data.ItemFileReadStore");
                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
               
                function test(value)    //need to specify the passed value, which is an object.
                {
                alert(value.name+','+value.abbreviation+','+value.label);  //new, types of info you can get from the object.
                console.dir(value);  //new, full listing of object info available.  **edited
                /*        if (dojo.byId("filteringSelectTest").value != undefined)      //commented out.
                        {
                        alert(select.getValue());
                        }
                        else
                        {
                        alert('curses!');
                        }       */  << end comment out.
                }
                               
               
                var store;
                var select;
                dojo.addOnLoad(function() {
               
                        store = new dojo.data.ItemFileReadStore({url: "./js/dojo1/dijit/tests/_data/states.json"});
                                select = new dijit.form.FilteringSelect({
                                autoComplete:false,
                                store: store,
                                id:'testSelect',  //new, should supply an id.
                                searchAttr:"name",
                                labelAttr:"label",
                                labelType:"html",
                                labelFunc:test       //()     <<  test, not test().
                                }, dojo.byId("filteringSelectTest"));
                               
                               
                                //uncomment the following lines to try this, too, still doesn't work
                                //testFilter = dojo.byId("filteringSelectTest");
                                //dojo.connect(testFilter, '
onchange', 'test');
               
                });
                               
        </script>

        <style type="text/css">
                @import "./js/dojo1/dojo/resources/dojo.css";
                @import "./js/dojo1/dijit/themes/tundra/tundra.css";
        </style>       
</head>
<body class='tundra'>
       
        <div id="filteringSelectTest"></div>
        <div><a href='javascript:test()'>test filterValue</a></div>
       
</body>

labelFunc called twice.

I am using the labelFunc within FilteringSelect widget to fire an event on Change of the value with select box. Somehow the labelFunc method is called twice (once on the value selection with Select and next when the user clicks outside the select box). any ideas why this is happenning ?

Here is my code.

store = new dojo.data.ItemFileReadStore( { data : {identifier:"abbreviation", items: [
										{name:"Owner Schedule", label:"Owner Schedule",abbreviation:"Owner Schedule", scheduleId:ownerScheduleId},
										{name:"Short Interval Schedule", label:"Short Interval Schedule",abbreviation:"Short Interval Schedule", scheduleId:shortScheduleId} ]}});
		
				if ( !select) {
											
		             select = new dijit.form.FilteringSelect({
		                          autoComplete:false,
		                          store: store,
		                          searchAttr:"name",
		                          labelAttr:"label",
		                          labelType:"html",
		                          labelFunc:ScheduleTypeClicked
		             }, dojo.byId("multiplePDFDropDown"));	
	             } else {
	             	dojo.style(dijit.byId("multiplePDFDropDown").domNode, "display", "inline");
	             }

yup that did it -- thanks very much

so just to clarify....the "labelFunc" property in a programmatically created filteringSelect (and I assume a combobox) automatically passes the object associated with what is basically an onValueChange event to the specified function? I think an example of a programatically declared filteringSelect using the labelFunc would be a good thing to add into both the /dijit/form/tests/ and FilteringSelect page on the site would be very helpful to others like us!

Thanks so much for your help Frank!

Nathan

labelFunc

Nathan,

The onChange event will only fire when the filteringSelect's user-selected value changes from one *data store item* to another item. Intitially, no data store item has been set, so changing from nothing to a data store item does not fire the onChange event.

However, the labelFunc method reflects a change in the *displayed* text (in the text box), so changing from a text box containing "" to a text box containing "Arizona" is a change.

The above should be true for filteringSelects created by markup or programmatically.

In the source:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/form/FilteringS...

we can see what labelFunc receives:

labelFunc: function(/*item*/ item, /*dojo.data.store*/ store){
			// summary: Event handler called when the label changes
			// returns the label that the ComboBox should display
			return store.getValue(item, this.searchAttr);
		},

Since we are attaching to labelFunc, we are receiving the same passed objects/values, e.g., item (which is an item object from your data store) and store (which is an object representing your data store).

We only needed the item, from which to extract the name or abbreviation or label, so we wrote:

function test(value) {....

receiving just the first passed object, e.g., a data store item selected by the user.

We could have written:

function test(anItem,aStore) {....

and received both the data store item selected by the user and also the data store itself.

Frank.

what about dijit.form.ComboBox

Hi there,

I'm trying to use the labelFunc stuff mentioned above with the dijit.form.ComboBox - isn't this supposed to work there as well? onChange works for me with a ComboBox, but labelFunc does not seem to be called...

Regards

Kai

Doesn't seem to be available

Doesn't seem to be available in ComboBox...but you could look at the source code and probably find another method of detecting the change or use dojo.extend (and code you pull from FilteringSelect.js) to add that capability to your version of ComboBox.

thanks, I was able to do

thanks, I was able to do what I wanted to do with the onChange method: I wanted to perform some special actions depending on the status of the properties of the selected dataStore item. I was able to access the properties of the selected dataStore item like this:

/**
* function that is called when the displayed value changes...
**/ 
function searchOnChange(){
  // id is (besides title) a field in my dataStore element
  alert("selected title"+searchFieldCombo.item.i.title+" id: "+searchFieldCombo.item.i.id);
  if (searchFieldCombo.item.i.id == 4711) doSomeThingSpecial();
}

var searchStore = new dojox.data.QueryReadStore({
	requestMethod : 'get',
	url : '/index.htm?listQuickSearchResults=listQuickSearchResults'
	});

var searchFieldCombo = 
    new dijit.form.ComboBox({
        searchAttr: 'title',
        store: searchStore,
        onChange: searchOnChange
    }, dojo.byId("searchField"));