Jump to content

PHP / JavaScript Quandary *** PLEASE HELP


Go to solution Solved by Ch0cu3r,

Recommended Posts

Ok so I'm assuming it's staring me in the face but I currently have a scripting dilemma, which I need help with... Now before I get into it, I should inform you that the code itself is working perfectly; that's not the issue....

 

I have a set of users within my database all set up in thumbnail form on a page (CLICK HERE for example) 

 

The issue is for some reason, as per the code below, no matter which thumbnail I rollover my mouse over, it always displays the last user's name and not the name of the user associated with that particular thumbnail.

 

Here is the Code

<?php
include "../../mysql/db_config.php";
//SQL Query
$query = "SELECT userID, user_name, thumbnail, url FROM users WHERE city = 'Melbourne' ORDER BY order_city ASC";
$result = @mysql_query($query);
$result2 = @mysql_query($query) or die($query."<br/><br/>".mysql_error());

if ($result)
{
	// Build the Output Section Here
$output = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$uid = $row ["userID"];	
	$user = $row["user_name"];
	$url = $row["url"];
	$thumb = '<img src="' . $row["thumbnail"] . '" class="thumb" onmouseover="setUser()" onmouseout="removeUser()" </img>';

/*///////////////////////////////////////////////////////////////////////////////////////////
//								SET UP USER DISPLAY MECHANISM                         //
///////////////////////////////////////////////////////////////////////////////////////////*/
$output .=
    '<div id="user_grid" class="user-grid"><a href="'. $url .'">' . $thumb . '</a></div>';
}
}
else {
    echo "Could not run query";
    exit();
}

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/x-icon" href="../assets/icons/icon.ico">
<link rel="apple-touch-icon" href="../assets/icons/apple-touch-icon.png" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<SCRIPT LANGUAGE="JavaScript">
    function setUser()
    {
        document.getElementById("user_label").innerHTML='<?php print $user ?>';
    }
    function removeUser()
    {
        document.getElementById("user_label").innerHTML='';
    }
  </SCRIPT>     

 Any help of solving this would be appreciated...

Thanks for your time!

Link to comment
https://forums.phpfreaks.com/topic/288031-php-javascript-quandary-please-help/
Share on other sites

  • Solution

because you have hard coded the last users name here

    function setUser()
    {
        document.getElementById("user_label").innerHTML='<?php print $user ?>';
    }

$user will always be the very last user defined in white loop.

 

Instead what you need to do is pass the users name to the setUser javascript function for the onmouseover event. Eg

$thumb = '<img src="' . $row["thumbnail"] . '" class="thumb" onmouseover="setUser(\''.htmlspecialchars($user).'\')" onmouseout="removeUser()" </img>';

Now change the setUser javascript function to

    function setUser(name)
    {
        document.getElementById("user_label").innerHTML = name;
    }

When hovering over the users thumbnail, it should display the associated username.

Edited by Ch0cu3r

@Ch0cu3r Thank you so much, I knew it had to be something trivial that I've obviously overlooked.

 

Mate I'm not sure you know how much you've helped... I was without sleep for a good 24 hours consuming a boatload of coffee over that! LOL

 

Again Thanks so much!

Edited by davidfattore
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.