[Dojo-interest] dijit.form.filteringSelect reload problem

[Jianfu Pan]

I'm implementing two filteringSelect list boxes linked to separate json data
stores. The first list comes from a fixed json data file, but the second
one is loaded with different data store based on the selection in the first
list. This setup works in initial loading (default selection). But when I
change the value of the first list, which then triggered the reload of the
second box, the second select box disappears entirely. Here is how I create
the second list box (the first list is created in the same way and I don't
have problem with that):

function load_second_list(json)
{
if(dijit.byId("secondSelectId")) {
dijit.byId("secondSelectId").destroyRecursive();
}

var store = new dojo.data.ItemFileReadStore({ url: json,
urlPreventCache: true, clearOnClose: true });

var onchange = function()
{
...
}

var select = new dijit.form.FilteringSelect(
{
id: "secondSelectId",
name: "secondSelectName",
value: "",
store: store,
searchAttr: "name",
onChange: onchange
},
"secondSelectDiv"
);
}


I appreciate very much if anyone could help.

Regards,

Jianfu Pan

[murzik]

dijit._Widget.destroyRecursive destroys widget with dom node it was bound
until you pass preserveDom = true parameter
Try to preserve widget dom node when you destroying it:
dijit.byId("secondSelectId").destroyRecursive(true);

[Jianfu Pan]

Thanks so much for your help. By using
"dijit.byId("secondSelectId").destroyRecursive(true)", I'm now able to see
the select box with the normal down-arrow. The down-arrow seems from the
initial creation. It looks like each time I change the first select, It
creates a second list box inside the previous one, giving me multiple
(second) box one over another. It looks like it's not overwriting the
previous box, but adding new ones inside it. I still cannot see the
dropdown list, but when I start to type in the box, it's able to show the
hints and I'm able to make a selection of it. Any idea? I also changed
secondSelectId to secondSelect to match my <div> ID in HTML (either way it
does not seem to make difference).


Jianfu

Post by murzik
dijit._Widget.destroyRecursive destroys widget with dom node it was bound
until you pass preserveDom = true parameter
dijit.byId("secondSelectId").destroyRecursive(true);
--
http://dojo-toolkit.33424.n3.nabble.com/dijit-form-filteringSelect-reload-problem-tp1670875p1672029.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[murzik]

Seems that preserveDom option leaving whole widget dom structure for
_Templated widgets.
You can try following:
var w = dijit.byId("secondSelectId")
if(w) {
var node = w.srcNodeRef ||w.domNode
w.destroyRecursive(true);
dojo.empty(node); // this will kill all widget markup
}
But this piece of code will leave all attributes applied by widget to
domNode.
If this wont satisfy you, try

Another way:
1. create a widget placeholder element: <div id="select_placeholer"> </div>
2. On creation step, just create new dom element for widget:
var select = dijit.form.FlteringSelect({...}, dojo.create('div'))
3. and then:
select.placeAt('select_placeholder')

then you can destroy your widget without preserving dom node and append your
new widget to placeholder


Taking into account description of your problem, seems that you really don't
need to recreate widget each time. You need data store refresh. This might
help you:
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#reloading-refreshing-itemfilereadstore-from-a-url-dojo-toolkit-1-4

[Jianfu Pan]

I'm able to get it work by reloading the store instead of destroying and
recreation, as you suggested. What I did was

var w = dijit.byId("secondSelect");
if(w) {
w.store.close();
w.store = a_new_store;
w.store.fetch();
}

I also tried your alternative, and it didn't work out (giving me a very
narrow box more like a bar). I did not try your div place holder approach,
but I expect that to work.

I learned a lot in this process. Thanks so much for your help.

Jianfu

Post by murzik
Seems that preserveDom option leaving whole widget dom structure for
_Templated widgets.
var w = dijit.byId("secondSelectId")
if(w) {
var node = w.srcNodeRef ||w.domNode
w.destroyRecursive(true);
dojo.empty(node); // this will kill all widget markup
}
But this piece of code will leave all attributes applied by widget to
domNode.
If this wont satisfy you, try
1. create a widget placeholder element: <div id="select_placeholer"> </div>
var select = dijit.form.FlteringSelect({...}, dojo.create('div'))
select.placeAt('select_placeholder')
then you can destroy your widget without preserving dom node and append your
new widget to placeholder
Taking into account description of your problem, seems that you really don't
need to recreate widget each time. You need data store refresh. This might
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#reloading-refreshing-itemfilereadstore-from-a-url-dojo-toolkit-1-4
--
http://dojo-toolkit.33424.n3.nabble.com/dijit-form-filteringSelect-reload-problem-tp1670875p1672711.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest