我有一个下拉列表,其中包含两个值(现在..)以及表单中的其他元素。我想做的是,如果用户选择第一个值,则启用四个组件,否则禁用它们。
有一个主页面,用户浏览其他页面打开和关闭动态加载的选项卡,使用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完成加载我的页面时。 感谢所有愿意帮助我的人,以及我过去阅读过的有用内容的每个人。 继续做伟大的工作。 安德里亚 P.S。:对于糟糕的缩进感到抱歉,我有点匆忙:P
编辑:有点追加:如果我尝试正常加载页面(不使用Ajax),javascript可以正常工作...... 我在主页面中有一个函数,它显示了各种javascripts和ajax修改后的实际html代码(这纯粹是为了调试)和我试图调用的javascript函数在dom中... 请帮助这个世界的新手..
答案 0 :(得分: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"> </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"> </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}
</td>
<td nowrap="nowrap" class="tabletd">
${current.settoreDescrizione}
</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中。
希望这有帮助的人。