0

解決済み: }Javascript 内に迷い込んでいます。Eclipse IDE は、JSP ではこれらをチェックしません。

Javascript 関数を JSP で呼び出すのに問題があります。上記で、機能している機能と機能していない機能についてコメントしました。私の目標は、渡されたパラメーターに基づいてドロップダウン ボックスを事前に選択することです。

<script type="text/javascript">
    //this alert not working
    alert('alert1');

function preloadDropdownBoxes() {
    //preload function alert not calling
    alert('preload function called');
    //mapping vars to java variables
    var sYear = '<%=sYear%>';
    var collectionPeriod = '<%=collectionPeriod%>';
    var submission = '<%=submission%>';
    var availDate = '<%=availDate%>';
    var openDate = '<%=openDate%>';
    var closeDate = '<%=closeDate%>';
    //these are time generated values based on calendar instance
    var pastTwoYear = '<%=pastTwoYear%>';
    var pastYear = '<%=pastYear%>';
    var currentYear = '<%=currentYear%>';
    var futureYear = '<%=futureYear%>';
    //change selectedIndex values if dropdown in JSP has "pastTwoYear"
    if (sYear == pastTwoYear) {
        document.getElementById('pastTwoYear').selectedIndex = 0;
    } else if (sYear == pastYear) {
        document.getElementById('past').selectedIndex = 0;
        alert(sYear + '0');
    } else if (sYear == currentYear) {
        document.getElementById('current').selectedIndex = 1;
        alert(sYear + '1');
    } else if (sYear == futureYear) {
        document.getElementById('future').selectedIndex = 2;
        alert(sYear + '2');
    } else if(sYear == futureTwoYear) {
        document.getElementById('futureTwoYear').selectedIndex = 3;
        alert(sYear + '3');
    }
} //end preLoadDropdownBoxes()
</script>

次に、ドロップダウン ボックスのコードを作成します。ここにスニペットがあります:

<select name="sYear1" id="sYear1" onchange="javascript:PreselectMyItem();">
                        <option value="past"><%=cal.get(java.util.Calendar.YEAR)-2%>-<%=cal.get(java.util.Calendar.YEAR)-1%></option>
                        <option value="current"><%=cal.get(java.util.Calendar.YEAR)-1%>-<%=cal.get(java.util.Calendar.YEAR)%></option>
                        <option value="future"><%=cal.get(java.util.Calendar.YEAR)%>-<%=cal.get(java.util.Calendar.YEAR)+1%></option>
                    </select>

最後に、一番下に別のスクリプトがあります。preloadDropdownBoxes();関数を最後に配置する予定です。使ってみ$(document).readyたけどダメでした。コードは次のとおりです。

    <script>
//     these two alert calls work
alert('footer');
alert('footer next');
//     these functions aren't being called
window.preloadDropdownBoxes();
document.getElementById('future').selectedIndex = 2;
window.alert('document ready on bottom');

    </script>
</body>
</html>

どんな助けでも大歓迎です!

