I have a drop down list with two values (for now..) with other elements in a form. What I’d like to do is enable four components if the user selects the first value and disable them otherwise.
There’s a main page, and the user navigates through other pages opening and closing tabs loaded dynamically with ajax calls, that remove the current page and load the new page into a specific div.
In those pages loaded with Ajax I need to put the javascripts that will be used in those pages, so in this case the javascript that enables/disables the desired components, but I cannot call it because I get “Uncaught ReferenceError: soggettiNaturaChangeEvent is not defined“, where soggettiNaturaChangeEvent is the name of the function.
Here’s where I call it, in the page newEditSoggetti.jsp:
<form:select id="soggetti_soggettiNatura" path="soggettiNatura" cssStyle="width:300px;" onChange="javascript:soggettiNaturaChangeEvent();">
...
...
...
In that page too I put 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>
Here’s my tab refresh function, which calls an initScript specified in a parameter:
//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 WORKS)
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 page prints the first alert when (I think) it appends the function to the DOM, but when I click on the component that should invoke the function I get the error.
What I’d like to do is to have this function get executed when I click on the component soggettiNatura, not when ajax finished loading my page.
Thanks to everyone who will try to help me, and to everyone that has posted useful content I read in the past.
Keep with the great work.
Andrea
P.S.: sorry for the bad indentation, I’m in a bit of a hurry 😛
Edit: a little append: if I try to load the page normally (not with Ajax) the javascript works…
I have a function in the main page that shows me the actual html code after the various javascripts and ajax modifications (this is purely to debug) and the javascript function I’m trying to call is there in the dom…
Please help a newbie in this world..
I finally made it. I’m posting a sample web page with all the relevant code:
The initScriptSettori.js:
In this case I had nothing to initialize, but there are so many cases in which you need some javascripts events being fired at the end of the loading of the page, well I put them inside the function initScriptSettori.
Hope this helps guys.