Login Register
Home » Support » Forums » Dijit (dijit.*, 0.9+) » Dijit Support » How to programmatically create a filteringSelect and its associated data store

How to programmatically create a filteringSelect and its associated data store

Submitted by ge on Mon, 06/16/2008 - 15:04.

The two functions below are two different attempts to programmatically create a filteringSelect and its associated data store. I believe I am not properly creating the data store. The first method... 

function createPicklist(elemId, fldLabel, fldCount) {
  showMsg("creating picklist for:\nnelemId:" + elemId + "\nlabel:" + fldLabel + "\ni:" + i);
// This function creates a filteringSelect element for the specified field from the database

    // get the body element
    var doc = document;
    var htmlElement = doc.documentElement;
    var headElement = htmlElement.getElementsByTagName("head")[0];
    var bodyElement = headElement.nextSibling;
    while (bodyElement.nodeName.toLowerCase() != "body") {
      bodyElement = bodyElement.nextSibling;
    }

    //create the data store for the picklist
    var url = "OA_browser.asp?action=populate_picklist&picklist=" + elemId + "&sid=" + Math.random();
    var objStore = new dojo.data.ItemFileReadStore({
    jsId: "store_" + elemId,
    url: url
    });

    //create a div element as a container for the picklist
    var objDiv = doc.createElement("div");
    objDiv.setAttribute("id", "div_" + elemId);
    objDiv.setAttribute("jsId", "div_" + elemId);
    bodyElement.appendChild(objDiv);

    var objLabel = doc.createTextNode(fldLabel + ":");
    objDiv.appendChild(objLabel);
    objDiv.appendChild(objStore);

    //create the picklist itself
    var objPicklist = new dijit.form.FilteringSelect({
        id: elemId,
        store: "store_" + elemId,
        searchAttr: elemId,
        lableFunc:'valueChanged(this.value)',
        autocomplete:'true',
        tabindex: fldCount
        }, dojo.byId(elemId));

    //put the picklist in the container
    objDiv.appendChild(objPicklist);

}; //end createPicklist

...produces the following error:

Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"... at the statement objDiv.appendChild(objStore);

The second method...

function createPicklist1(elemId, fldLabel, fldCount) {
  showMsg("creating picklist for:\nnelemId:" + elemId + "\nlabel:" + fldLabel + "\ni:" + fldCount,1);
// This function creates a filteringSelect element for the specified field from the database
// It is meant to be called for each item in an enumerated list of formfields.

    // get the body element
    var doc = document;
    var htmlElement = doc.documentElement;
    var headElement = htmlElement.getElementsByTagName("head")[0];
    var bodyElement = headElement.nextSibling;
    while (bodyElement.nodeName.toLowerCase() != "body") {
      bodyElement = bodyElement.nextSibling;
    }

    //create a data store for the picklist and put it in a div container
    var url = "OA_browser.asp?action=populate_picklist&picklist=" + elemId + "&sid=" + Math.random();
    var objStore = doc.createElement("div");
    objStore.setAttribute("dojoType", "itemFileReadStore");
    objStore.setAttribute("id", "store_" + elemId);
    objStore.setAttribute("jsId", "store_" + elemId);
    objStore.setAttribute("url", url);
    bodyElement.appendChild(objStore);

    //create another div container for the filteringSelect
    var objSelect = doc.createElement("div");
    objSelect.setAttribute("id", "select_" + elemId);
    objSelect.setAttribute("jsId", "select_" + elemId);

    //create a label for the picklist and add it to the div container
    var objLabel = doc.createTextNode(fldLabel + ":");
    objSelect.appendChild(objLabel);

    //create the picklist itself
    var objPicklist = new dijit.form.FilteringSelect({
        id: elemId,
        store: "store_" + elemId,
        searchAttr: elemId,
        lableFunc:'valueChanged(this.value)',
        autocomplete:'true',
        tabindex: fldCount
        }, dojo.byId(elemId));

    //finally, put the picklist in the div container
    objSelect.appendChild(objPicklist);

}; //end createPicklist

produces a TypeError in dojo.js with the following description "this.store.fetchItemByIdentity is not a function"