編集: テスト ボタンを次のように作成しましたが、<input type="button" value="test" onclick="javascript:alert('test');"/>このアラートは機能します。関数 test() { alert('hello'); ただし、ボタンが次の場合、上記のスニペット関数は呼び出されません。<input type="button" value="test" onclick="javascript:test();"/>

4

2 に答える 2

2

ここには2つの問題があります

  1. 行番号125で迷子になった(コメントの最後のタグの}すぐ上</head>
  2. 変数futureTwoYearが定義されていません。定義する必要があるかもしれませんvar futureTwoYear= '2014-2015';

コード:

<html>

<head>
<title>Edit Calendar</title>

<link href="/SpringApp6/css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="/SpringApp6/js/tsds_new.js"></script>
<script type="text/javascript" src="/SpringApp6/js/datetimepicker.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> -->
<script type="text/javascript">
                //this alert not working
                alert('alert1');

        function selectAll() {
                var cancelElements = new Array();
                cancelElements = document.getElementsByName("cancel");
                if (cancelElements[0].checked == true) {
                        for (i = 1; i < cancelElements.length; i++) {
                                if (cancelElements[i].disabled != true
                                                && cancelElements[i].checked != true) {
                                        cancelElements[i].checked = true;
                                }
                        }
                } else if(cancelElements[0].checked != true){
                        for (j = 1; j < cancelElements.length; j++) {                          
                                if (cancelElements[j].disabled != true
                                                && cancelElements[j].checked == true) {
                                        cancelElements[j].checked = false;
                                }
                        }
                }              
        }

        function passDetails(campus,timestamp, jobname) {
                var camp = document.getElementById(campus).innerText;
                var tstamp = document.getElementById(timestamp).innerText;
                var jname = document.getElementById(jobname).innerText;
                window.location.href = "scheduleLoad.jsp?campus="+camp+"&timestamp="
                                + tstamp + "&jobName=" + jname;
        }
        function checkSelectAll(){             
                var cancelElements = new Array();
                cancelElements = document.getElementsByName("cancel");
                var selectAll=true;            
                for (j = 1; j < cancelElements.length; j++) {                          
                                if (cancelElements[j].disabled != true
                                                && cancelElements[j].checked != true) {
                                                selectAll=false;
                                                break;
                                        }
                }
                if(selectAll==true){
                        cancelElements[0].checked=true;
                }else{
                        cancelElements[0].checked=false;
                }
        }

        /* Reset collection calendar search dropdown boxes */
        function resetSearch() {
                document.getElementById('sYear').selectedIndex = 0;
                document.getElementById('collectionPeriod').selectedIndex = 0;
                document.getElementById('submission').selectedIndex = 0;
        }

        //preselect dropdown based on URL parameter
        function preloadDropdownBoxes() {
                //preload function alert not calling
                alert('preload function called');
                //mapping vars to java variables
                var sYear = 'past';
                var collectionPeriod = 'FALL1';
                var submission = 'First';
                var availDate = '2013-01-30';
                var openDate = '2013-01-30';
                var closeDate = '2013-01-30';
                //these are time generated values based on calendar instance
                var pastTwoYear = '2010-2011';
                var pastYear = '2011-2012';
                var currentYear = '2012-2013';
                var futureYear = '2013-2014';
                var futureTwoYear = '2014-2015';
                //change selectedIndex values if dropdown in JSP has "pastTwoYear"
                if (sYear == pastTwoYear) {
                        document.getElementById('pastTwoYear').selectedIndex = 0;
                } else if (sYear == pastYear) {
                        document.getElementById('past').selectedIndex = 0;
                        alert(sYear + '0');
                } else if (sYear == currentYear) {
                        document.getElementById('current').selectedIndex = 1;
                        alert(sYear + '1');
                } else if (sYear == futureYear) {
                        document.getElementById('future').selectedIndex = 2;
                        alert(sYear + '2');
                } else if(sYear == futureTwoYear) {
                        document.getElementById('futureTwoYear').selectedIndex = 3;
                        alert(sYear + '3');
                }
        } //end preLoadDropdownBoxes()

        function test() {
                alert('yolo');
        }

//               alert(document.editCalendarForm1.sYear1.options.length);

//     // Get a reference to the drop-down
//     var myDropdownList = document.editCalendarForm1.sYear1;
//     int iLoop = 0;
//     alert(myDropdownList.options.length);
//     // Loop through all the items
//     for ( iLoop; iLoop< myDropdownList.options.length; iLoop++)
//     {
//      alert(myDropdownList.options[iLoop].value);

//       if (myDropdownList.options[iLoop].value == abc)
//       {
//         // Item is found. Set its selected property, and exit the loop
//         sYear1.options[iLoop].selected = true;
//         break;
//       }
//     }
        }
</script>
</head>
<body>
<!-- onload="javascript:openMail();" -->

<table class="maintable" align="center">
        <tbody>
                <!-- header -->

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PEIMS</title>
<link href="/SpringApp6/css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
        <div id="wrapper">
                <div id="logoplaceholder">
            <div id="logo"> <img src="images/tsdslogo.png" width="287" height="88" alt="tsds logo" /> </div>
            <!--  <div id="search"><input id="input" type="text"/><img src="images/Search.png" width="87" height="23"/>
                        </div>  -->

        </div>

        <div style="text-align: right;">&nbsp;
        </div>

        <div id="topbar">
                <div id="topbarcontent" style="margin-left:30px; border-right: solid 0px; margin-right:30px;">
                <b>Jonathan Washington</b>&nbsp; &nbsp;&nbsp;&nbsp;jwashington@washingtonheightsisd.com </div>
                <div id="topbarcontent"> My Messages (10)</div>                        
                <div id="topbarcontent"> Help Desk </div>
                                <div id="topbarcontent"> Exit </div>

              <div style="float: left; margin: 13px 5px 5px 5px;"><select>
        <option>Washington Heights ISD</option>
        <option>Austin ISD</option>
        <option>Dallas ISD</option>
        <option>Houston ISD</option>
</select></div>

<div id="topbarcontent"
        style="border-left: solid thin; border-right: none; border-color: #00A1DE"><img src="/SpringApp6/images/change.png" width="87" height="23" /></div>
</div>
        </div>


        </div>
</html>

                <!-- end header -->
                <!-- body -->
                <tr height="81%" style="vertical-align: middle;">
                        <!-- left navigation -->
                        <td width="20%"><html>
<!-- <style>
.a {text-decoration:none}
</style> -->

<script type="text/javascript">
        var context='/SpringApp6';
        document.write("<div id=\"leftNav\">");
        document.write("<div id=\"leftNavtext\"><a href=\"home.htm\" id=\"phome\" style=\"text-decoration:none\">Home</a></div>");     
        document.write("<div id=\"leftNavtext\" ><a href=\"dataSubmissions.jsp\" id=\"dataSubmissions\" style=\"text-decoration:none\">Data Submissions</a></div>");
        document.write("<div id=\"leftNavtext\" >Data Mart Loads</div>");
/*              document.write("<span id=\"listLoads\" style=\"display: none; padding-left: 20px;padding-top:5px;\">");
 */             document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"scheduleLoad.htm\" id=\"scheduleLoad\" style=\"text-decoration:none\">Manage Data Loads</a><br/></div>");
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\"><a href=\"scheduleMonitor.htm\" id=\"scheduleMonitor\" style=\"text-decoration:none\">Monitor Data Loads</a></div>");
                /* document.write("</span>");  */      
                document.write("<div id=\"leftNavtext\" ><a href=\"collectionMonitor.htm\" id=\"collectionMonitor\" style=\"text-decoration:none\">Collection Status Monitor</a></div>");
                document.write("<div id=\"leftNavtext\">Administration</div>");
                /* document.write("<span id=\"listAdminTasks\" style=\"display: none; padding-left: 20px;padding-top:5px;\">"); */
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"collectionCalendar.htm\" id=\"collCalendar\" style=\"text-decoration:none\">Collection Calendar</a><br/></div>");
                //document.write("<a href=\"viewCalendar.jsp\" id=\"viewCalendar\">View Calendar</a><br/>");
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"extnRequest.jsp\" id=\"extnReq\" style=\"text-decoration:none\">Request Extension</a><br/></div>");
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"extnApproval.jsp\" id=\"extnApproval\" style=\"text-decoration:none\"> Approve Extensions</a><br/></div>");
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"configureNotifications.jsp\" id=\"configNotifications\" style=\"text-decoration:none\">Configure Notifications</a></div>");
                /* document.write("</span></div>"); */         
        /*      document.write("<div id=\"leftNavtext\"><a href=\"#\" style=\"text-decoration:none\">Data Access</a></div>"); */
                document.write("<div id=\"leftNavtext\">Data Access</div>");
                /* document.write("<span id=\"listDataTasks\" style=\"display: none; padding-left: 20px;padding-top:5px;\">"); */
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"dataSearch.jsp\" id=\"dataSearch\" style=\"text-decoration:none\">Data Search</a><br/></div>");
                //document.write("<a href=\"viewCalendar.jsp\" id=\"viewCalendar\">View Calendar</a><br/>");
                document.write("<div  style=\" padding-left: 20px;padding-top:5px;\" ><a href=\"rosterSearch.jsp\" id=\"rosterSearch\" style=\"text-decoration:none\">Roster Search</a><br/></div>");          
                /* document.write("</span></div>"); */         
                //document.write("<div style=\"padding-bottom: 20px;\"><a href=\"dataSearch.jsp\" id=\"dataSearch\">Data Search</a></div>");
                //document.write("<div style=\"padding-bottom: 20px;\"><a href=\"rosterSearch.jsp\" id=\"rosterSearch\">Roster Search</a></div>");

                document.write("</div>");
                var loc=location.href; 

