Wednesday, October 28, 2009

Dojo 1.3.0 combobox autocomplete with dynamic population of data from database

In Dojo 1.3.0 to refesh an ItemFileReadStore attached to a combobox, we need to
  • set attributes urlPreventCache="true" clearOnClose="true" for the ItemFileReadStore
  • call the close() and fetch() methods of ItemFileReadStore

The below snippets of code have been tested in IE 6 and Firefox 3.5.3

Somefile.jsp


<html>
...
<head>
<script type="text/javascript">
function setComboValue(evt)
{
var comboId = dijit.byId('comboId');
if (comboId && comboId.item)
{
comboId.attr('abbreviation', comboId.item.abbreviation);
}

}
function searchForValue(evt)
{
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) {
//do nothing if up arrow, down arrow or enter keys are pressed
}
else
{
var comboId = dijit.byId('comboId');
comboId.store.url = "<%=request.getContextPath()%>/searchChar.htm?myParam=" + evt.target.value;
comboId.store._jsonFileUrl = "<%=request.getContextPath()%>/searchChar.htm?myParam=" + evt.target.value;
stateStore.close();
stateStore.fetch();
}
}

var requestContents = {
override: dijit.byId("comboId").attr('abbreviation')
};

dojo.xhrPost({
url: "/someUrlTOPost.htm",
content: requestContents,
handleAs: "json",
load: function(response, args){
if(response.errors != null) {
console.log("error returned..." + response)

}
else {

console.log("add successful...");
console.log(response);
//do something useful
}
},
error: function(response, args){


}
});
</scrip>
</head>
...
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
urlPreventCache="true" clearOnClose="true" id="stateStore"
url="<%=request.getContextPath()%>/searchChar.htm?myParam="></div>

<input id="comboId" dojoType="dijit.form.ComboBox"
store="stateStore" autocomplete="false" hasDownArrow="false"
searchAttr="name" onkeyup="searchForValue" searchDelay="500"
onblur="setComboValue" name="abbreviation" />
....
</html>



Json Array for data store ItemFileReadStore

{
identifier:"id",
label: "name",
items: [
{name:"Alabama", label:"Alabama",id:"0"},
{name:"Alaska", label:"Alaska",id:"1"},
{name:"American Samoa", label:"American Samoa",id:"2"},
{name:"Arizona", label:"Arizona",id:"3"},
{name:"Arkansas", label:"Arkansas",id:"4"}
]
}


Refeshing an ItemFileReadStore
by Gary Acord

This is a pretty common need with a pretty simple solution. How do you clear out the existing Data in a store, and populate it with new Data in Dojo 1.2?

The solution is pretty easy. Let’s assume you have an ItemFileReadStore (this works with ItemFileWriteStore as well) named myStore.

This creates an ItemFileRead store and assigns it to the global variable myStore.

Then you can force it to reload as such:

myStore.close();
myStore.fetch();

If you need to change the url of the store (as of Dojo 1.2.3) you can do it like this:

myStore.close();
myStore._jsonFileUrl = newurl;
myStore.fetch();

… and if you have a grid bound to the store, force it to reload

myStore.close();
myStore.fetch();
myGrid._refresh();

No comments: