2011-08-22 2 views
0

폼의 다른 요소와 함께 두 개의 값 (현재로서는 ..)을 가진 드롭 다운 목록이 있습니다. 사용자가 첫 번째 값을 선택하고 다른 값을 사용하지 않으면 네 가지 구성 요소를 사용할 수 있습니다.Spring MVC에서 Ajax로로드 된 요소의 onChange 이벤트에서 javascript 함수 호출

기본 페이지가 있으며 사용자가 ajax 호출로 동적으로로드 된 다른 페이지 열기 및 닫기 탭을 탐색하여 현재 페이지를 제거하고 새 페이지를 특정 div에로드합니다.

Ajax가로드 된 페이지에서 해당 페이지에 사용되는 javascript를 넣어야합니다.이 경우에는 원하는 구성 요소를 활성화/비활성화하는 javascript를 넣어야합니다. 그러나이를 호출 할 수 없습니다. "Uncaught ReferenceError : soggettiNaturaChangeEvent가 정의되지 않았습니다. ", 여기서 soggettiNaturaChangeEvent는 함수의 이름입니다.

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

는 여기를 호출 내 탭 새로 고침 기능입니다 : 해당 페이지에서

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

가 너무 나는 자바 스크립트 함수를 넣어 : 나는 페이지 newEditSoggetti.jsp에, 호출 곳에있다

입니다 매개 변수에 지정된 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를 클릭하면이 함수가 실행되도록하고 싶습니다. 나를 도우려는 모든 사람과 내가 읽은 유용한 콘텐츠를 게시 한 모든 사람에게 감사드립니다. 훌륭한 작업을 계속하십시오. 안드레아 PS : 나쁜 들여 쓰기 죄송합니다, 나는 서둘러의 비트에 있어요 : P

편집 : 조금 추가합니다 내가 (안 아약스) 일반적으로 페이지를로드하려고하면 자바 스크립트가 작동합니다 .. 나는 여러 자바 스크립트와 아약스 수정 (이것은 완전히 디버깅하는 것) 후에 실제 HTML 코드를 보여주는 메인 페이지에 함수가 있는데, 호출하려고하는 자바 스크립트 함수는 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() 
{ 
} 

을하지만, 많은 경우가되는 페이지 로딩이 끝날 때 javascript 이벤트가 필요합니다. initScriptSettori 함수 안에 넣으십시오.

희망은이 사람들을 돕습니다.