Retrieving data from a query to load it in a JavaScript var

Question

I'm using Ajax/JQuery to send a var ($name) in a form to page1.php to page2.php without refreshing the page; it is working; it send me the var $name from page 1 to page2.php when I click the submit button. I'm using a JavaScript lib to make charts (amcharts), and it have a script that needs to load the data in a var (called chartData), and that data is the result of a query that prints it in a JSON format:

Page1.php:

<script>
var chart;

// create chart
AmCharts.ready(function() {

// load the data
var chartData = AmCharts.loadJSON('http://localhost/Proyect/chart.php');
....

Page2.php (chart.php)

$name2=$_POST['name1'];

$link = mysqli_connect("localhost", "root", "", "Name") or die("Error " . mysqli_error($link)); 

if ($resultado = mysqli_query($link, "SELECT DATETIME, Name, Ineffective_Attempts, Call_Setup_Success_Rate
FROM adicional
WHERE BSC ='$name2'
GROUP BY DATETIME
ORDER BY DATETIME")) {

if ( !$resultado ) {
// Nope
$message  = 'Invalid query: ' . mysql_error() . "\n";
$message .= 'Whole query: ' . mysqli_query;
die( $message ); 
}

$prefix = '';
echo "[\n";
while ( $row = $resultado->fetch_assoc() ) {
echo $prefix . " {\n";
echo '  "DATETIME": "' . $row['DATETIME'] . '", ' . "\n";
echo '  "Ineffective_Attempts": ' . $row['Ineffective_Attempts'] . ', ' . "\n";
echo '  "Call_Setup_Success_Rate": ' . $row['Call_Setup_Success_Rate'] . '' . "\n";
echo " }";
$prefix = ", \n";
}
echo "\n]";

$resultado->close();
}

mysqli_close($link);
?>

It simply executes a query to my database and prints the result like a JSON format. The var chartData just gets the result of that print to build the chart.

The point is, the data which result of the query on page2.php (chart.php), load it in that JavaScript var (chartData) in page1.php so it can build me the chart.

Page1.php form

<form id="form" name="form">
<h3>Fill the name!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<input id="submit" type="button" value="Submit">
</form>         

In this form someone can type a name; when they press the submit button it will get that name with an ajax/jquery function to send that like a variable to the page2.php (chart.php). The function in JavaScript is:

$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();

if (name == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored     in database.
$.post("chart.php", {
name1: name
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields

});
}
});
});

In the function(data) if I put an alert(data); it shows me the result of the query in page2.php (chart.php) when I press the button "submit".

Well, like I said, I need the

var chartData = AmCharts.loadJSON('http://localhost/Proyect/chart.php');

Load or get the result of the data when I click the button "submit", so it can make me the chart.

After I click in "aceptar", the page1.php does not show me the chart, because it's like the var chartData does not get/load the data, or the data just like "erase" cause the var $name is not like keep "living" or something like that

I don't know if I have to add something in the fuction(data) or what I have to do. I have to work with session to keep alive the var $name in the page2.php (chart.php)? Then the var chartData can load me the the result of the query?

I don't know if the tittle is the right one but I really don't know how to name it.

Answer 1

I'm not 100% sure what all the moving parts you have going on are, but I think you just want to change your post to this:

$.post("chart.php", {name1: name},
    function(data) {
    chartData = AmCharts.loadJSON(data);
    $('#form')[0].reset(); // To reset form fields
});

When you're calling the PHP file directly, you're doing so irrespective of any data you sent to it earlier: That is, you're just calling the file directly, with no POST/GET query variables. When you use POST, you're not actually storing any information on the server unless your code is set up to do so; in your case, you're just emitting JSON. Since you want that JSON passed through your function, call it in the success handler of your submit function.