using ajax, php and slimbox effect

[eZe616]

I have a client that wants to make a page with images on it.  He doesn't want to go to another page, but display them all in 1 page.

Now he only wants 1 image in a certain gallery to be the thumbnail. On clicking the thumbnail it opens a new box containing Links to the other Images using Ajax funcionality. On when you click on this link, the image is supposed to open up using the slimbox effect, kinda like the lightbox2 effect.

 

The problem is, everything works except the slimbox effect. It doesn't work when using this method, but if I access the page directly the effect will work.

 

My function to get the Images

function makerequest(page, objID)
{
	var obj = document.getElementById(objID);
	obj.style.display = "block";

	var url = "getImages.php?id=" + page;
	xmlhttp.open("GET", url);
	xmlhttp.onreadystatechange  = function () {
		if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) 
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
	xmlhttp.send(null);
}

 

PHP code:

	  <?php
  		
	include 'includes/dbcon.php';

	$workId = $_GET['id'];
  	$sql = "SELECT * FROM work_images WHERE work_id='".$workId."' ORDER BY id ASC";
	$result = $db->query($sql);
	$num = $db->numResult($result);

	for( $i=1; $i <= $num; $i++)
		{
			$row = $db->fetchArray($result);
			echo "<li><a href=\"".$row['url']."\" rel=\"lightbox[]\">Image".$i."</a></li>";
		}

    	?>	

 

my html code

<a href="javascript:;" onclick="javascript:makerequest('16','works');"> Show</a>
<div id="works">
</div>

 

 

[mainewoods]

it looks like you are returning incomplete html from getImages.php, you are returning a li without a corresponding  ul /ul.  When you innerHTML part of a ul, you will get inconsistant results.  only innerHTML an entire ul /ul

 

this line does not put an image tag in the link, only text will be printed:

echo "<li><a href=\"".$row['url']."\" rel=\"lightbox[]\">Image".$i."</a></li>";

--the link will read 'Image1'.  Instead, you should have it print out an entire image tag with the url retrieved from your db in the src= part of it

[eZe616]

it looks like you are returning incomplete html from getImages.php, you are returning a li without a corresponding  ul /ul.  When you innerHTML part of a ul, you will get inconsistant results.  only innerHTML an entire ul /ul

 

this line does not put an image tag in the link, only text will be printed:

echo "<li><a href=\"".$row['url']."\" rel=\"lightbox[]\">Image".$i."</a></li>";

--the link will read 'Image1'.  Instead, you should have it print out an entire image tag with the url retrieved from your db in the src= part of it

 

Yeah it does seem that I forgot the ul /ul, but how come does it work when I acces the page directly then?

Ok...I've made the changes, but it still won't work.

[mainewoods]

ajax does not work the same as direct page access, some things work differently like javascripts and incomplete html because the ajax return values are being innerHTML'ed into something.  It's not a problem with ajax, it's related to the capabilites of innerHTML.  There are piles of posts on this board of people with the exact problem of innerHTML'ing incomplete UL's.  It's problematic on many browsers and that's just the way it is, so don't do it.

 

Let's see what your ajax is actually returning.  Do an alert before the statement below so we can see what it actually is returning. post here what it is actually returning.

 

alert(xmlhttp.responseText);
obj.innerHTML = xmlhttp.responseText;

[eZe616]

Yeah...I did some more seaching and found that also. It won't work, so I stopped trying and came siply wont use it.