php change query with jquery

james182

Hi,

I have a flot chart that pulls the info from a DB. I also have a dropdown menu which i want to update the flot chart by which ever option is selected.

/* DB Table

test_id | test_day | test_number | test_cat

1 | 5 | 1500 | week1
2 | 6 | 1200 | week1
3 | 7 | 1000 | week2

Page: test.php

<?php
// Setup Our Connection Vars
include 'connect_db.php';

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>test</title>

<script type="text/javascript" src="_js/jquery-1.4.2.min.js"></script>
<script src="_js/flot/jquery.flot.min.js" type="text/javascript" charset="utf-8"></script>
<script src="_js/excanvas.min.js" type="text/javascript" charset="utf-8"></script>

    <script>
$(document).ready(function(){ 
    $("#item_select").change(function () {
        var str = "";            
        $("select option:selected").each(function () {
            str += $(this).val();
        });
    $.post("test.php", { data: str });
    $("#userarea").html(str);
   }).change();
});
</script>

</head>
<body>

<?php
echo 'look: '.$_POST['data'];

function widget_show_graph() {  

  $data = $_POST['data'] == '' ? 'week1' : $_POST['data'];
  $sql = "SELECT * FROM tbl_test WHERE test_cat = '$data' ORDER BY test_id ASC";
  $results = mysql_query($sql) or die(mysql_error());

  // Initialize array
  $dataset1 = array();

  // Loop through the returned data
  while($r = mysql_fetch_assoc($results)){
    // For plotting graph axis order X, Y   

    $dataset1[] = array($r['test_day'], $r['test_number']);
 }
  /*foreach ($results as $value) {
    // For plotting graph
    $dataset1[] = array( $report_id, $value->report_number );
  }*/

  //Output javascript
  echo '<script type="text/javascript">
     $(function () {
     //put array into javascript variable
      var dataset1 ='. json_encode($dataset1) . ';

  //declare data source
  var data = [{
    data: dataset1,
    lines: { show: true},
    points: { show: true },
    label: "Reports"
  }];

  //choose options       
  var options = {
    legend: {  
         show: true,  
         margin: 10,  
         backgroundOpacity: 0.5  
    },  
    points: {  
         show: true,  
         radius: 3  
    },  
    lines: {  
         show: true  
    }
  };    

  //plot the graph

    var plotarea = $("#plotarea");  
    plotarea.css("height", "250px");  
    plotarea.css("width", "500px");  
$.plot(plotarea , data, options);
  });

</script>';
  }
echo widget_show_graph();
?>
<form action="#" method="post">
<select id="item_select" name="item"> 
    <option>Select an Item</option> 
    <option value="week1" selected="selected">Week 1</option> 
    <option value="week2">Week 2</option> 
</select>
</form>


<div id="plotarea"></div>
<div id="userarea"></div>


</body>
</html>

dagon

the name attribute in your form is populated as the post key, you have data when you want item or you could do it the other way around.

james182

hi
i made the change data to item but it's still not working ...

dagon

post your new code

james182

here it is.

<?php

// Setup Our Connection Vars
include 'connect_db.php';


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Sutherland Shire Council</title>

<script type="text/javascript" src="_js/jquery-1.4.2.min.js"></script>
<script src="_js/flot/jquery.flot.min.js" type="text/javascript" charset="utf-8"></script>
<script src="_js/excanvas.min.js" type="text/javascript" charset="utf-8"></script>

    <script>
$(document).ready(function(){ 
    $("#item_select").change(function () {
        var str = "";            
        $("select option:selected").each(function () {
            str += $(this).val();
        });
    $.post("test.php", { item: str });
    $("#userarea").html(str);
   }).change();
});
</script>

</head>
<body>

<?php
echo 'look: '.$_POST['item'];

function widget_show_graph() {  

  $data = $_POST['item'] == '' ? 'week1' : $_POST['item'];
  $sql = "SELECT * FROM tbl_test WHERE test_cat = '$data' ORDER BY test_id ASC";
  $results = mysql_query($sql) or die(mysql_error());

  // Initialize array
  $dataset1 = array();

  // Loop through the returned data
  while($r = mysql_fetch_assoc($results)){
    // For plotting graph axis order X, Y   

    $dataset1[] = array($r['test_day'], $r['test_number']);
 }
  /*foreach ($results as $value) {
    // For plotting graph
    $dataset1[] = array( $report_id, $value->report_number );
  }*/

  //Output javascript
  echo '<script type="text/javascript">
     $(function () {
     //put array into javascript variable
      var dataset1 ='. json_encode($dataset1) . ';

  //declare data source
  var data = [{
    data: dataset1,
    lines: { show: true},
    points: { show: true },
    label: "Reports"        
  }];

  //choose options       
  var options = {
    legend: {  
         show: true,  
         margin: 10,  
         backgroundOpacity: 0.5  
    },  
    points: {  
         show: true,  
         radius: 3  
    },  
    lines: {  
         show: true  
    },
    xaxis: {
       tickDecimals: 0
    },
    yaxis: {
       tickDecimals: 0
    }
  };    

  //plot the graph

    var plotarea = $("#plotarea");  
    plotarea.css("height", "250px");  
    plotarea.css("width", "500px");  
$.plot(plotarea , data, options);
  });


</script>';
  }
echo widget_show_graph();
?>
<form action="#" method="post">
<select id="item_select" name="item"> 
    <option>Select an Item</option> 
    <option value="week1" selected="selected">Week 1</option> 
    <option value="week2">Week 2</option> 
</select>
</form>


<div id="plotarea"></div>
<div id="userarea"></div>


</body>
</html>

james182

any help would be appreciated. 🙂