在Spring MVC中，在加载了Ajax的元素的onChange事件上调用javascript函数

Question

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 PS: sorry for the bad indentation, I'm in a bit of a hurry :P

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

Answer 1

I finally made it. I'm posting a sample web page with all the relevant code:

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.settori-resources"/>
<!-- !!!!! important for popup !!!!! I have a boolean param passed from the server to know if I'm opening in popup mode or in tab mode -->
<% Boolean isPopup = (Boolean)request.getAttribute("popup"); %>
<!-- !!!!! important for popup !!!!! -->

<div id="contentarea" >
<div id="lb"><div id="rb"><div id="bb"><div id="blc">
<div id="brc"><div id="tb"><div id="tlc"><div id="trc">
<div id="content">
    <h2><fmt:message key="navigation.management"/> <fmt:message key="settori.title"/></h2>
    <div id = "initScriptSettori"></div>
    <form:form id="tabSettoriForm" method="POST" commandName="settori">
        <!-- !!!!! important for popup !!!!! I'm saving the id of the element of the calling page I'm going to edit with the selected element in the popup -->
        <form:hidden path="hiddenCallerFormElementId" />
        <!-- !!!!! important for popup !!!!! -->
        <table cellpadding="0" cellspacing="0" id="viewTable">
            <tbody>
                <tr>
                    <td class="label" valign="top">
                        <fmt:message key="settori.settoreid.title"/>:
                    </td>
                    <td>
                        <form:input id="settori_settoreId" path="settoreId" cssStyle="width:300px;"/>
                    </td>
                    <td class="label" valign="top">
                        <fmt:message key="settori.settoredescrizione.title"/>:
                    </td>
                    <td>
                        <form:input id="settori_settoreDescrizione" path="settoreDescrizione" cssStyle="width:300px;"/>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- !!!!! important for popup !!!!! It triggers two different search functions based on the popup staying open or not: the first updates the popup with the search results, the second updates the tab -->
        <% if(isPopup == null || isPopup == false) {%>
            <span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettori" onClick="javascript:refreshTabWithPost('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/searchSettori', '<fmt:message key="navigation.management"/> <fmt:message key="settori.title"/>', 'initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
        <% } else {%>
            <span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettoriPopup" onClick="javascript:postColorbox('/DeliDete/searchSettoriPopup', '', 'tabSettoriForm','initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
        <% } %>
        <!-- !!!!! important for popup !!!!! -->

    </form:form>

    <div class="clear">&nbsp;</div>
    <!-- !!!!! important for popup !!!!! If I'm on the tab version shows the new entity button, else it is hidden -->
    <% if(isPopup == null || isPopup == false) {%>      
        <div class="navitem"><a class="button" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/newSettori', '<fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/>', 'initScriptSettori')"><span><img src="${pageContext.request.contextPath}/images/icons/new.gif" /><fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/></span></a></div>
    <% } %>
    <!-- !!!!! important for popup !!!!! -->

    <div id="tablewrapper">
    <table id="listTable" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th class="thead">&nbsp;</th>
                <th class="thead"><fmt:message key="settori.settoreid.title"/></th>
                <th class="thead"><fmt:message key="settori.settoredescrizione.title"/></th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${settoris}" var="current" varStatus="i">
                <c:choose>
                    <c:when test="${(i.count) % 2 == 0}">
                        <c:set var="rowclass" value="rowtwo"/>
                    </c:when>
                    <c:otherwise>
                        <c:set var="rowclass" value="rowone"/>
                    </c:otherwise>
                </c:choose> 
            <tr class="${rowclass}">
                <td nowrap="nowrap" class="tabletd">

                    <!-- !!!!! important for popup !!!!! If I'm in the tab version of the page it shows the view,edit and delete buttons, if I'm in the popup version it shows the select button, which triggers the closing of the popup and the update of the calling element -->
                    <% if(isPopup == null || isPopup == false) {%>
                        <a title="<fmt:message key="navigation.view" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/selectSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.view"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/view.gif" /></a>
                        <a title="<fmt:message key="navigation.edit" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/editSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.edit"/> <fmt:message key="settori.title"/>', 'initScriptSettori')"><img src="images/icons/edit.gif" /></a>
                        <a title="<fmt:message key="navigation.delete" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/confirmDeleteSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.delete"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/delete.gif" /></a>
                    <% } else {%>
                        <a title="<fmt:message key="navigation.select" />" href="javascript:closeColorbox('${current.settoreId}', '${current.settoreDescrizione}', '${settori.hiddenCallerFormElementId}')"><img src="images/icons/select.png" /></a>
                    <% } %>
                    <!-- !!!!! important for popup !!!!! -->
                </td>
                <td nowrap="nowrap" class="tabletd">

                        ${current.settoreId}
                    &nbsp;
                </td>
                <td nowrap="nowrap" class="tabletd">

                        ${current.settoreDescrizione}
                    &nbsp;
                </td>
            </tr>
            </c:forEach>
        </tbody>
    </table>
    </div>
</div>
</div></div></div></div>
</div></div></div></div>
</div>

<!-- !!!!! important for popup !!!!! -->
<script>
function initLoad()
{
//necessary for the popup init script loading
if(jQuery1_6_2("#initScriptSettori").length != 0)
{
    jQuery1_6_2.getScript("javascripts/pagesJs/" + "initScriptSettori" + ".js", function() 
    {
        window["initScriptSettori"]();
    });
}
else
    setTimeout("initLoad()",500);
}
initLoad();
</script>
<!-- !!!!! important for popup !!!!! -->

The initScriptSettori.js:

function initScriptSettori()
{
}

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.