How to update a filteringSelect dynamically

Submitted by Squinty on Thu, 12/27/2007 - 15:36.

Hi all,
I'm building a Dojo-based application and i need some help.
I have a filteringSelect which displays some with PHP/MySQL from a database. Near this, i have a button which display a dijit.Dialog to add content to the database. But how can i update the filteringSelect dynamically?

I had an idea : when the user on the filteringSelect's arrow, i make an ajax call to get the value to display. I used the "onclick" and dojo.connect to make it but with no real success.

There is the code which displayed the filteringSelect :

			Group information
			
				
					Group : 

					
					',	 id="selectLayout">
							
								<?php
								include ('../connexion.inc.php');
								$req = mysql_query("SELECT * FROM groups") or die(mysql_error() );
								while($resp = mysql_fetch_array($req) )
								{
									echo ''.$resp['group_desc'].'';
								}
								mysql_close();
								?>
									
							
					

					Add new group

I need a fonction which could add a new tag to the filteringSelect

If anyone have an idea, i'm listening !

Thanks everyone
Squinty

PS : i have another post with my dojo.connect problem >> http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/dojo-connect-how-stop-propagation

Login or register to post comments
Unsubscribe post

I didn't study your code

Submitted by frankf on Mon, 12/31/2007 - 23:13.

I didn't study your code closely, but this is what I do to update the store data that is associated with a FilteringSelect, where standardData is the store I initially assigned to the FilteringSelect:

function updateStdDataSelect() {
    standardData = new dojo.data.ItemFileReadStore({url:'servletName?a=getdata&category=' + catname});
    var stdDataSelect = dijit.byId('stdDataSelect');
    stdDataSelect.store = standardData;
    stdDataSelect.setDisplayedValue('');
}

This code isn't refreshing the store

Submitted by farrukhmpk on Tue, 04/22/2008 - 11:14.

Hi Frank,

I have tried the code you posted earlier i.e. making a new object of ItemFileReadStore. I am using jsp and Tomcat server at the back end. Also I am using Spring framework.

I am using a dijit comboBox instead of a filtering select. it fetches the data once when the page loads from the configured store which is actually a URL. But i am using your javascript on onChange event, and it doesn't seem to send a request to the server at the same URL when a value changes.

Am i doing something wrong here. Should I be using FilteringSelect instead of ComboBox?

My JavaScript Code is as follows:

********************************************************************************************************

<code>

function updateDataStore(){
                 var val = dojo.byId('state2').value
                 //var standardData = new dojo.data.ItemFileReadStore({url: "ajaxTest.htm?name='Texas'"});


                 stateStore = new dojo.data.ItemFileReadStore({url: "ajaxTest.htm?name='Texas'"});
                 var stdDataSelect = dojo.byId('state2'); //Here dijit.byId() wasn't working as well
                 stdDataSelect.store = stateStore;
                 // stdDataSelect.setDisplayedValue('');

                 alert("Farrukh : " + val); //Shows value selected in comboBox
                 alert(stdDataSelect.value); //Shows value selected in comboBox

}

</code>

******************************************************************************

My jsp code is as follows

<code>

comment: Angle brackets are replaced with square brackets on purpose

[div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="ajaxTest.htm?name=%{dojo.byId('state2').value}"][/div]

[select dojoType="dijit.form.ComboBox" value="" autoComplete="true" store="stateStore" name="state2" hasDownArrow="false" onChange="updateDataStore"]

[/select]

</code>

****************************

I'll appreciate, if you can help me in this regard.

Thanks,

Farrukh.

Normally, widgets are not

Submitted by frankf on Tue, 04/22/2008 - 11:51.

Normally, widgets are not referenced by dojo.byId(...), but dijit.byId(...):

var val = dojo.byId('state2').value;
var stdDataSelect = dojo.byId('state2'); //Here dijit.byId() wasn't working as well

If you find dijit isn't working, then it would be good to solve that first...becaulse this:

stdDataSelect.store = stateStore;

won't work, if stdDataSelect was set by dojo.byId(...).

var val = dojo.byId('state2').value;

should really be something like:

var val = dijit.byId('state2').getValue();

Since you didn't change your call to the url, e.g.,

stateStore = new dojo.data.ItemFileReadStore({url: "ajaxTest.htm?name=" + val});

the "state2" comboBox probably continued to show the list from Texas".

Similar notes for your jsp code as above.

Plus your stateStore may need to be an explict global variable, the way you are using it. Are you seeing any errors in Firefox's Firebug extensionn console?

Using dojo javascript calls in this:

[div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="ajaxTest.htm?name=%{dojo.byId('state2').value}"][/div]

are not likely to work, since dojo may/may not have been loaded yet.

what about an SQL server?

Submitted by Squinty on Tue, 01/01/2008 - 14:16.

Your code seems to be really good (and easy to understand) but what do you call a "servlet"??
I explain ; i'm doing SQL request to my database server and I make that calling a PHP file which make the request to the MySQL server.
Can i do that without php??

Sorry, there are many ways

Submitted by frankf on Tue, 01/01/2008 - 19:53.

Sorry, there are many ways to get data from a server, depending on what is available. PHP is fine, and is probably used by most people. You should create a .php file on your server that will receive the request from dojo, query your sql server, and whose response text would be output back to dojo. You would just substitute "mySqlPage.php?get=all", or however you want to set up your call, in the url part of "url:'servletName?a=getdata&category=' + catname" above.

Your url argument might be:

{url:"mySqlPage.php?get=all"}

or maybe just

{url:"mySqlPage.php"}

But you probably need to look at more of the test_ files and documentation to make sure you first set up your FilteringSelect so that it takes data from a "data store", e.g., ItemFileReadStore.

Look at the source in http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test... for "ItemFileReadStore" and "store" to see examples. The urls shown there are to static files, but you just substitute your dynamic page (xxxx.php plus arguments) in the url.

Note: Your url does not have to have any arguments passed to it, if the page is not expected to filter the data prior to sending it to you in JSON format.

Or, maybe easier, look at this post: http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/select#co...

How is current FilteringSelect contents sent to server?

Submitted by jwcnmr on Wed, 01/16/2008 - 13:09.

The FilteringSelect widget uses a data store object which may contain a url, indicating that data is to be fetched from the server. If I have typed in "Ab" how can the servlet know only to return a list of entries start with "Ab"
How is this information transmitted to the server?

James W Cooper

your code isn't refreshing the store

Submitted by farrukhmpk on Tue, 04/22/2008 - 11:03.

Hi Squinty,

I have tried the code you posted earlier i.e. making a new object of ItemFileReadStore. I am using jsp and Tomcat server at the back end. Also I am using Spring framework.

Am i doing something wrong here. Should I be using FilteringSelect instead of ComboBox?

My JavaScript Code is as follows:

********************************************************************************************************
function updateDataStore(){
var val = dojo.byId('state2').value
//var standardData = new dojo.data.ItemFileReadStore({url: "ajaxTest.htm?name='Texas'"});
stateStore = new dojo.data.ItemFileReadStore({url: "ajaxTest.htm?name='Texas'"});
var stdDataSelect = dojo.byId('state2'); //Here dijit.byId() wasn't working as well
stdDataSelect.store = stateStore;
// stdDataSelect.setDisplayedValue('');
alert("Farrukh : " + val);
alert(stdDataSelect.value);
// alert(standardData.data);
}

******************************************************************************

My jsp code is as follows

****************************

I'll appreciate, if you can help me in this regard.

Thanks,

Farrukh.

Search