Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy The post function of my javascript code does not work as expected

    I have a question about javascript.

    I have to use the post function in the javascript codes located in the html file header to send data in the queryString variable to the autocom.jsp file located in the local server and then get data back from my local database using the callback function, function(data) { }.

    My problem is that when I input c in the input field of the html page, testing ok is displayed on the webpage, even when in my database I do not have a data in the last name column (called last in the database) which start by letter c. This should never have occurred since data.length >0 is not true in this particular case.

    Could somebody please help me with this issue?

    Thanks

    The html file is search.html below:

    Code:
    <html>
    
    <head> 
    
    <link href="styles.css" type="text/css" rel="stylesheet" />
    
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    
    
    <script type="text/javascript">
     function checkSubmit (thisForm) {
      if(thisForm.last.value=='') {
         alert('Please Enter Last Name');
         return false;
      } 
     }
    </script>
    
    
    
    <script type="text/javascript">
    function lookup(inputString) {
               if(inputString.length == 0) {
                  out.println("testing go");
               } else {
                    $.post("autocom.jsp", {queryString: "" +inputString+ ""}, function(data){
                        if(data.length >0) {
                           $('#suggestions').show();
                           $('#autoSuggestionsList').html(data);
                           $('#autoSug').html('<h1>testing ok</h1>');
                        }
                   });
                 }
     }
    </script>
    
    
    
    
    
    </head> 
    
    <body> 
    
    <form method="post" action="search.jsp" onsubmit="return checkSubmit (this);">
    Enter Last Name: <input type="text" name="last" value="" id="suggestions" id="autoSuggestionsList" onkeyup="lookup(this.value);" /><br>
    <input type="submit" value="Submit">
    </form>
    
    <p id="autoSug">  </p>
    
    
    <form method="post" action="home.html"> 
    <input type="submit" value="Back To Home">
    </form>
    
    
    </body>
    
    
    </html>
    Below is the autocom.jsp file:

    Code:
    <%@ page language="java" import="java.sql.*" %>
    
    <% response.setContentType("text/html");%>
    
    <%
    
    String str=request.getParameter("queryString");
    
    
    String connectionURL = "jdbc:mysql://localhost/jsptest";
    Connection con;
    Class.forName("com.mysql.jdbc.Driver").newInstance();
    con = DriverManager.getConnection(connectionURL, "root", "Dummy123");  // Get a Connection to the database
    String sql = "SELECT last FROM employees WHERE last LIKE ' " +str+  " % ' LIMIT 10 "; //Add the data into the database
    Statement stm = con.createStatement();
    stm.executeQuery(sql);
    ResultSet rs= stm.getResultSet();
     while (rs.next ()){
         out.println(  "<i onclick='fill("  +  rs.getString("last")  +   ");'>" +rs.getString("last")+ " </i>" );
     }
    
    
    %>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,713
    Thanks
    25
    Thanked 660 Times in 659 Posts
    I hope I got your file names back where they belong. I had to use my files to test this.
    FYI Two forms are hard to keep separated and you really don't need them. I used one form and a button.
    You use two IDs in this line
    Code:
    Enter Last Name: <input type="text" name="last" value="" id="suggestions" id="autoSuggestionsList" onkeyup="lookup(this.value);" /><br>
    You can't do that IDs have to be unique. I removed id="suggestions"
    The code below works, so if things don't go right it has to be in the autocom.jsp file, which I didn't trouble shoot. OR a fie name is wrong below.
    More code is needed to select a suggestion and place it in the <input> box.

    Code:
    <html>
    <head>
    <link href="styles.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
    <form method="post" action="search.jsp" onsubmit="return checkSubmit(this);">
    	Enter Last Name: <input type="text" name="last" id="autoSuggestionsList" onkeyup="lookup(this.value);" />
    	<br>
    	<input type="submit" value="Submit">
    </form>
    <button onclick="window.location.href = 'home.html';">Go Home</button>
    <p id="autoSug"></p>
    
    
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    function checkSubmit(thisForm) {
    	if(thisForm.last.value=='') {
    		alert('Please Enter Last Name');
    		return false;
    	}
    }
    function lookup(inputString) {
    	$.ajax({
    		url: "autocom.jsp",
    		type: "POST",
    		data: {name:inputString},
    		success: function(response) {
    			$('#autoSug').html(response);
    		}
    	});
    }
    </script>
    </body>
    <!--Removed id="suggestions" -->
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •