Id Attribute in roo default tagx not accessible by dojo.byId
Hi ,
The Id attribute provided in the default tag libray of roo , isnot accessible by dojo.byId function. But if i use the traditional tags like form:input tags then its working. But i completely lose my roo generated code. Is there are any way around ? I donot want to lose any of my roo code , i just want to get the element so that i can play around with ajax. Attaching the 2 codes of the pizzashop example , one which is working where i had to modify my code and the other where it is not working.
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:form="http://www.springframework.org/tags/form"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:spring="http://www.springframework.org/tags" version="2.0">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<jsp:output omit-xml-declaration="yes"/>
<util:panel title="Pizza Order" id="panel">
<form:form id="toppingfm" method="POST" modelAttribute="topping" path="/toppings">
<div>
Topping Name: <form:input path="name" id="toppingName"/> <span id="availabilityNode"></span>
<script type="text/javascript">
Spring.addDecoration(
new Spring.ElementDecoration({
elementId : 'toppingName',
widgetType : 'dijit.form.ValidationTextBox',
widgetAttrs : {
invalidMessage: 'Name Invalid',
required: true}}));
</script>
<br/>
</div>
<div class="submit">
<input id="proceed" type="submit" value="Save" />
</div>
</form:form>
</util:panel>
<script language="javascript">
dojo.addOnLoad(function(){
console.log("JS LOADED !!!'");
var availabilityNode = dojo.byId("availabilityNode");
var toppingNode = dojo.byId("toppingName");
dojo.connect(toppingNode,"onkeyup",function(){
var value = dojo.trim(toppingNode.value);
if(value != "") {
dojo.xhrGet({
url: "toppings/availability",
timeout: 2000,
content: {
toppingParam : value
}, handleAs : "text",
load: function(result) {
if(result=='available') {
availabilityNode.innerHTML = "Topping Available!";
}
else {
availabilityNode.innerHTML = "Topping Unavailible";
}
}
});
}
else {
availabilityNode.innerHTML = "";
}
});
});
</script>
</div>
The Code Below is not working.
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields"
xmlns:form="urn:jsptagdir:/WEB-INF/tags/form"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:spring="http://www.springframework.org/tags" version="2.0">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<jsp:output omit-xml-declaration="yes"/>
<script type="text/javascript">
dojo.require("dijit.Dialog");
</script>
<form:create id="fc_com_springsource_roo_pizzashop_domain_Base" modelAttribute="base" path="/bases" render="${empty dependencies}" z="vTeD+suDS2oKeu1rMNd36HdOHyQ=">
<div id="baseName"><field:input field="name" id="c_com_springsource_roo_pizzashop_domain_Base_name" min="2" required="true" z="0y/fXoOb3k2Pgj0n5bH8ZHJgp20="/><span id="availabilityNode"></span></div>
</form:create>
<form:dependency dependencies="${dependencies}" id="d_com_springsource_roo_pizzashop_domain_Base" render="${not empty dependencies}" z="lvbM2d/hzq6OEpM/SnLW+i/SYFg="/>
<script language="javascript">
dojo.addOnLoad(function(){
console.log("JS LOADED !!!'");
var thisdialog = new dijit.Dialog({ title:"Test", content: "JS Called !!!"});
console.log(thisdialog.value);
var availabilityNode = dojo.byId("availabilityNode");
var baseNode = dojo.byId("c_com_springsource_roo_pizzashop_domain_Base_name");
dojo.connect(baseNode,"onkeyup",function(){
var value = dojo.trim(baseNode.value);
if(value != "") {
dojo.xhrGet({
url: "bases/availability",
timeout: 2000,
content: {
baseParam : value
}, handleAs : "text",
load: function(result) {
if(result=='available') {
availabilityNode.innerHTML = "Base Available!";
}
else {
availabilityNode.innerHTML = "Base Unavailible";
}
}
});
}
else {
availabilityNode.innerHTML = "";
}
});
});
</script>
</div>
firebug shows me a null object error at this line
var value = dojo.trim(baseNode.value);
Please Help !!!
