Following dropdown:
<select id='dropdown' name='dropdown' onchange='showChart(this.value)'>
<option value="1">Foo</value>
<option value="2">Bar</value>
</select>
Calls this javascript function onchange:
<script type="text/javascript">
function showChart(str1) {
if (str1 == "") {
document.getElementById("chartContainer").innerHTML = "";
return;
}
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("chartContainer").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "../ajaxpage/chart.php?charttype=" + str1);
xmlhttp.send();
}
</script>
chart.php?charttype looks like this:
<?php
$charttype = $_GET['charttype'];
if ($charttype == "1") {
echo "<p>test1</p>";
echo "<script type='text/javascript'>
alert('test1');
</script>";
} else {
echo "<p>test2</p>";
echo "<script type='text/javascript'>
$(document).ready(function() {
alert('test2');
});
</script>";
}
?>
Everything seems to work. The test1 and test2 in paragraph tags are rendered correctly in the graphContainer div onchange of the dropdown. However, the javascript is not executing. How come generated javascript does not execute, and how do I fix this?
Thanks.
EDIT
Here is the extremely foul (but working) workaround:
<img src="../images/loaded.gif" alt=""
onload="Code To Execute Here;this.parentNode.removeChild(this);" />
JavaScript is not evaluated with innerHTML.
Related
<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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
}
</script>
Code is working 100% but my problem is in script in place of getuser.php i want to use action for example "action=records" . what should i change
I am trying to create a ajax function to just reload a <div> and not the entire page.
What is working:
-during writing in the input field the div is reloaded after every character correctly.
What is not working:
-when the input field is complete empty again, it is not showing the whole entries I have in the database.
this is what I have in the php file where the div is:
function showGames(str) {
if (str == "") {
document.getElementById("searchgame").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("show").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","searchgame.php?game="+str,true);
xmlhttp.send();
} }
this is what I have in the search.php
<?php
include 'test/database.php';
$pdo = Database::connect();
if($_GET['game'] == "") {
$sql="SELECT * FROM games WHERE active=1";
echo "<script type='text/javascript'>alert('Should be empty')</script>";
} else {
$q = $_GET['game'];
$sql="SELECT * FROM games WHERE gamenamelong LIKE '%".$q."%'";
}
$stmt = $pdo->prepare($sql);
$stmt->execute();
$gameResults = $stmt->fetchAll(PDO::FETCH_ASSOC);
$rowCount1 = count($gameResults);
Is anybody able to help me?
Thank you!
since we don't know how your form looks like, and what calls the function showGames how, I can only give a vague answer. But your main problem/misstake should be solved with that:
In your function showGames you never hit the ajax if the search string is empty, so you can't get back all results.
So I suggest to change that function like so:
function showGames(str) {
if (str == "") {
document.getElementById("searchgame").innerHTML = "";
//remove that: return;
}
// remove the 'else { '
// now you allways hit the ajax
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("show").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","searchgame.php?game="+str,true);
xmlhttp.send();
// remove closing bracket of if-else: '}'
}
getsubcat.php
<?php
include("config.php");
error_reporting(0);
$checkedValue=$_GET['checkedValue'];
$options= "";
$s=mysql_query("SELECT * FROM `sub_category` INNER JOIN `category` on sub_category.cat_id=category.cat_id where category.cat_name='$checkedValue'");
while($rows=mysql_fetch_array($s))
{
$subcategory=$rows['sub_cat_name'];
echo '<input name="sub_category" type="checkbox" class="checkbox_check1" onclick="select_subcatinfo('.$subcategory.')" id="checkbox_check1'.$subcategory.'" value="'. $subcategory.'" > '.$subcategory.'<br /><br />';
}
?>
This is my php coding which ll be loaded through ajax in another page.. Below is my ajax script.
Ajax Script
function select_subcatinfo(name)
{
$("#wait").css("display","block");
var checkedValue1 = name;
if( $("#checkbox_check1"+name).is(':checked') )
{
var xmlhttp;
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)
{
$("#wait").css("display","none");
data = xmlhttp.responseText.split("[BRK]");
document.getElementById("DisplaySubcat").innerHTML = data[0]+" "+data[1];
}
}
xmlhttp.open("GET","getSubcatValue.php?checkedValue1="+checkedValue1,true);
xmlhttp.send();
}
else
{
$("#wait").css("display","none");
}
}
</script>
But inside that echo statement this function is not working.. any help here . thankss
Don't use inline Javascript, use jQuery to bind the event handler:
$(document).ready(function() {
$(".checkbox_check1").click(function() {
if (this.checked) {
$("#wait").show();
$.get('getSubcatValue.php', { checkedValue1: this.value }, function(response) {
var data = response.split('[BRK]');
$("#DisplaySubcat").text(data[0] + ' ' + data[1]);
$("#wait").hide();
});
}
});
});
I'm really not trying to answer this...just cleaned up the op's PHP
<?php
require("config.php");
error_reporting(0);
$checkedValue = $_REQUEST['checkedValue'];
$options = "";
$s=mysql_query("SELECT * FROM `sub_category` INNER JOIN `category` on sub_category.cat_id=category.cat_id where category.cat_name='$checkedValue'");
while($rows=mysql_fetch_array($s))
{
$subcategory=$rows['sub_cat_name'];
echo '<div><input name="sub_category" type="checkbox" class="checkbox_check1" onclick="select_subcatinfo('.$subcategory.')" id="checkbox_check1'.$subcategory.'" value="'. $subcategory.'" > '.$subcategory.'<br /><br /></div>';
}
?>
I have the following code which works great:-
$('.ajax a').click(function() {
getpageajax(this.href);
return false;
});
function getpageajax(getpage) {
if(getpage == "") {
//SET ERROR?
document.getElementById("main").innerHTML = "";
return;
}
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("main").innerHTML = xmlhttp.responseText;
}
}
var urlarray = getpage.split('/');
location.hash = urlarray[urlarray.length-1];
xmlhttp.open("GET", "includes/AJAXgetpage.php?getpage=" + getpage, true);
xmlhttp.send();
};
Only problem is that I have no idea how to get then read the anchor links I create (e.g. #contact-us) to create bookmarkable pages.
I tried to do a solution based around the following but it seems less than ideal
<script>
var query = location.href.split('#');
document.cookies = 'anchor=' + query[1];
<?php if (!$_COOKIE['anchor']) : ?>
window.location.reload();
<?php endif; ?>
<?php
echo $_COOKIE['anchor'];
?>
To get the hash, other than your initial example, you can use window.location.hash
// example url - http://www.mysite.com/blog/post#comments
var hash = window.location.hash; // = "#comments"
You can use replace to get rid of the leading # if required.
Right now I'm struggling to get this simple PHP AJAX request to work.
<html>
<head>
<script type="text/javascript">
function getSuggestions(type){
if(type == "")
{
document.getElementById("entries").innerHTML="test"
return;
}
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("entries").innerHTML=xmlHttp.response;
}
}
xmlHttp.open("GET","getData.php?status="+type,true);
xmlHttp.send();
}
</script>
</head>
<body>
<div id="A" onclick='getSuggestions("A")'>Click for A</div>
<div id="P" onclick='getSuggestions("P")'>Click for P</div>
<div id="R" onclick='getSuggestions("R")'>Click for R</div>
<div id="entries"></div>
</body>
</html>
Below is getData.php
<?php
$status = $_GET["status"];
echo $status;
?>
Everytime I click on any of the tags I get "undefined" in the "entries" tag. Could anybody explain why it's undefined?
use xmlHttp.responseText
This is how I handle AJAX. Essentially an example of akellehe's answer
function getSuggestions(type){
if(type == "") {
document.getElementById("entries").innerHTML="test"
return;
}
var r = getXmlObject();
var url= "getData.php?status="+type;
if (r.readyState == 4 || r.readyState == 0) {
r.open("POST", url, true);
r.onreadystatechange = function (){
if (r.readyState == 4) {
document.getElementById("entries").innerHTML= r.responseText;
}
};
r.send(null);
}
}
////////////////////////////////////
function getXmlObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');
}
}