jQuery Forum

Hi guys.

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.

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..