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

"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

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 &#106avascript timer (which works), and when AJAX gets me a '1' value I swap the image to show a different image.

Code below
###
<script language="&#106avascript" type="text/&#106avascript"&gt;<br><br>// timer stuff<br>var secs<br>var timerID = null<br>var timerRunning = false<br>var delay = 1000<br><br>InitializeTimer();<br><br>function InitializeTimer()<br>{<br> // Set the length of the timer, in seconds<br> secs = 10<br> StopTheClock()<br> StartTheTimer()<br>}<br><br>function StopTheClock()<br>{<br> if(timerRunning)<br> clearTimeout(timerID)<br> timerRunning = false<br>}<br><br>function StartTheTimer()<br>{<br> if (secs==0)<br> {<br> StopTheClock()<br> checkForMessages()<br> InitializeTimer()<br> }<br> else<br> {<br> self.status = secs<br> secs = secs - 1<br> timerRunning = true<br> timerID = self.setTimeout("StartTheTimer()", delay)<br> }<br>}<br><br>// start xmls stuff<br>var url = "getMsgStatus.php"; // The server-side script<br><br>function handleHttpResponse() {<br><br> if (http.readyState == 4) {<br><br> // Split the comma delimited response into an array<br><br> results = http.responseText.split(",");<br><br> }<br><br>}<br><br>function checkForMessages() {<br><br> http.open("GET", url, true);<br><br> http.onreadystatechange = handleHttpResponse;<br><br> http.send(null);<br><br>}<br><br>function getHTTPObject() {<br><br> var xmlhttp;<br><br> /*@cc_on<br><br> @if (@_jscript_version &gt;= 5)<br><br> try {<br><br> xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");<br><br> } catch (e) {<br><br> try {<br><br> xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");<br><br> } catch (E) {<br><br> xmlhttp = false;<br><br> }<br><br> }<br><br> @else<br><br> xmlhttp = false;<br><br> @end @*/<br><br> if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {<br><br> try {<br><br> xmlhttp = new XMLHttpRequest();<br><br> } catch (e) {<br><br> xmlhttp = false;<br><br> }<br><br> }<br><br> return xmlhttp;<br><br>}<br><br>var http = getHTTPObject(); // We create the HTTP Object<br><br> document.write(''+results[0]);<br>&lt;/script&gt;<br><br>###<br><br>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 :)<br><br>Hope this helps. I really appreciate the chatter here trying to figure out what I am trying to do.<br><br>Edit: Mark is 'on the mark' no pun intended - but I know nothing about DOM or elements.... but I'll learn :)

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.

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 &#106avascript, 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.