Why does my table appear onload but not my chart? - javascript

So I have 2 functions, 1 to draw a chart, another to draw a table.
I did a
<body onload="getchart();gettable();">
but only the table gets drawn out onload!
So, I did a
<body onload="gettable();getchart();">
but oppositely, only the chart gets drawn out onload!
May I know how to draw both chart and table onload? Thank you~
My Codes down below (I did not include the server side php to mysql codes here) :
<script type="text/javascript">
function gettable(string,strings)
{
var a=string;
var b=strings;
if(a == null && b == null)
{
a = new Date().getFullYear();
b = "";
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("inputtable").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","GetTableData.php?q="+a+"&v="+b,true);
xmlhttp.send();
}
function getchart(str)
{
var b=str;
if(b == "")
{
b = new Date().getFullYear();
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("inputchart").innerHTML = xmlhttp.responseText;
var a=JSON.parse(xmlhttp.responseText);
ab=a[1];
cd=a[2];
ef=a[3];
gh=a[4];
//google.setOnLoadCallback(drawMouseoverVisualization());
drawMouseoverVisualization();
}
};
xmlhttp.open("GET","getData.php?q="+b,true);
xmlhttp.send();
}
function drawMouseoverVisualization() {
var barsVisualization;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Quarter');
data.addColumn('number', 'Frequency');
data.addRows([[1,ab],[2,cd],[3,ef],[4,gh]]);
var options={
hAxis: {title: 'Quarter'},
vAxis: {title: 'Frequency'},
trendlines: {0: {type: 'exponential', //type: 'polynomial',type: 'linear'
degree:3,
color: 'red'
}}
};
barsVisualization = new google.visualization.ScatterChart(document.getElementById('chart'));
barsVisualization.draw(data, options);
};
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
</head>
<body onload="getchart();gettable();">
<div id="inputchart" style="visibility: hidden"></div>
<form>
<select name="years" id="years" onchange="getchart(this.value)">
<?php
echo "<option>Select year</option>";
for ($i=2016;$i<date("Y")+10;$i++){
echo "<option value='$i'>$i</option>";
}
?>
</select>
</form>
<div id="chart"></div>
<form>
<input type="text" name="search" id="search" onkeyup="gettable(year.value,this.value)">
<select name="year" id="year" onchange="gettable(this.value,search.value)">
<?php
echo "<option value=2016>Select year</option>";
for ($i=2016;$i<date("Y")+10;$i++){
echo "<option value='$i'>$i</option>";}
?>
</select>
</form>
<div id="inputtable"></div>
</body>

You are using xmlhttp as a global variable.
Whichever function you run second overwrites the first value you assigned to it.
Avoid globals. Use local variables. Add var.

Perhaps you need a space in between the calling of the two functions.
http://www.htmlgoodies.com/beyond/javascript/article.php/3724571/Using-Multiple-JavaScript-Onload-Functions.htm
Otherwise you could create a function in your js that reads something like this:
function start () {func1(); func2();}
And just call start() when body is loaded.

Related

Get Smarty-formatted data from PHP script

My PHP script, that I call via XMLHttpRequest, executes a query and checks a condition, then outputs a HTML snippet with some Smarty code. When I try to insert that code in a <div> tag, either by calling the jQuery.html() function or by setting the innerHTML property, the Smarty code is printed as it is, thus not interpreted as Smarty code. How could I solve this problem?
Relevant code:
PHP Script:
<?php
$mysqli = new mysqli("localhost", "<<<SQL USERNAME>>>", "<<<SQL PASSWORD>>>", "<<<SQL DATABASE>>>");
$id = $_GET["idmf"];
$cat = $mysqli->query("<<<SQL QUERY>>>")->fetch_assoc()["category"];
if ($cat == $_GET["cat"])
echo 'blahblah';
?>
TPL file:
{foreach from=$manufacturers item=manufacturer name=manufacturers}
<div id="mffilter_{$manufacturer.id_manufacturer}"></div>
<script>
var xhttpf;
if (window.XMLHttpRequest)
{
xhttpf = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xhttpf = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttpf.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("mffilter_{$manufacturer.id_manufacturer}").innerHTML = this.responseText;
}
};
xhttpf.open("GET", "<<<ENDPOINT>>>.php?cat=food&idmf={$manufacturer.id_manufacturer}", true);
xhttpf.send();
</script>
Try replacing your TPL file code with the following code:
{foreach from=$manufacturers item=manufacturer name=manufacturers}
<div id="mffilter_"{$manufacturer.id_manufacturer}></div>
<script>
var xhttpf;
if (window.XMLHttpRequest)
{
xhttpf = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xhttpf = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttpf.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("mffilter_"{$manufacturer.id_manufacturer}).innerHTML = this.responseText;
}
};
xhttpf.open("GET", "<<<ENDPOINT>>>.php?cat=food&idmf="{$manufacturer.id_manufacturer}, true);
xhttpf.send();
</script>