</script>
<!-- <div style="padding-bottom: 120px;"></div> -->
</html></td>
                        <!-- end left navigation -->
                        <!-- main content  -->
                        <td width="55%" style="vertical-align: top;">
                        <div
                                style="font-family: sans-serif; padding-bottom: 15px; color: #0099CC;">
                        Administration >> Collection Calendar >> <b>Edit Collection Calendar</b></div>
                        <div style="padding-bottom: 20px;">
                        <h3>Edit Collection Calendar</h3>
                        </div>
                        <!-- BEGIN EDIT FORM -->
                        <form id="editCalendarForm1" action="/SpringApp6/editCalendar.htm?collKey=1&amp;sYear=past&amp;collectionPeriod=FALL1&amp;submission=First&amp;availDate=2013-01-30&amp;openDate=2013-01-30&amp;closeDate=2013-01-30" method="POST">
                        <input type="hidden" name="initLoad" value="rich1"/>

                        &nbsp;
                        &nbsp;
                        &nbsp;
                        &nbsp;

                        <table style="width: 100%; margin: auto; font: 100%; border: hidden;">
                                <tr
                                        style="height: 15px; border-bottom-color: transparent; border-bottom-width: 0;">
                                        <td style="text-align: right; border: hidden;"><b>School
                                        Year</b>:</td>
                                        <td style="border: hidden;">
                                                <select name="sYear1" id="sYear1" onchange="javascript:PreselectMyItem();">
                                                        <option value="past">2011-2012</option>
                                                        <option value="current">2012-2013</option>
                                                        <option value="future">2013-2014</option>
                                                </select>
                                        </td>
                                        <!-- COLLECTION PERIOD -->
                                        <td style="text-align: right; border: hidden;"><b>Collection</b>:</td>
                                        <td style="border: hidden;">
                                                <select name="collectionPeriod1" id="collectionPeriod1" >
                                                        <option value="FALL1" id="FALL1">Collection1(FALL1)</option>
                                                        <option value="FALL2" id="FALL2">Collection1(FALL2)</option>
                                                        <option value="working1" id="working1">Collection1(Working)</option>
                                                        <option value="MDYR1" id="MDYR1">Collection2(MDYR1)</option>
                                                        <option value="MDYR2" id="MDYR2">Collection2(MDYR2)</option>
                                                        <option value="working2" id="working2" >Collection2(Working)</option>
                                                        <option value="SUMR1" id="SUMR1">Collection3(SUMR1)</option>
                                                        <option value="SUMR2" id="SUMR2">Collection3(SUMR2)</option>
                                                        <option value="working3" id="working3">Collection3(Working)</option>
                                                        <option value="EXYR1" id="EXYR1">Collection4(EXYR1)</option>
                                                        <option value="EXYR2" id="EXYR2">Collection4(EXYR2)</option>
                                                        <option value="working4" id="working4">Collection4(Working)</option>
                                                        <option value="DASH1" id="DASH1">Collection5(DASH1)</option>
                                                        <option value="DASH2" id="DASH2">Collection5(DASH2)</option>
                                                        <option value="working5" id="working5">Collection5(Working)</option>
                                                </select>
                                        </td>
                                        <!-- SUBMISSION -->
                                        <td style="text-align: right; border: hidden;"><b>Submission</b>:</td>
                                        <td colspan="2" style="border: hidden;">
                                                <select name="submission1" id="submission1">
                                                        <option>First</option>
                                                        <option>Second</option>
                                                        <option>Working</option>
                                                </select>
                                        </td>

                                </tr>  

                                <!-- SELECT DATE -->
                                <tr style="height: 15px; border-bottom-color: transparent; border-bottom-width: 0;">
                                        <td style="border: hidden;" colspan="3"><b>Available Date:</b>
                                                <input name="availDate1" type="Text" id="availDate1" class="calText" size="25" value="01/30/2013"
                                                readonly="readonly" />&nbsp;<img src="/SpringApp6/images/cal.gif"
                                                width="16" height="16" border="0" alt="Pick a date"
                                                onclick="javascript:NewCal('availDate','MMddyyyy',false,12);"
                                                align="bottom">
                                        </td>
                                </tr>

                                <tr style="height: 15px; border-bottom-color: transparent; border-bottom-width: 0;">
                                        <td style="border: hidden;" colspan="3"><b>Open Date:</b>
                                                <input name="openDate1" type="Text" id="openDate1" class="calText" size="25" value="01/30/2013"
                                                readonly="readonly" />&nbsp;<img src="/SpringApp6/images/cal.gif"
                                                width="16" height="16" border="0" alt="Pick a date"
                                                onclick="javascript:NewCal('openDate','MMddyyyy',false,12);"
                                                align="bottom">
                                        </td>
                                </tr>

                                <tr style="height: 15px; border-bottom-color: transparent; border-bottom-width: 0;">
                                        <td style="border: hidden;" colspan="3"><b>Close Date:</b>
                                                <input name="closeDate1" type="Text" id="closeDate1" class="calText" size="25" value="01/30/2013"
                                                readonly="readonly" />&nbsp;<img src="/SpringApp6/images/cal.gif"
                                                width="16" height="16" border="0" alt="Pick a date"
                                                onclick="javascript:NewCal('closeDate','MMddyyyy',false,12);"
                                                align="bottom">
                                                <br><br>
                                                <!-- <input type="button" value="Close Window" onclick="javascript:window.close()"> -->
                                        </td>
                                </tr>
                        </table>
                        <input type="submit" value="Submit Collection Edits"/> &nbsp;
                        <input type="button" value="test" onclick="javascript:alert('hey');"/>
                        <!-- END EDIT -->
                        <!-- <table class="gridtable" style="width: 100%">
                        </table> -->
                        </form>
                        <!-- <table style="width: 100%;">
                        <tr style="height: 20px;"></tr>
                        </table> -->
                        </td>
                        <!--end mainContent-->
                </tr>
                <!-- footer -->

                <!-- footer -->
        </tbody>
