Member Avatar for smarble53

First off, thank you for any help you can provide. If you can't help, thanks anyway.

I have a table that i need sorted. I can sort by the table header ascending and descending using a php mysql query. Thats not the issue.

I need to sort the table based on this situation:
the user has a lot of information in the table, and he only wants to see the results from the state, city, zip code, etc...how would i go about doing this with a dropdown menu? i have the first dropdown menu options as state, city, zip. how would i get the second meny to populate from the results in the database?

let me know if im not being clear on any of this. i dont know too much about javascript and jquery...

Thanks again!

  • 2 Contributors
  • 1 Reply
  • 65 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by feoperro
Member Avatar for feoperro

You're gonna have to use ajax for this... simply have an onload function or onclick function in a strategic position and then call an ajax method that calls a servlet to perform the necessary tasks.

Use this ajax code (This will go on the same page as your JSP/HTML page where the button resides):

<script type="text/javascript">
            function ajaxFunction() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else if (window.ActiveXObject) {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                else {
                    alert("Your browser does not support XMLHTTP!");
                }
                    xmlhttp.onreadystatechange=function() {
                        if (xmlhttp.readyState==4) {
   <!-- This is the very first cell in your table that holds your menu -->
                            document.getElementById("dropMenuTable").rows[0].cells[0].innerHTML=xmlhttp.responseText;
                        }
                    xmlhttp.open("POST","runMethods"+"?"+"status="+"getFromDB"+"&"+"dataRequired="+document.searchOptions.value,true);
                    xmlhttp.send(null);

                }
            }
        </script>

Use this Servlet:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        connect(request, response);
        if (request.getParameter("status").equals("getFromDB")) {
            connect(request, response);
        } 
    }

	        private void connect(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
		Statement statement = connection.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_UPDATABLE);
		ResultSet resultSet = statement.executeQuery("SELECT * FROM table");
            // Load JBBC driver "com.mysql.jdbc.Driver"
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            /* Create a connection by using getConnection() method that takes parameters of
            string type connection url, user name and password to connect to database. */
            connection = DriverManager.getConnection(connectionURL, "user", "pass");
            // check weather connection is established or not by isClosed() method
            if (!connection.isClosed()) {
                out.println("Successfully connected to " + "MySQL server using TCP/IP...");
            }
	    while (resultSet.next()) {
			out.println(resultSet.getInt(1));
			out.println(resultSet.getString(2));
		    }
		resultSet.close();
        } catch (Exception ex) {
            out.println("Unable to connect to database. " + ex);
        } finally {
            //out.close();
        }
    }

Then on your JSP/html page have the function like this:

<body onload="ajaxFunction();"></body>

Or

<input type="button" onclick="ajaxFunction();" />

It probably won't work if you copy it directly from here because I've just typed as I've gone along, so you will need to do some configurations first.

Regards,
-Ashton.

Edited by feoperro because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.