ajax call can't retrieve data from database

i am new to ajax.Here i am trying to retrieve data from mysql database.But all i am getting here is an empty array and a notice saying undefined index q on line 2 .Can't figure out what might be the problem behind this.Any help will be appreciated.Here i am using a database which has three column to each row(id,name,age).
i am having an error .saying i am sending a request to getuser.php.Though my page name is callajax.php.From where this getuser.php coming from?It gives me desired output when i changed the file name to getuser.php.I don't understand.why callajax.php wouldn't work?
html:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","callajax.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">al zami rahman</option>
<option value="4">junayed hasan</option>
<option value="5">tapos alam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
callajax.php page:
$m=$_GET['q'];
$pdo=new PDO("mysql:host=localhost;dbname=ajax",'root','');
$conn=$pdo->prepare('SELECT age FROM people WHERE id=?');
$conn->bindValue(1,$m);
if($conn->execute()){
$result=$conn->fetchAll();
print_r($result);
}

show result dynamically in search box

I want a search box which shows the result just below it when I click the search button without reloading the page.
for this I've js function called ShowUsers(str)
like this
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
And a html form like this :
<form>
<input type="text" name="q"/>
<script type="text/javascript">var x = document.getElementById("q").value; </script>
<input type="button" value="search" onclick="showUser(x)">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
I've one php file to show the result called as GetUser.php
I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
so what can i do to show the data
Access document.getElementById("q").value directly in showUser function rather than passing x to showUser function.
function showUser() {
var str = document.getElementById("txtHint").value;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}

how to execute the javascript returned by AJAX response in the webpage (response = html+javascript)

my buyresult.php page is working properly when i give give the url as buyresult.php?q=Mysore
but the in response i get after ajax call(both html and javascript is response).. the javascript is not working... how to solve it.. I'm new to web programming. Please HELP..
I've googled and got the result as to use
new Ajax.Updater(divID,URL,{asynchronous:true,evalScripts: true});
but i don't know where to put this function
my index.php file is as follows :
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","buyresult.php?q="+str,true);
xmlhttp.send();
}
}
</script></head>
<body>
<label for="city">Enter City :</label><input class="w-input" id="city" type="text" placeholder="Enter the city name (required)" name="city" data-name="city" required="required" onchange="showUser(this.value)">
<div id="txtHint"><b>Results will be displayed Here...</b></div>
</body>

div onclick doesn't work when passing argument to the function

I have the following div:
echo '<div class="product_a" href="#" onclick="loadXMLDocprod("'.$data['num_prod'].'")">
<div clas="list_products"><table><tr><td style="max-width:380px; min-width:380px; text-align:left;"><strong>'.$data['designation'].'</strong></td>
<td><div class="status"><div class="mini-counts">Price : '.$data['prix_vente'].'$</div></div></td></tr></table>
<table><tr><td style="max-width:370px; min-width:370px; text-align:left;"><div class="post-thumb"><img src="'.$smallimg.'" alt="Top - Style 1" /></div></td><td><div class="views"><div class="mini-counts">'.$vu.'</div><div>Views</div></div></td>
<td><div class="votes"><div class="mini-counts">'.$data['qte_vendu'].'</div><div>Solde</div></div></td>
<td><div class="status"><div class="mini-counts">'.$qte.'</div><div>available</div></div></td></tr></table></div>
</div>';
I want to load another PHP page once the <div> is clicked. Here is the script I'm using:
function loadXMLDocprod(num_pro) {
var xmlhttp;
var page;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("right").innerHTML = xmlhttp.responseText;
}
}
page = 'product_o.php?num_prod=' + num_pro;
alert(page);
xmlhttp.open("GET", "page", true);
xmlhttp.send();
}
Thank you for your help
Change this line:
xmlhttp.open("GET","page",true);
to this:
xmlhttp.open("GET",page,true);
As you've tagged this question with jQuery, here's an implementation which avoids the use of outdated on- attributes and $.load():
echo '<div class="product product_a" href="#" data-num-prod="'.$data['num_prod'].'">" '
// and so on...
$('.product').click(function(e) {
e.preventDefault();
$('#right').load('product_o.php', { 'num_prod' : $(this).data('num-prod') });
});

Categories