avoid load of javascript onchange function on startup of jsp

Question

My <script></script> loads on startup with the onchange function ( onchangeFunction() ) with it. That means without the onchange event (selecting from drop down form) actually took place.

This means the function accessing null/unavailable variables end raising exception.

HTML

<td align="center" valign="top" class="reservation">
    <form name="showSelector">
        <h2 style="font-family:arial"> הזמנת כרטיסים: </h2>
        <select name="Theater" class="selectFirst" onchange="theaterChange()">
            <option value="999">theater...</option>

            <c:forEach var="theater" items="${theaters}" varStatus="iter">

                <option value="${theaters[iter.index].id}">"${theaters[iter.index].name}"    
                </option>

            </c:forEach>

        </select>
        <select name="Movie">
            <option>movie...</option>
        </select>
        <p></p>
        <input type="submit" value="continue">
    </form>
</td>

JavaScript

var group = new Array()
var temp = document.showSelector.Movie
var selectedTheater = -1;

function theaterChange() {
    selectedTheater = document.showSelector.Theater;
    var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
    var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;
    if (1 == 555) { //this is trying to avoid the function content, but debugger continues as if condition is true
        <% for (int i = 0; i < showIds.length; i++) { % >
            if ( <%= showAtTheater[i] %> == selcetedTheaterId) { <% MovieIdInSelectedTheater.add(showAtTheater[i]);
                idx = 0;
                boolean found = false;
                while (!found & idx < showAtTheater.length & idx < movieIds.length) {
                    if (showAtTheater[i] == movieIds[idx]) {
                        MovieNameInSelectedTheater.add(movieNames[idx]);
                        found = true;
                    } else {
                        idx++;
                    }
                } %>
            }
        <% } %>
        //...removed some function logic
        temp.options[0].selected = true
    }
}

servlet

out.write("<script>\n");
      out.write("var group=new Array()\n");
      out.write("\n");
      out.write("var temp=document.showSelector.Movie\n");
      out.write("var selectedTheater=-1;\n");
      out.write("\n");
      out.write("function theaterChange(){\n");
      out.write("\n");
      out.write("selectedTheater = document.showSelector.Theater;\n");
      out.write("var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;\n");
      out.write("//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;\n");
      out.write("\n");
 MovieNameInSelectedTheater.clear(); 
      out.write('\n');
 MovieIdInSelectedTheater.clear(); 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<showIds.length;i++ ){ 
      out.write("\n");
      out.write("        if (");
      out.print(showAtTheater[i]);
      out.write(" == selcetedTheaterId)\n");
      out.write("        {\n");
      out.write("            ");

            MovieIdInSelectedTheater.add(showAtTheater[i]);
            idx = 0;
            boolean found = false;
            while (!found & idx<showAtTheater.length & idx<movieIds.length){
                if (showAtTheater[i] == movieIds[idx] )
                    {
                    MovieNameInSelectedTheater.add(movieNames[idx]);
                    found = true;
                    }
                else {idx++;}
            }

      out.write("\n");
      out.write("        }\n");
      out.write("  ");
  } 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<MovieNameInSelectedTheater.size();i++){ 
      out.write("\n");
      out.write("    temp.options[");
      out.print(i);
      out.write("]=new Option(\"");
      out.print( MovieNameInSelectedTheater.get(i) );
      out.write("\",\"");
      out.print( MovieIdInSelectedTheater.get(i) );
      out.write("\")\n");
}
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("temp.options[0].selected=true\n");
      out.write("\n");
      out.write("}\n");
      out.write("\n");
      out.write("</script>");

browser side:

<script>
var group=new Array()

var temp=document.showSelector.Movie
var selectedTheater=-1;

function theaterChange(){

selectedTheater = document.showSelector.Theater;
var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;






        if (2 == selcetedTheaterId)
        {

        }









temp.options[0].selected=true

}

</script>

Please show us some code, and clarify your question. What variables are null/undefined? — Matt Ball, Apr 03 '11 at 17:08
@user690033: Select the code, then click the `{}` button just above the post editor. Or make sure your code is indented by at least 4 spaces. — Martijn, Apr 03 '11 at 17:36
Please show us the actual JavaScript code that gets generated by the JSP. — Matt Ball, Apr 03 '11 at 18:00
Thanks for the edit, but that's the opposite of what I asked you to show us. Show us the JavaScript that the browser sees. — Matt Ball, Apr 03 '11 at 18:07
OT: Why do you produce so many line breaks in your code? And why a `write` statement for any single one of these? — Felix Kling, Apr 03 '11 at 18:22
this is the servlet translated from jsp, you can just ignore it as it doesn't seem to add new info. — d w, Apr 03 '11 at 18:40

score 0 · Answer 1 · edited May 23 '17 at 11:47

You're expecting that Java/JSP and JavaScript runs in sync, line by line, in the webbrowser. This is untrue. Java/JSP runs at webserver and produces HTML/CSS/JS. Webserver sends it to webbrowser which in turn runs HTML/CSS/JS. If Java/JSP has done its task properly, you should not see any line of it in generated HTML/CSS/JS source. Webbrowser doesn't understand Java/JSP code anyway.

I understand that you want to be able to populate child/nested dropdowns. You'll have to take a totally different approach. There are basically 3 ways:

Let JavaScript submit the form during the onchange like onchange="submit()" and let Java/JSP dynamically print the desired <option> values for the child dropdown based on the selected value of the parent dropdown.
Let Java/JSP print all possible values in flavor of a JavaScript monster array and let JavaScript populate it based on the information provided by the array during the onchange like onchange="populateChild(this)".
Let JavaScript send an ajax request with the selected value as parameter to a servlet which in turn returns the values for the child dropdown based on the selected value and let JavaScript populate it. jQuery is very helpful in this.

More detailed code examples can be found in this answer.

thanks! without further reading, i am trying to understand if sending a request to the server and back means i need to refresh the page (wich i wish to avoid). — d w, Apr 04 '11 at 07:48

avoid load of javascript onchange function on startup of jsp

HTML

JavaScript

servlet

browser side:

1 Answers1