Вызов функции javascript для события onChange элемента, загруженного с помощью Ajax в Spring MVC - PullRequest
0 голосов
/ 22 августа 2011

У меня есть выпадающий список с двумя значениями (на данный момент ..) с другими элементами в форме.Что я хотел бы сделать, так это включить четыре компонента, если пользователь выбирает первое значение, и отключить их в противном случае.

Есть главная страница, и пользователь перемещается по другим страницам, открывая и закрывая вкладки, динамически загружаемые с помощью вызовов 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 работает ..У меня есть функция на главной странице, которая показывает мне фактический HTML-код после различных javascripts и ajax-модификаций (это чисто для отладки), и функция javascript, которую я пытаюсь вызвать, есть в дом ...новичок в этом мире ..

1 Ответ

0 голосов
/ 29 ноября 2011

Я наконец сделал это. Я публикую пример веб-страницы со всем соответствующим кодом:

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

Надеюсь, это поможет ребятам.

...