Passing JS with Ajax

[AshtonHogan]

Hi,

I have an ajax script that sends a request to a servlet for information to be inserted into a table cell. The servlet then handles the request and replies with something like this:

(I took the liberty of removing all the out.println tags)

<script language='javascript' src='whiteWine.js'></script>
                <table align='center' border='0'>
                <tr>
                <td align='center'>
                <img src='Images/Buttons/Small/left.png' id='leftButton' onclick='prevPicture()' onMouseOver="changeOver('leftButton')" onMouseOut="changeOut('leftButton')" >
                <img src='Images/Buttons/Small/right.png' id='rightButton' onclick='nextPicture()' onMouseOver="changeOver('rightButton')" onMouseOut="changeOut('rightButton')" >
                </td>
                </tr>
                <tr>
                <td colspan='2' align='center'>
                <img id='mainPicture' src='Images/Wines/White Wines/whiteWine01.png' />
                </td>
                </tr>

For some reason, however, all the scripts functions cannot be found on the page. If I attach the

<script language='javascript' src='whiteWine.js'></script>

on the page then the functions work, but they are used as polymorphism and incorrect information is shown. (There are 3 different scripts with the same named functions, but different implementations).

Is there a reason why ajax can't send across scripts?

Thanks,
-Ashton

[ShawnCplus]

Post the code that handles the response from the servlet.

[AshtonHogan]

Hi,

I posted the code that handles the servlet response above, I just took out the out.println tags. Below is the servlet's code WITH the out.println tags:

if (requestType.equals("whiteWineSelection")) {
                out.println("<script language='javascript' src='whiteWine.js'></script>");
                out.println("<table align='center' border='0'>");
                out.println("<tr>");
                out.println("<td align='center'>");
                out.println("<img src='Images/Buttons/Small/left.png' id='leftButton' onclick='prevPicture()' onMouseOver=\"changeOver('leftButton')\" onMouseOut=\"changeOut('leftButton')\" >");
                out.println("<img src='Images/Buttons/Small/right.png' id='rightButton' onclick='nextPicture()' onMouseOver=\"changeOver('rightButton')\" onMouseOut=\"changeOut('rightButton')\" >");
                out.println("</td>");
                out.println("</tr>");
                out.println("<tr>");
                out.println("<td colspan='2' align='center'>");
                out.println("<img id='mainPicture' src='Images/Wines/White Wines/whiteWine01.png' />");
                out.println("</td>");
                out.println("</tr>");
                out.println("</table>");
            }

Thanks,
-Ashton.

[ShawnCplus]

I meant the Javascript code that is handling the response FROM the servlet. Not the Java code that is providing the response.

[AshtonHogan]

Oh! Sorry, here:

images = new Array(5);
            images[0] = "Images/Wines/White Wines/whiteWine01.png";
            images[1] = "Images/Wines/White Wines/whiteWine02.jpg";
            images[2] = "Images/Wines/White Wines/whiteWine03.jpg";
            images[3] = "Images/Wines/White Wines/whiteWine04.jpg";
            images[4] = "Images/Wines/White Wines/whiteWine05.jpg";
            var size = images.length;
            var index = 0;
            function nextPicture()	{
                if (index == size - 1) {
                    index = -1;
                }
                index++;
                document.getElementById("mainPicture").src = images[index];
            }
            function prevPicture() {
                if (index == 0) {
                    index = size;
                }
                index--;
                document.getElementById("mainPicture").src = images[index];
            }
            function changeOver(object) {
                if (object == "leftButton") {
                    document.getElementById("leftButton").src = "Images/Buttons/Small/leftOn.png";
                } else if (object == "rightButton") {
                    document.getElementById("rightButton").src = "Images/Buttons/Small/rightOn.png";
                }
            }
            function changeOut(object) {
                if (object == "leftButton") {
                    document.getElementById("leftButton").src = "Images/Buttons/Small/left.png";
                } else if (object == "rightButton") {
                    document.getElementById("rightButton").src = "Images/Buttons/Small/right.png";
                }
            }