Hi all,
I have a custom js script in which I am trying to create an input
element with filteringSelect widget when clicked on a button. I have
tested the script with just an HTML file and it works great. However,
I'm lost when trying to integrate the same functionality to the
application which uses Zend_Dojo. In this particular page, there
are other input elements with filteringSelect widget created by
Zend_Form_Dojo that also work well.
Here is my view script:
------------view
script---------------------------------------------------------------
<?php
echo $this->form;
//what follows below is another form to test the functionality
?>
<form name="moreFields" id="moreFields" method="post" action="">
<div id="moreInput">
</div>
<input type="button" onclick="moreWidgets()" value="More"/>
<input type="hidden" name="totalProducts" id="totalProducts"
value="">
<input type="submit" name="submit" value="submit">
</form>
------------view
script---------------------------------------------------------------
I have the following snippet in the layout script
---------------------------layout
script---------------------------------------------------
<?php
echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
?>
<script type="text/javascript" src="/js/bizsense.js" ></script>
<script type="text/javascript" src="/js/custom/purchase.js"
></script>
---------------------------layout
script---------------------------------------------------
The custom js script - /js/custom/purchase.js ollows:
--------------------custom js
script----------------------------------------------------------
var counter = 0;
function moreWidgets() {
counter++;
var stateSelect = new Array();
list = stateSelect[counter];
var filteringSelect = new dijit.form.FilteringSelect(
{ id: stateSelect[counter], name:
"productId[" + counter + "]", searchAttr: "productName"
}, "list");
newStore = new dojo.data.ItemFileReadStore({url:
'/product/jsonlist'});
filteringSelect.store = newStore;
dojo.byId("moreInput").appendChild(filteringSelect.domNode);
//Create quantity and append it to the form
var quantity = document.createElement("input");
quantity.setAttribute("type", "text");
quantity.setAttribute("name", "quantity[" + counter + "]");
quantity.setAttribute("width", "50px");
quantity.setAttribute("size", "5");
dojo.byId("moreInput").appendChild(quantity);
//Create price and append it to the form var
price = document.createElement("input");
price.setAttribute("type", "text");
price.setAttribute("name", "price[" + counter + "]");
price.setAttribute("width", "50px");
price.setAttribute("size", "5");
dojo.byId("moreInput").appendChild(price);
var lineBreak = document.createElement("br");
dojo.byId("moreInput").appendChild(lineBreak);
//Set total
// dojo.byId("totalProducts").value = counter;
}
dojo.addOnLoad(function() { moreWidgets()})
--------------------custom js
script----------------------------------------------------------
When the function moreWidgets() is called, it is unable to create the
filteringSelect widget. If I comment out the lines that create and
append filteringSelect, the function works well. It also creates the
other price and quantity elements when the filteringSelect lines are
commented. But the script halts when the filteringSelect lines are
uncommented.
I get the message
"root is null
si = root.selectedIndex; file /js/dojo...mboBox.js (line 1051)"
in firebug console.
How do I get the script to create new element with filteringSelect
widget?
Any help is greatly appreciated.
