displaying PHP/MySQL results on mouseover

Okay, first of all, I have zero JS or AJAX experience, so am flying blind here. Just hoping someone with some knowledge of PHP/MySQL as well can point me in the right direction. I'm guessing this issue is more JS-focused, but I hope I'm in the right forum.

I'm trying to recreate something like the mouseover effect applied at this url: http://essenceproperty.com.au/listings.php?location=B , where rolling over the mini results at the right displays content from the database.

So I get my search results from the database, and loop through them like so to create the mini-listings on the right:

while($row = mysql_fetch_array($search_properties))
    {
    $property_id = $row['property_id'];
    $property_headline = $row['property_headline'];
    etc....

    <div class="listing" onMouseOver="swapContent(0)" onclick="location.href='listing-detail.html';" style="cursor:pointer;">
        mini listing here....
    </div>
    }

PHP:

And here is what the javascript function looks like when I view the source for the page through a browser (I'm doing this work for the same company, but don't have access to the source code)

function swapContent(listNum)
  {
  if(listNum==0)
    {
    document['displayImage'].src = "./images/listings/281.jpg";
    document.getElementById('imagelink').href = "listing-details.php?id=55&page=1&location=B";
    document.getElementById('displayText').innerHTML = "- Striking architectural";
		etc.....
    }
  if(listNum==1)
    {
    loops through the details for the next property....
    }
}

Code (markup):

So, what I need to know is how do I loop my PHP $property_id variable through the javascript function so that when I mouseover one of the listings, the content gets swapped out? It's obviously doing a loop of its own to create the if statements that are in the browser source, but how?

I'm looking for something that will take my PHP while loop, and turn it into a JS loop of this:

document['displayImage'].src = "<?php echo $property_img; ?>";
document.getElementById('imagelink').href = "<?php echo $property_link; ?>";
document.getElementById('displayText').innerHTML = "<?php echo $property_description; ?>";

Code (markup):

I hope that made sense. Please be gentle

 

Just bumping this because my deadline is looming.

Can anyone help? I'll be eternally grateful.

 

The short answer is: you don't. PHP cannot interact with javascript in the way you want, all it can do is process its work server-side then output the results to your web document. I will also tell you that what they use in the url you provided isn't AJAX, just pure Javascript. Here's what you need to do to emulate their setup:

Server-side

$count=0;
echo "function swapContent(listNum){";

while($row=@mysql_fetch_assoc($query)){
echo <<<JSFUNC
if(listNum=={$count})
{
document['displayImage'].src = "{$row['image']";
document.getElementById('imagelink').href = "{$row['link']";
document.getElementById('displayText').innerHTML = "{$row['description']";
document.getElementById('displayHeading').innerHTML = "{$row['heading']";
document.getElementById('displayLocation').innerHTML = "{$row['location']";
document.getElementById('displayPrice').innerHTML = "{$row['price']";
document.getElementById('displayBedrooms').innerHTML = "{$row['bedrooms']";
document.getElementById('displayBathrooms').innerHTML = "{$row['bathrooms']";
document.getElementById('displayGarages').innerHTML = "{$row['garages']";
}
JSFUNC;
$count++;
}
echo "}";

PHP:

Then just use a function similar to what they use on the client-side to make changes as needed.

Please note that this is just an example that I banged out to show you the type of thing you need to do. If it were me, I'd clean it up a bit before using it on a production site, probably wrapping it in a class or something. If you don't want the <script> tags to be static you can add those in there as well.

 

Use AJAX, it's really not that hard, copy someone else's AJAX function and edit it.

The AJAX should -
when called
open the PHP file of choice
get the output from the PHP file
update a certain HTML element with the results.

 

I almost suggested this, but since the OP said she has no JS or AJAX experience I figured it would be easier for her to just copy what she sees. Besides, as long as there aren't a lot of listings this could reduce load on the server and will eliminate the loading pause you get with AJAX.

 

Since I subscribe to the K.I.S.S method of programming, you don't actually need AJAX.

Yes, php the critic is correct in saying php doesn't interact with js the way you want. However, that doesn't mean we can't get the same end result.

This is actually really simple. To other programmers, this may seem disorganized as my array will be scattered throughout the page. This isn't technically a problem and it will keep it easy to understand and read for kath.

**Actually, this is a different version of what the_critic posted, this will not need to generate if statements

First,at the top in javascript:

var ListingArray = new Array();
function swapContent(listNum)
  {
		document['displayImage'].src = ListingArray[listNum]['displayImage'];
		document.getElementById('imagelink').href = ListingArray[listNum]['imagelink'];
		document.getElementById('displayText').innerHTML = ListingArray[listNum]['displayText'];
	}

Code (markup):

then when looping through the listings

$cntr = 0;//this needs to be BEFORE the loop starts
//start loop
echo "<script>";
echo "new ListingArray[$cntr];\n";
echo "ListingArray[$cntr]['displayImage'] = \"$row['img']\"\n";
echo "ListingArray[$cntr]['imagelink'] = \"$row['link']\"\n";
echo "ListingArray[$cntr]['displayText'] = \"$row['description']\"\n";
echo "</script>";
echo "<div class=\"listing\" onMouseOver=\"swapContent($cntr)\" onclick=\"location.href='listing-detail.html';\" style=\"cursor:pointer;\">";
echo "mini listing will be here";
echo "</div>";
$cntr+=1;//this needs to be WITHIN the loop
//end loop

PHP:

Essentially what my code does, is it creates a associative array that will hold the property's information. Once mouse over the javascript will simply display the correct section of the array.

 

Excuse , but what is in the "mini listing will be here" below;
Anyone can put an example for me ?
tks

$cntr = 0;//this needs to be BEFORE the loop starts
//start loop
echo "<script>";
echo "new ListingArray[$cntr];\n";
echo "ListingArray[$cntr]['displayImage'] = \"$row['img']\"\n";
echo "ListingArray[$cntr]['imagelink'] = \"$row['link']\"\n";
echo "ListingArray[$cntr]['displayText'] = \"$row['description']\"\n";
echo "</script>";
echo "<div class=\"listing\" onMouseOver=\"swapContent($cntr)\" onclick=\"location.href='listing-detail.html';\" style=\"cursorointer;\">";
echo "mini listing will be here";
echo "</div>";$cntr+=1;//this needs to be WITHIN the loop//end loop

 

Anyone can help me ?
It my question is secret estate?
excuse but mey time is fall
tks