Sign in to follow this  
Eliia

[web] AJAX and images

Recommended Posts

Eliia    122
So I've been making this browser based game for a while and I am now fiddling around with AJAX. I have a screen and got ajax working, but I can't get ajax to make an image show? I can get it to work fine with text and document.writeln, but images are a no go? Could someone please post something. I can post my code if you want. It's all I want for Christmas :) Eliia

Share this post


Link to post
Share on other sites
ID Merlin    119
If you want code samples, you'll need to specify a language. Or, google is your friend. There must be a zillion samples of Ajax stuff out there by now.

Share this post


Link to post
Share on other sites
markr    1692
"make an image show" is rather nonspecific.

Generally speaking, you should not be using document.write.

All AJAX modification to the document happens after it's loaded, while document.write is only valid during loading (e.g. immediate code running in a script element, a function called for one, or opened with document.open).

AJAX apps generally modify the DOM rather than using document.write.

Making an image appear would typically be done by one of:
- Creating a node dynamically for the image, e.g. with document.createElement followed by adding the node to the DOM (e.g. using appendChild)
- Showing an existing element which was already present but styled to be invisible (e.g. visibility:hidden, or display:none)
- Changing the src property on an existing image to make it show a different image

Mark

Share this post


Link to post
Share on other sites
ID Merlin    119
Quote:
Original post by Tesseract
Look into the jQuery code library. It takes a lot of the guesswork out of AJAX stuff.

Instructions for using it are here: Visual jQuery.


I quickly scanned the site, but didn't find what the licensing arrangement is. Is the GPL or BSD, or something that would be free for commercial use?

Share this post


Link to post
Share on other sites
Eliia    122
Hi all,

sorry for being vague. I'm coding in PHP connecting to a mySQL db.

I'll post my code below. Here's what I'm trying to do
- i want to change an image state when i get back a '1' value from my php script - that part works
- this page will be php, even though all my example is pure HTML
- i want AJAX to be called by the javascript timer (which works), and when AJAX gets me a '1' value I swap the image to show a different image.

Code below
###
<script language="javascript" type="text/javascript">

// timer stuff
var secs
var timerID = null
var timerRunning = false
var delay = 1000

InitializeTimer();

function InitializeTimer()
{
// Set the length of the timer, in seconds
secs = 10
StopTheClock()
StartTheTimer()
}

function StopTheClock()
{
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}

function StartTheTimer()
{
if (secs==0)
{
StopTheClock()
checkForMessages()
InitializeTimer()
}
else
{
self.status = secs
secs = secs - 1
timerRunning = true
timerID = self.setTimeout("StartTheTimer()", delay)
}
}

// start xmls stuff
var url = "getMsgStatus.php"; // The server-side script

function handleHttpResponse() {

if (http.readyState == 4) {

// Split the comma delimited response into an array

results = http.responseText.split(",");

}

}

function checkForMessages() {

http.open("GET", url, true);

http.onreadystatechange = handleHttpResponse;

http.send(null);

}

function getHTTPObject() {

var xmlhttp;

/*@cc_on

@if (@_jscript_version >= 5)

try {

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (E) {

xmlhttp = false;

}

}

@else

xmlhttp = false;

@end @*/

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

try {

xmlhttp = new XMLHttpRequest();

} catch (e) {

xmlhttp = false;

}

}

return xmlhttp;

}

var http = getHTTPObject(); // We create the HTTP Object

document.write(''+results[0]);
</script>

###

Not sure how to go about doing the document.write line. I agree with the poster above, that the document.write is done when the page is loaded, and I just realized that the page never reloads - it's using AJAX dummy..... I'm learning :)

Hope this helps. I really appreciate the chatter here trying to figure out what I am trying to do.

Edit: Mark is 'on the mark' no pun intended - but I know nothing about DOM or elements.... but I'll learn :)

Share this post


Link to post
Share on other sites
Eliia    122
Quote:
Original post by PhilMorton
wouldnt u just insert an image tag into the document?

How are you currently trying to insert the image?


I was going to just output a img tag - but i need to change the image name within the tag - just can't figure out how to get the image to swap when i get a 1 or a 0 value from AJAX.

Share this post


Link to post
Share on other sites
Quote:
Original post by Eliia
Quote:
Original post by PhilMorton
wouldnt u just insert an image tag into the document?

How are you currently trying to insert the image?


I was going to just output a img tag - but i need to change the image name within the tag - just can't figure out how to get the image to swap when i get a 1 or a 0 value from AJAX.


I'm no expert in javascript, but wouldn't this be accomplished by just an if ... else statement when you received the value back. Whichever one it is, set a string variable equal to the image name you wanted, then just slip that variable between the <img> tags.

Share this post


Link to post
Share on other sites
Klowner    132
I'd recommend adding the image using the DOM methods provided to javascript.

Somethin' like this:

parent_element.innerHTML = "";
var newimg = document.createElement('img');
newimg.id = "something";
newimg.src = "blah/something.png";
parent_element.appendChild(newimg);

Share this post


Link to post
Share on other sites
Aidamina    100
Ok im not sure if i understand exactly what your trying todo but maybe this will help.

Note 1: the ....... refers to unrelevant html tags or javascript code
Note 2: you should implement the AJAX in a way that it calls the thisFunctionIsCalledWhenAjaxTellsYouThatTheImageHasToChange() function


<html>
<head>
<script lang="javascript">
......

function thisFunctionIsCalledWhenAjaxTellsYouThatTheImageHasToChange()
{
var img = document.getElementById('myimage');
img.src='state2.gif';

alert('I changed the image, yey!');
}


.....
</script>
</head>
<body>
......
</img id="myimage" src="state1.gif">

......
</body>
</html>



Sorry if this wasnt what you were trying todo.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this