I currently have a dropdown list with two values and I am looking to enable or disable four components based on the user's selection. If the user picks the first value, the components should be enabled, otherwise they should be disabled.
On the main page, users can navigate through different pages that open and close tabs loaded dynamically using ajax calls. These calls remove the current page and load the new one into a specific div.
In the pages loaded via Ajax, I need to include JavaScript functions that will be used on those pages. However, when I try to call the function, I receive an "Uncaught ReferenceError: soggettiNaturaChangeEvent is not defined" where soggettiNaturaChangeEvent is the function name.
Here is how I am trying to call it in the newEditSoggetti.jsp page:
<form:select id="soggetti_soggettiNatura" path="soggettiNatura" cssStyle="width:300px;" onChange="javascript:soggettiNaturaChangeEvent();">
...
...
...
In that same page, I also include the JavaScript function:
<script id="function1" type="text/javascript">
alert("soggettiNaturaChangeEvent");
function soggettiNaturaChangeEvent()
{
alert("function soggettiNaturaChangeEvent");
var natura = document.getElementById('soggetti_soggettiNatura');
var datanascita = document.getElementById('soggetti_soggettiDataNascita');
var luogonascita = document.getElementById('soggetti_soggettiLuogoNascita');
var sesso1 = document.getElementById('soggettiSessoID1');
var sesso2 = document.getElementById('soggettiSessoID2');
if(natura.value == "Persona fisica")
{
datanascita.disabled=false;
luogonascita.disabled=false;
sesso1.disabled=false;
sesso2.disabled=false;
}
else
{
datanascita.disabled=true;
luogonascita.disabled=true;
sesso1.disabled=true;
sesso2.disabled=true;
}
}
</script>
My tab refresh function that calls an initScript specified in a parameter looks like this:
//reset stuff, reorder tabs, etc...
$.ajax(action,
{
success : function(result)
{
//finds the div where to put new content
var doc = document.getElementById(newid);
doc.innerHTML = doc.innerHTML + result;
//finds the initScript "scriptId" and runs it (THIS IS WORKING)
scripts = $('#' + scriptId);
eval(scripts.html());
//here I try to find all the scripts tag that begin with "function" and eval them
var jScripts = $("[id^=function]");
for(var i = 0; i < jScripts.size(); i++)
{
eval(jScripts.html());
jScripts = jScripts.next();
}
}
});
The initial alert message pops up when the function is appended to the DOM, but I get an error when I try to invoke the function by clicking on the component. My goal is to execute this function upon clicking the soggettiNatura component, rather than after the ajax call finishes loading the page.
If there is anyone willing to help me troubleshoot this issue, I would greatly appreciate it. Thank you to all who provide assistance, and to those who have shared valuable information that I have read in the past. Keep up the excellent work.
Andrea
P.S.: Apologies for the poor indentation, as I'm a bit rushed at the moment :P
Edit: Adding a note, when I try loading the page without Ajax, the JavaScript functions work correctly. I have a function on the main page that displays the actual HTML code after the various JavaScript and Ajax modifications (solely for debugging purposes), and the JavaScript function I'm attempting to call is present in the DOM structure. Please assist a newcomer in this realm...