[SOLVED] change image withot reloading page

anauj0101 · May 29, 2009

I am trying to load an image then change it without reloading the page. I have just started with Ajax today. When I run the code I have attached it doesn't give me rotate.php?img=mypicturename.jpg it only gives me mypicturename.jpg. Am I even close to the correct code? I have been researching all day and cant find the answer please help. Thank you in advance.

[attachment deleted by admin]

Ken2k7 · May 29, 2009

You're better off posting it in

tags. Not many will download your file.

anauj0101 · May 29, 2009

Sorry here is the code

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP! Please update your browser");
  }
}

function updateData(param)
{
var myurl = "rotate.php";
xmlhttp.open("GET",myurl + "?img=" + escape(param), true);
xmlhttp.onreadystatechange = useHttpResponse;
xmlhttp.send(null);

  if (xmlhttp.readyState == 4) 
  {
    var textout = http.responseText;
    document.write.textout;
  }
}


</script>


<a href="fear1" onclick="updateData(fear1.jpg); return false;">click this fear1</a><br>
<a href="fear2" onclick="updateData(fear2.jpg); return false;">click this fear2</a>

Ken2k7 · May 29, 2009

<script type="text/javascript">
function ajaxFunction() {
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert("Your browser does not support XMLHTTP! Please update your browser");
  return null;
}
}

function updateData(param) {
   xmlhttp = ajaxFunction();
   if (xmlhttp !== null) {
        xmlhttp.open("GET","rotate.php?img=" + escape(param), true);
        xmlhttp.onreadystatechange = function () {
             if (xmlhttp.readyState == 4) document.write(xmlhttp.responseText);
        }
        xmlhttp.send(null);
   }
}
</script>

<a href="fear1" onclick="updateData('fear1.jpg'); return false;">click this fear1</a><br>
<a href="fear2" onclick="updateData('fear2.jpg'); return false;">click this fear2</a>

anauj0101 · May 30, 2009

I tried the new code but it just spits out a bunch of random characters forever. I commented out the xmlhttp = ajaxFunction(); to see if that would fix it because that line didn't seem to make sense. after that it just did the same thing it did before. It only gives me fear1.jpg or fear2.jpg.

Ken2k7 · May 30, 2009

You can't comment out that line. If you do, no AJAX request will be made. What is your PHP file outputting? And what's the bunch of random characters you're getting?

MadTechie · May 30, 2009

from a little guess work i assume you have a simple rotate image script and you want it to update the currect image to the rotated one without reloading the page

try this (non-ajax route)

<head>
function updateData(param) {
	url = 'rotate.php?img=' + escape(param);
	document['myimage'].src=url+"cahce="+(Math.random()*10);
}
</head>

your need to update

document['myimage']

to the same as you image tag name

then use

updateData('fear1.jpg');

anauj0101 · May 30, 2009

This is my rotate script

<?php

/*
Link to the file like this:

		<img src="http://example.com/rotate.php">

specify the image to display like this:

		<img src="http://example.com/rotate.php?img=yourImage.jpg">
*/	


$folder = 'imageDir/';

    $extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

$img = null;

if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}

if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
	$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
	$file_info = pathinfo($file);
	if (
	    isset( $extList[ strtolower( $file_info['extension'] ) ] )
	) {
		$fileList[] = $file;
	}
}
closedir($handle);

if (count($fileList) > 0) {
	$imageNumber = time() % count($fileList);
	$img = $folder.$fileList[$imageNumber];
}
}

if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
	header ("Content-type: image/png");
	$im = @imagecreate (100, 100)
	    or die ("Cannot initialize new GD image stream");
	$background_color = imagecolorallocate ($im, 255, 255, 255);
	$text_color = imagecolorallocate ($im, 0,0,0);
	imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
	imagepng ($im);
	imagedestroy($im);
}
}

?>

this is the output i'm getting

