2011-08-22 21 views
0

我有一個帶有兩個值(現在是..)的下拉列表以及表單中的其他元素。我想要做的是啓用四個組件,如果用戶選擇第一個值,否則禁用它們。在Spring MVC中使用Ajax加載的元素的onChange事件上調用javascript函數

有一個主頁面,用戶通過其他頁面打開和關閉使用ajax調用動態加載的頁面,這些頁面刪除當前頁面並將新頁面加載到特定的div中。

在那些使用Ajax加載的頁面中,我需要放置在那些頁面中使用的javascripts,所以在這種情況下,啓用/禁用所需組件的JavaScript,但我無法調用它,因爲我得到「Uncaught ReferenceError :soggettiNaturaChangeEvent未定義「,其中soggettiNaturaChangeEvent是該函數的名稱。

此處,我稱呼它,在頁面newEditSoggetti.jsp:

<form:select id="soggetti_soggettiNatura" path="soggettiNatura" cssStyle="width:300px;"  onChange="javascript:soggettiNaturaChangeEvent();"> 
... 
... 
... 

在該頁面過於我把javascript函數:

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

這是我的標籤刷新功能,它調用的在參數中指定的initScript:

//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(); 
} 
} 
}); 

當(我認爲)頁面打印第一個警報時,它將函數附加到DOM,但是當我點擊應該調用該函數的組件時,我得到錯誤。 我想要做的是當我點擊組件soggettiNatura時,而不是當ajax完成加載我的頁面時,此功能得到執行。 感謝大家會盡力幫助我,並感謝所有發佈過有用內容的人。 保持偉大的工作。 安德烈 PS:很抱歉的壞壓痕,我是有點着急的:P

編輯:有點追加:如果我嘗試正常加載的頁面(不使用Ajax)的JavaScript工程.. 。 我有一個主頁面中的功能,它顯示了各種javascript和ajax修改(這純粹是爲了調試)後的實際html代碼,我試圖調用的javascript函數在dom中有... 請幫助這個世界的新手..

回答

0

我終於做到了。我張貼的樣本網頁的所有相關代碼:

<%@ 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 !!!!! --> 

的initScriptSettori.js:

function initScriptSettori() 
{ 
} 

在這種情況下,我沒有什麼可初始化,但有這麼多的案件中,你需要在頁面加載結束時觸發一些javascripts事件,以及我將它們放在函數initScriptSettori中。

希望這可以幫助傢伙。

相關問題