</table>
        <div id="copyright" align="center">

         <div id="copyright">

        </div>
    <script>
//     these two alert calls
    alert('footer');
    alert('footer next');
//     these functions aren't
        window.preloadDropdownBoxes();
        document.getElementById('future').selectedIndex = 2;
        window.alert('document ready on bottom');
    </script>
</body>
</html>
于 2013-01-31T04:47:44.140 に答える
1

html を作成しましたので、以下を参照してください。クロムとIEで動作します。すべてのアラートは正常に機能しています。

<html>

<head>

<script type="text/javascript">

    alert('alert1');
    window.preloadDropdownBoxes();

function preloadDropdownBoxes() {
    //preload function alert not calling
    alert('preload function called');
    //mapping vars to java variables
    var sYear = '<%=sYear%>';
    var collectionPeriod = '<%=collectionPeriod%>';
    var submission = '<%=submission%>';
    var availDate = '<%=availDate%>';
    var openDate = '<%=openDate%>';
    var closeDate = '<%=closeDate%>';
    //these are time generated values based on calendar instance
    var pastTwoYear = '<%=pastTwoYear%>';
    var pastYear = '<%=pastYear%>';
    var currentYear = '<%=currentYear%>';
    var futureYear = '<%=futureYear%>';
    //change selectedIndex values if dropdown in JSP has "pastTwoYear"
    if (sYear == pastTwoYear) {
        document.getElementById('pastTwoYear').selectedIndex = 0;
    } else if (sYear == pastYear) {
        document.getElementById('past').selectedIndex = 0;
        alert(sYear + '0');
    } else if (sYear == currentYear) {
        document.getElementById('current').selectedIndex = 1;
        alert(sYear + '1');
    } else if (sYear == futureYear) {
        document.getElementById('future').selectedIndex = 2;
        alert(sYear + '2');
    } else if(sYear == futureTwoYear) {
        document.getElementById('futureTwoYear').selectedIndex = 3;
        alert(sYear + '3');
    }
} 


function preselectMyItem(value)
{

    alert("Selected value is == "+value);

}

</script>


</head>
<body>


<table>

<tr>

<form action="#" method="GET">
<td>select year</td>
<td><select name="sYear1" id="sYear1" onchange="javascript:preselectMyItem(this.value);">
                        <option value="past">past</option>
                        <option value="current">current</option>
                        <option value="future">future</option>
                    </select>
</td>


</form>

</tr>

</table>



</body>

</html>

実行時にjspページにエラーがないことを確認してください。

于 2013-01-31T03:39:39.680 に答える