onclick -> mysql query -> javascript; same page

Question

I need button to begin a mysql query to then insert the results into a javacript code block which is to be displayed on the same page that the button is on. mysql queries come from the values of drop-down menus.

Homepage.php contains

two drop down menus

div id='one' to hold the results javscript code block

a button to stimulate the mysql query to be displayed in div id ='one' through Javascript

flow of the process is as such
1. user chooses an option from each drop down
2. when ready, the user clicks a button
3. the onclick runs a mysql query with selections from the drop down menu.
4. send the results as array from the mysql query into the javascript code block
5. display the results in div id ='one'

all of this needs to happen on the same page!

The problem I am having is that as soon as the page is loaded, the javascipt is static. I am unable to push the mysql results into the javascript on the page which I need it to appear on. Having everything on the same page is causing trouble.

I'm not looking for the exact code laid out for me, just a correct flow of the process that should be used to accomplish this. Thank you in advance!

I've tried

using both dropdowns to call the same javascript function which used httprequest. The function was directed towards a php page which did the mysql processing. The results were then return back through the httprequest to the homepage.

I've tried to save the entire Javascript code block as a php variable with the mysql results already in it, then returning the variable into the home page through HTTPRequest, thinking I could create dynamic javascript code this way. Nothing has worked

What have you tried? If I understand the question correctly, standard Ajax should be able to do what you want, including adding block of JavaScript code onto the page. You may need to do a bit more to get the DOM to work properly after the page is updated, but the question is whether you've reached that stage yet. — Ynhockey
– Ynhockey, Commented Sep 6, 2012 at 17:04

Josh · Accepted Answer · 2012-09-06 17:02:47Z

4

You need to use a technology called AJAX. I'd recommend jQuery's .ajax() method. Trying to do raw XHR is painful at best.

Here is how you'll want to structure your code:

Load the page.
User chooses an option.
An onChange listener fires off an AJAX request
The server receives and processes the request
The server sends back a JSON array of options for the dependent select
The client side AJAX sender gets the response back
The client updates the select to have the values from the JSON array.

Basically, HTTP is stateless, so once the page is loaded, it's done. You'll have to make successive requests to the server for dynamic data.

answered Sep 6, 2012 at 17:02

Josh

12.6k12 gold badges77 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pluda · Accepted Answer · 2012-09-06 17:05:27Z

0

Use AJAX,

example

$.ajax({
    type: "POST",
    url: "yourpage.php",
    data: "{}",
    success: function(result) {
        if(result == "true") {
            // do stuff you need like populate your div
            $("#one").html(result);               
        } else {
            alert("error");
        }
    }
});

answered Sep 6, 2012 at 17:05

Pluda

1,4776 gold badges21 silver badges46 bronze badges

Comments

StaticVariable · Accepted Answer · 2012-09-06 17:26:51Z

0

For this purpose you need to learn ajax.This is used to make a request without reloading the page.so that you can make a background call to mysql

your code will be something like that

$("#submitbutton").live("click",function(){

$.ajax({url:"yourfile"},data:{$(this).data}).done(function(data){
//this data will in json form so decode this and use this in div 2
var x =$.parseJSON(data);
$("#div2").html(x.val());
})
})

and "yourfile" is the main file which connect to server and make a database request

answered Sep 6, 2012 at 17:26

StaticVariable

5,2934 gold badges26 silver badges46 bronze badges

Comments

brandon-estrella-dev · Accepted Answer · 2012-12-13 17:07:24Z

here is how I used an onchange method to stimulate a MYSQL query and have the Highchart display the result. The major problem was that the returned JSON array was a string that needed to be converted into an INT. The resultArray variable is then used in the data: portion of the highChart.

$(function(){
  $("#awayTeam").change(function(){ 
    $.ajax({
    type: "POST",    
    data: "away=" + $("#awayRunner").val(),
    dataType: "json",
    url: "/getCharts.php",
    success: function(response){
          var arrayLength = response.length;
          var resultArray = [];
          var i = 0;
          while(i<arrayLength){
              resultArray[i] = parseInt(response[i]);
              i++;
          }

In the PHP code, the array must be returned as JSON like this

echo json_encode($awayRunner);

Collectives™ on Stack Overflow

onclick -> mysql query -> javascript; same page

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related