��JFIF��H�H��C� !"$"$��C��X�"�� G��!1A"Qa2q�#B�3R��$b��CSr��%D��4Es��5��6� ��!1AQ"a2#Rq��B��$3��?��p�'�)�o��RE4��e*0>�DMe'*"��+?�a $�Ż(�i�FG��)��h��0��l�0=*�!�f��}��+)�i�8*>5Jh;(�cO��f�K !V�#;��~�U��n�2F��yV��/T��)!{ ;�� 0�t`!�22r�=��&�D7F�� ;!�Dx�ʆ��Jƈ��~�c��4@ Ak��CC�T � G� 1�V0��3�PA P*ʉ) aa�� 2H�Kl��BN�##v@�4�( (��C�� a@; 4F>T�7dcDM�(z&'>�ƈ�H`D�m�0;��J1��R>��I�VGj��+��p0y�S��S��Cu �u "�(d��J��g��1]��@��Tt��i� 2��!��9��g��n�D��C)?TY�D�B��Ф�Ѐ� ��M��A��!��ƈ��d�M�� a��e4IA�|I�6 ��+˻9��'��W[�=��+�i��K��k'�~)�� p�0ϒ ��>|\he��M�#wc �X��/�\GM=��\��4��e��=L�TD�䌐A�USN�t�\wǯ�Q��4^\� ��-�w1�(��jm ��A͎�Qs�C�[��Y�tF�eQvC:&Ь4AJF�� P!��A=��,�Sp�1�Ddy;+:��S1�0�t#'C�"|3��¸�� bc�#��b�#K�P��E,!�D�8RI07/�L��n�5INU�FR��-�C �C��(5t��dG%v0��'FpBm�*�;^�A��>��uC� >��# '%��$|�~ȀR��V�5� �41��4 �5A��#!��A��@�C�� P�P��d}�ƈ��Ds��{#+�b� �Iƈ��p�41�VQn��A�!�2 _dG��@%"��$0� �!�_d�a� ��h�R��"�%a�@ ��4X�.�A@��Fd�F;��EL��w*��6��@�Oa`��в�nL�PyE�� O�Npp��Gt �� ZI9 Y�|}R��fV��I��{�ϊ�2L��㮥<�� c_��y'��3�y�2}7MI&3��3!�{�o�� 5D̍Ҿ��E�4( IR Q��}:

Ken2k7 · May 30, 2009

You're outputting an image? Well that's not going to work with what you have. I guess you can set the image src value to that PHP file to see if it works, but I recommend just returning an image URL instead of an image.

anauj0101 · May 30, 2009

The code works on its own for the rotate.php I have used it in other applications. Its the function call that is not working correctly. I'm sure if I can get the function call to work correctly and pass the entire rotate.php?img=fear1.jpg it will work.

Ken2k7 · May 30, 2009

Then try this -

<html>
     <head>
          <title>...</title>
     </head>
     <body>
          <a href="fear1" onclick="updateData('fear1.jpg'); return false;">click this fear1</a><br />
          <a href="fear2" onclick="updateData('fear2.jpg'); return false;">click this fear2</a>

          <script type="text/javascript">
          function updateData (img) {
               var image = document.createElement('img');
               image.src = 'rotate.php?img=' + img;
               image.alt = 'php generated image';
              document.body.appendChild(image);
          }
          </script>
     </body>
</html>

anauj0101 · May 30, 2009

That works but it keeps creating new images every time i click the links. I need this to change a single static image to another one in the same location.

Ken2k7 · May 30, 2009

And you couldn't edit that part in yourself?

<html>
     <head>
          <title>...</title>
     </head>
     <body>
          <a href="fear1" onclick="updateData('fear1.jpg'); return false;">click this fear1</a><br />
          <a href="fear2" onclick="updateData('fear2.jpg'); return false;">click this fear2</a>

          <script type="text/javascript">
          function updateData (img) {
               var ex_image = document.getElementById('phpgenimg');
               if (ex_image !== null) { ex_image.src = 'rotate.php?img=' + img; return; }
               var image = document.createElement('img');
               image.id = 'phpgenimg';
               image.src = 'rotate.php?img=' + img;
               image.alt = 'php generated image';
              document.body.appendChild(image);
          }
          </script>
     </body>
</html>

anauj0101 · May 30, 2009

As i said earlier, I have only been programming in Ajax for about 10 hours. But I thank you, it works great.

If its not to much could you give me an example of how this same thing would work with a css div so I would have some comparison?

something like this

<style type="text/css">div.box
{height:100;width:200;background-color:ffffff;font-family:Arial;font-size:12pt;color:000000;text-align:left;border-width:1;border-style:solid;border-color:cccccc;overflow:auto}
</style>
<div class="box">
<img src="rotate.php">
</div>

Again thank you.

Ken2k7 · May 30, 2009

Uh if you looked at the code, like you should, then you should know that there are no AJAX. Just plain JavaScript. All I did was create an image with the src value to be the URL of the PHP file.

Give the div an id attribute or better yet, give the image an id attribute and reference the image through that. Remember, no AJAX, just JavaScript. Give it a try.

Sign In

[SOLVED] change image withot reloading page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information