If anyone can show the correct way to do this, it would be greatly appreciated.

‹ DateTime widget Tree - problem accessing newly created items ›

some progress made

Submitted by ge on Tue, 06/17/2008 - 12:42.

The modified function below at least renders the filteringSelects on the page now. However, clicking on the filteringSelects produces no result, so I think they are still not populating.

function createPicklist(elemId, fldLabel, fldCount) {
  showMsg("creating picklist for:\nelemId:" + elemId + "\nlabel:" + fldLabel + "\ni:" + fldCount,1);
// This function creates a filteringSelect element for the specified field from the database
// It is meant to be called for each item in an enumerated list of formfields.

    // get the body element
    var doc = document;
    var htmlElement = doc.documentElement;
    var headElement = htmlElement.getElementsByTagName("head")[0];
    var bodyElement = headElement.nextSibling;
    while (bodyElement.nodeName.toLowerCase() != "body") {
      bodyElement = bodyElement.nextSibling;
    }

    //create a data store for the picklist and put it in a div container
    var div_store = doc.createElement("div");
    var url = "OA_browser.asp?action=populate_picklist&picklist=" + elemId + "&sid=" + Math.random();
    var objStore = new dojo.data.ItemFileReadStore({
    id: "store_" + elemId,
    jsId: "store_" + elemId,
    url: url
    }, div_store);
    bodyElement.appendChild(div_store);

    //create a filteringSelect and put it in a div container
    var div_select = doc.createElement("div");
    var objLabel = doc.createTextNode(fldLabel + ":");
    div_select.appendChild(objLabel);
    var input_select = doc.createElement("input");
    div_select.appendChild(input_select)
    var objPicklist = new dijit.form.FilteringSelect({
        id: "select_" + elemId,
        store: objStore,
        searchAttr: elemId,
        labelFunc:'valueChanged(this.id)',
        autocomplete:'true',
        tabindex: fldCount
        }, input_select);
    bodyElement.appendChild(div_select);

}; //end createPicklist

Im a newb but maybe this will help

Submitted by jbyrer on Wed, 06/18/2008 - 00:43.

I've only been doing this for a month, but since you haven't gotten any further responses yet, maybe this can help you for now:
first, I don't believe you have to attach the readstore to the document. This type of thing usually works for me:

var objStore = new dojo.data.ItemFileReadStore({url}); ( no need for all the other params)

then you can just reference it in your objPicklist the same way that you are. If this still fails, try removing some of the params from objPicklist, just to check. Also, you might want to put some println's or whatever (I'm a jsp guy :P) in your .asp file (or debug it and step through) just to make sure that its parsing the URL right and sending the info back the right way. And you might want to put the whole function in a dojo.addOnLoad, although I've found the whole addOnLoad thing gets a bit confusing when doing dom manipulation programmatically.

Good luck, hope this can help until one of the pro's can get back to you :)

solved

Submitted by ge on Wed, 06/18/2008 - 17:48.

Thanks for the reply jbyrer. You were correct that I needed no params to the store object other than the url. The corrected and simplified code below works.

function createPicklist(elemId, fldLabel, fldCount) {
// This function creates a filteringSelect element for the specified field from the database
// It is meant to be called for each item in an enumerated list of formfields.

//showMsg("creating picklist for:\nelemId:" + elemId + "\nlabel:" + fldLabel + "\ni:" + fldCount,1);

//create a data store for the picklist
var url = "OA_browser.asp?action=populate_picklist&picklist=" + elemId + "&sid=" + Math.random();
var objStore = new dojo.data.ItemFileReadStore({url:url});

//create a filteringSelect and put it in a div container
var div_select = document.createElement("div");
var objLabel = document.createTextNode(fldLabel + ":");
div_select.appendChild(objLabel);
var input_select = document.createElement("input");
div_select.appendChild(input_select);
var objPicklist = new dijit.form.FilteringSelect({
id: "select_" + elemId,
store: objStore,
searchAttr: elemId,
onChange:valueChanged,
//labelFunc:valueChanged,
autocomplete:'true',
tabindex: fldCount
}, input_select);
return div_select;

} //end createPicklist