Problem with MySQL data and Jquery popop

F

FuZzY665

New Member
Joined
Aug 11, 2006
Messages
5
Reaction score
0
Location
Durban
Hey Guys

I'm trying to call a set of images and descriptions from a MySQL database. Everything works great until the user clicks a button for additional info which calls a jquery popup which is suppose to display the description. It does what its suppose to, but only shows the info for the 1st image on every image.
Could it be an issue between the php and javascript?
Thanks

Javascript that calls popup:
PHP: 
<script type="text/javascript">
	$(document).ready(function() {
		$(".popup").colorbox({width:"50%", inline:true, href:"#inline"});
	});
</script>

Php that shows image and popup info:
PHP: 
<?php
mysql_select_db($database_conn_macph, $conn_macph);
$range = $_GET['range'];
$intCount;
$result = mysql_query("SELECT * FROM product_info WHERE range_name = '$range'");
            while($row = mysql_fetch_array($result)) {
                echo "<div class='panel'>";
                    echo "<table width='100%'>";
                        echo "<tr>";
                            echo "<td>";
                            echo "<img src='".$row['image']."' border='0px' />";
                            $intCount = $row['description'];
                            echo "<a class='popup'><img src='images/buttons/info.png' width='38px' style='float:right; padding-right:22px;' /></a>";
                            echo "<div style='display:none'>";
                                echo "<div id='inline' style='padding:1px; background:#fff; text-align:left;'><p>".$row['description']."</p></div>";
                            echo "</div>";
                            echo "</td>";
                        echo "</tr>";
                    echo "</table>";
                echo "</div>";
            }
        ?>
 
Not sure what the issue is, but you should really get into the habit of separating your data layer from your presentation layer, it would make debugging these sorts of issues much easier. You shouldn't have database calls and queries directly in your page like this.
 
It will be repeated since the <div id='inline'> will be same for all images that outputted to the page. Your div element is not unique and will return multiple items for a document.getElementByid call.
I assume that within the inner working of colorbox there may be something like $("#inline")...
 
Last edited:
$intCount = $row['description'];
Click to expand...
Ignore that. Was just trying something out and forgot to remove it when posting.

Let me try clarify whats happening. Each image has an 'info' button. When the user clicks the info button a popup should appear and display the image description.
This all works, but the issue that I'm having is that no matter what image you click for info the popup always displays the description for the 1st image.
 
and you dont need to echo line by line dude... you can just go:

$xml = '
<blah>
<blah>sdlkfhjsl;dfhsdkfjh</blah>
<blah>sdlkfhjsl;dfhsdkfjh</blah>
<blah>sdlkfhjsl;dfhsdkfjh</blah>
<blah>sdlkfhjsl;dfhsdkfjh</blah>
<blah>sdlkfhjsl;dfhsdkfjh</blah>
</blah>
';
echo $xml;
 
Don't you need to pass a unique class/id name to the js function?

Unnecessary table/tr/td markup there too.
 
Your outer div and table should be outside the loop, ie:
Code: 
<?php 
mysql_select_db($database_conn_macph, $conn_macph); 
$range = $_GET['range']; 
$intCount; 
echo "<div class='panel'>"; 
echo "<table width='100%'>"; 
$result = mysql_query("SELECT * FROM product_info WHERE range_name = '$range'"); 
            while($row = mysql_fetch_array($result)) { 
                        echo "<tr>"; 
                            echo "<td>"; 
                            echo "<img src='".$row['image']."' border='0px' />"; 
                            $intCount = $row['description']; 
                            echo "<a class='popup'><img src='images/buttons/info.png' width='38px' style='float:right; padding-right:22px;' /></a>"; 
                            echo "<div style='display:none'>"; 
                            echo "<div id='inline' style='padding:1px; background:#fff; text-align:left;'><p>".$row['description']."</p></div>"; 
                            echo "</div>"; 
                            echo "</td>"; 
                        echo "</tr>"; 
            } 
echo "</table>"; 
echo "</div>"; 
        ?>
 
FuZzY665 said:
Hey Guys

I'm trying to call a set of images and descriptions from a MySQL database. Everything works great until the user clicks a button for additional info which calls a jquery popup which is suppose to display the description. It does what its suppose to, but only shows the info for the 1st image on every image.
Could it be an issue between the php and javascript?
Thanks

Javascript that calls popup:
PHP: 
<script type="text/javascript">
	$(document).ready(function() {
                $(".popup").colorbox({width:"50%", inline:true, href:"#inline_"+this.id});
	});
</script>

Php that shows image and popup info:
PHP: 
<?php
mysql_select_db($database_conn_macph, $conn_macph);
$range = $_GET['range'];
$intCount;
$result = mysql_query("SELECT * FROM product_info WHERE range_name = '$range'");
            while($row = mysql_fetch_array($result)) {
                echo "<div class='panel'>";
                    echo "<table width='100%'>";
                        echo "<tr>";
                            echo "<td>";
                            echo "<img src='".$row['image']."' border='0px' />";
                            $intCount = $row['description'];
                            echo "<a id='".$row['id']."' class='popup'><img src='images/buttons/info.png' width='38px' style='float:right; padding-right:22px;' /></a>";
                            echo "<div style='display:none'>";
                                echo "<div id='inline_".$row['id']."' style='padding:1px; background:#fff; text-align:left;'><p>".$row['description']."</p></div>";
                            echo "</div>";
                            echo "</td>";
                        echo "</tr>";
                    echo "</table>";
                echo "</div>";
            }
        ?>
Click to expand...

$(".popup").colorbox({width:"50%", inline:true, href:"#inline_"+this.id});

echo "<a id='".$row['id']."' class='popup'><img src='images/buttons/info.png' width='38px' style='float:right; padding-right:22px;' /></a>";

echo "<div id='inline_".$row['id']."' style='padding:1px; background:#fff; text-align:left;'><p>".$row['description']."</p></div>"
have to assign id's to each description. Hope it works. cant really test where im at :)
 
would you mind posting a part of the actual html that gets generated
 
Generated HTML:
PHP: 
<div class='panel'>
<table width='100%'>
<tr>
<td><img src='images/summit/executive_desk_a.jpg' border='0px' />
<a id='1' class='popup'><img src='images/buttons/info.png' width='38px' style='float:right; padding-right:22px;' /></a>
<div id='inline_1' style='padding:1px; background:#fff; text-align:left;'><p>2200x1200 Executive desk with fixed pedestal, pen and pencil tray and central locking</p></div></td>
</tr>
</table>
</div>
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X