change javascript after AJAX

[yulinxp]

The parts updated by AJAX requires javascript validation. But I don't know how to update javascript.

In my jsp, I need to display a collection of items, each item having a collection of values;

item1 (AddValue)
-value1
-value2
item2 (AddValue)
-value1
-value2

I
1)click a href "AddValue" for item to file AJAX call;
2)At server side, I create a new value (=String("")) for that item, and add it to item's values collection;
3)The new created value displayed in a html:text file. User needs to input something, and click Save;

item1 (AddValue)
 -value1
 -value2
 _______ (Save)
item2 (AddValue)
 -value1
 -value2

I need to validate this new created item value field. But I don't know how to update the javascript. Because I use logic tag inside the javascript, all those logic:iterate will be hardcoded the first time the page is loaded, and is not changed.

function validateValueSave() {
 <logic:iterate name="myForm" property="items" id="item" type="..." >
 <logic:iterate name="item" property="values" id="value" type="..." >
 <logic:empty name="value">
alert("Please save value before continue.");
return false;
 </logic:empty> 
 </logic:iterate> 
 </logic:iterate>
 return true;
} 

Please help me. Thanks!

[JoshuaLevine]

its possible to update the javascript this way...

in your page have this:

<div id="stagingDiv" style="display:none;"></div>

and in the javascript up top have the initial value for your function:

function validateValueSave()
{
<logic:iterate name="myForm" property="items" id="item" type="..." >
<logic:iterate name="item" property="values" id="value" type="..." >
<logic:empty name="value">
alert("Please save value before continue.");
return false;
</logic:empty>
</logic:iterate>
</logic:iterate>
return true;
}

its may be important to use display:none instead of visibiltity:hidden for pre-rendering...

from the AJAX call return javascript in one of your divs. e.g.

<div id="mainResponse">
<div id="newJavascript">
validateValueSave = function() {
<logic:iterate name="myForm" property="items" id="item" type="..." >
<logic:iterate name="item" property="values" id="value" type="..." >
<logic:empty name="value">
alert("Please save value before continue.");
return false;
</logic:empty>
</logic:iterate>
</logic:iterate>
return true;
}
</div>
<div id="newHTMLS">
<div id="htmlObject_1">
</div>
<div id="htmlObject_2">
</div>
</div>
</div>

remember, you'll need a wrapper div like 'mainResponse' because IE doesnt like to append more than 1 div via innerHTML. You also cannot use a script tag because IE will strip it out when you set innerHTML.

so after receiving this response, do this:

function actOnResponse(responseData)
{
var stagingDiv = document.getElementById("stagingDiv");
stagingDiv.innerHTML = responseData;

var newJavascript = document.getElementById("newJavascript");
eval(newJavascript.innerHTML);

// have a nice day :)
}

[edited by: JoshuaLevine at 5:15 am (utc) on June 12, 2006]

[JoshuaLevine]

oops!