Ajax refresh removing PHP variable?

red_ice

hey,

Im building a very basic message box and I've hit a wall. Its nothing to do with DB queries or anything - that stuff is going fine... Its an Ajax update that is the problem.

Every 2 seconds, anything within <div id=messagebox>*here*</div> will be refreshed. And it is! But when I store a variable, such as $userAlias; in there, it stays for the 2 seconds, then gets removed, which means the ajax is working, but not entirely!

This particular variable is being used in multiple includes around the site, but it is only bugging here when there is an Ajax refresh.

In the index.php the file is being stored in $_SESSION. Or am I arse about tit here?

Cheers.

Here is a copy of the ajax file
http://www.wobblemedia.com/files/ajax.txt

Here is all I need to stay on screen
http://www.wobblemedia.com/files/mess.txt

Aswerty

Line 53 has a stray }

Something like chrome's developer tools would catch that no bother.

Edit: Woops think I picked that up wrong, didn't notice the last function was seperate so it is not that.

Giblet

What happens if you open /messagebox.php in a new browser window? The variable probably has no scope, is it defined in a header?

red_ice

Aswerty wrote: »

Line 53 has a stray }

Something like chrome's developer tools would catch that no bother.

Edit: Woops think I picked that up wrong, didn't notice the last function was seperate so it is not that.

well the code works fine, im using that ajax script elsewhere with a few name changes and it is refreshing that area of the page with no problems at all, but there is no need for a variable within that code.

the code in the second box however does need a variable, and it loads, but after 2/5 seconds (not sure on what the refresh is) the variable is removed, so the ajax is doing its thing alright, but its not keeping the variable in there.

I managed to covert the php variable into a javascript variable, and pass it into the query that is being sent, but even as javascript that variable is being removed when the page refreshes.

red_ice

Giblet wrote: »

What happens if you open /messagebox.php in a new browser window? The variable probably has no scope, is it defined in a header?

Didnt try it, ill give that a go when i get back to the computer, but i am assuming it will be displayed as i have it stored in session.

Im new to this stuff tho so i could very well be wrong!

DonkeyStyle \o/

document.getElementById(divid).innerHTML=xmlHttp.responseText;

If you're using innerHTML you'll overwrite everything in the div, including the php echo.
php will go first and the .innerHTML change only triggers after 2 seconds.
You could always grab the contents of the div first and prepend it to the response text.
eg.

var existingText = document.getElementById(divid).innerHTML;
document.getElementById(divid).innerHTML = existingText + xmlHttp.responseText;

Or maybe better yet have $userAlias echo'ed to another DOM element and avoid overwriting it with innerHTML.
[PHP]
<div id="messagebox">

<div id="aliasBox">
<?php echo $userAlias;?>
</div>

<div id="message"></div>

</div>
[/PHP]

Or could you also return $userAlias inside the response text? I'm more of a jquery & json guy, so I'm not 100% sure what's going on here :pac:

Giblet

The page is already rendered with the variable outputted, the ajax should retrieve the page with the variable outputted also, but doesn't. It most likely isn't a ajax issue as such, just that the messagecontent.php the ajax is trying to load doesn't have the varriable in context.

red_ice

It turns out both sections are working perfectly, only not together! If i comment out one box the other works and vise versa - typical!

I have to store the data as a JSON array apparently. So that's a new set of things to learn altogether.

Giblet

A JSON array is just a serialized JavaScript array.
ie: "[1,2]"

red_ice

Hey, just an update on this

I managed to get it working using a different ajax script - Thanks for the help with everything, appreciated!

Aswerty

red_ice JSON is a must when implementing AJAX if you're not using XML. As you've probably already noticed it isn't particularly complex and you can on modern browsers convert JavaScript objects to JSON, see http://www.json.org/js.html.

Also http://jsonlint.com/ is great if you're manually creating or manipulating JSON objects.

red_ice

boom!

function AJAX(){
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
}

// Timestamp for preventing IE caching the GET request (common function)

function fetch_unix_timestamp()
{
 return parseInt(new Date().getTime().toString().substring(0, 10))
}

////////////////////////////////
//
// Refreshing the DIV gameDiv
//
////////////////////////////////

function refreshInvites(){

// Customise those settings

var seconds = 2;
var divid = "divName1";
var url = "page1.php";

// Create xmlHttp

var xmlHttp_one = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_one.onreadystatechange=function(){
if(xmlHttp_one.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
setTimeout('refreshInvites()',seconds*1000);
}
}
xmlHttp_one.open("GET",nocacheurl,true);
xmlHttp_one.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshInvites()',seconds*1000);
}

////////////////////////////////
//
// Refreshing the standard games
//
////////////////////////////////

function refreshstandard(){

// Customise those settings

var seconds = 2;
var divid = "divName2";
var url = "page2.php";

// Create xmlHttp

var xmlHttp_two = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('refreshstandard()',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshstandard()',seconds*1000);
}

////////////////////////////////
//
// Refreshing the messagebox
//
////////////////////////////////

function refreshmessagebox(){

// Customise those settings

var seconds = 2;
var divid = "divName3";
var url = "page3.php";

// Create xmlHttp

var xmlHttp_three = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_three.onreadystatechange=function(){
if(xmlHttp_three.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_three.responseText;
setTimeout('refreshmessagebox()',seconds*1000);
}
}
xmlHttp_three.open("GET",nocacheurl,true);
xmlHttp_three.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshmessagebox()',seconds*1000);
}