I am trying to load a php file using ajax and all is working perfectly in chrome.
but when using IE, the CSS in the php file is not working.
here are my codes for the AJAX:
function showUser() {
var skill = document.getElementById("skill").value
if ( skill == "" ) {
document.getElementById("txtHint").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("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + skill, true);
xmlhttp.send();
}
getuser.php has css codes that works and echos <img src = 'pics.jpg' class ='img_div'>
so again, it works with chrome but the css did not apply in IE.
Thanks,
James
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: '}'
}
by using javascript ajax i have passed the values to php page...
display the values after retrieving from database and print in ajax page...it displaying in alert page...but i need to display in ajax page....
ajax coding
<script>
function optionsAlert()
{
alert("call");
var xmlhttp;
var qw=document.getElementById('c').value;
var qw1=document.getElementById('c1').value;
var qw2=document.getElementById('unit33').value;
var qw3=document.getElementById('dept').value;
var qw4=document.getElementById('class').value;
alert(qw);
alert(qw1);
alert(qw2);
alert(qw3);
alert(qw4);
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)
{
alert(xmlhttp.responseText);
if(xmlhttp.responseText==1){
alert("name already Exists" );
return false;
}
else if(xmlhttp.responseText==0)
{
alert("name available");
document.login.submit();
}
}
}
var queryString = "?q=" + qw + "&q1=" + qw1 + "&q2=" + qw2 + "&q3=" + qw3 + "&q4=" + qw4;
xmlhttp.open("get",'ques.php' + queryString,true);
xmlhttp.send();
}
php page
<?php
include('connection.php');
if(($_GET['q']!='') && ($_GET['q1']!='') && ($_GET['q2']!='') && ($_GET['q3']!='') && ($_GET['q4']!=''))
{
$a= mysql_query("select * from unit1 where unit='".$_GET['q']."' and stopic='".$_GET['q1']."' and qtype='".$_GET['q2']."' and dept='".$_GET['q3']."' and class='".$_GET['q4']."'");
//$a= mysql_query("select * from unit1 where unit='unit1' and stopic='Subtopic1' and qtype='normal questions'");
if(mysql_num_rows($a)>0)
{
while($row=mysql_fetch_array($a))
{
$a1=$row['qno'];
$a2=$row['ques'];
$a3=$row['ch1'];
$a4=$row['ch2'];
$a5=$row['ch3'];
$a6=$row['ch4'];
$a7=$row['ans'];
echo $a1."<br>";echo $a2."<br>";echo $a3."<br>";echo $a4."<br>";echo $a5."<br>";echo $a6."<br>";echo $a7."<br>";
echo 1;
}
}
else
{
echo 0;
}
}
?>
Below the ajax coding create div element with id
in your ajax method
if(xmlhttp.responseText==1){
document.getElementById("id").innerHTML = "name already Exists";
return false;
}
else if(xmlhttp.responseText==0)
{
document.getElementById("id").innerHTML="name available";
document.login.submit();
}
"id" your own div id
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.');
}
}