There is two sections i need it to update. When they hover over the members name listed below, I need it to show their details. When the user(one who submitted the content) posts its going to have a hidden value to update the field in the form that i have a 1 in now. Look for bolded items below.

This is all on the same form, and I would like for the PHP code above to get the userID=???? from the link listed below. Is this possible?

<?PHP
require_once("include/membersite_config.php");

if(!$fgmembersite->CheckLogin())
{
    $fgmembersite->RedirectToURL("login.php");
    exit;
}

?>
    <?php
require_once 'include/myacctconfig.php';
include 'vars.php';
    $id = $_GET['userID'];** <-----Value Needed**

    $query="SELECT * FROM fgusers3 WHERE id_user = $id.";
    $rs = mysql_query($query);
    $details = mysql_fetch_array($rs);


    $query="SELECT * FROM moredetails WHERE id_user = $id." ;
    $rs = mysql_query($query);
    $mdetails = mysql_fetch_array($rs);


?>
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type="text/css">
.theDiv {
    display: none;
    margin-top:-7px;
    background-color:#fff;
    width: 500px;
    line-height:100%;
    border:1px solid #c3c3c3;
    background:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    position: relative;
    padding: 10px;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.theLinks').hover(
    function () {
        $(this).closest('.content3').next('.theDiv').fadeIn();
    },
    function () {
        $(this).closest('.content3').next('.theDiv').hide();
});
});//]]>  

</script>
</head>
<body>
  <div>
    <div class="content3">
        <div>
            <div class="theLinks">
                <div><a href="<?php echo $_SERVER['PHP_SELF']?>?userID=1">Members Name</a>**<----where it is stored...**
                </div>
            </div>
        </div>
    </div>
    <div class="theDiv">
    <table>
        <tr>
                <td><img class="imgb" align="top" src="profilepics/<?php echo $details['profilepic']; ?>" width="100" height="100">
        </td>
                <td valign="top">Name: <?php echo $details['name'] ?><br><br>Email: <?php echo $details['email'] ?><br><br>Username: <?php echo $details['username'] ?><br><br>Favorite Exercise: <?php echo $mdetails['favexercise']; ?><br><br>Years Exercising: <?php echo $mdetails['yearsexercise']; ?>
        </td>
    </table>
    </div>
    </div>
</body>
</html>

Recommended Answers

All 22 Replies

Member Avatar for iamthwee

I think it would be a better design to return ALL details within the page and display them inside a hidden attribute. On hover, rather than making ANOTHER request to the db just disply those detail in your hover form, whatever that is.

If you did want to, however, you could use the jQuery library and use a bit of javascript to issue an AJAX request on hover. Check out this and this

Dani, can I private message you?

Sure, although I cannot guarantee a response related to a technical question via PM. I prefer to keep those on the forums.

I am still a noob at coding and such, I do not know jquery very well. I have a blog that when you roll over the members name that posted, I want it to display their details. I am getting confused with the code that I have. If i post my code for the blog/comments section would that be more help?

Member Avatar for iamthwee

Although Dani is a PHP web guru compared to me I'd like to chime in that I don't think it's a good idea to execute queries on mouse over. Let's say the end user mouses over a username 6-7 times now imagine you have 500+ users on a page mouseover -ing a username. That's a lot of db queries.

what would be the best way to do this? I am not sure what to do. I am not very good at jquery, i am still a noob at this..

Member Avatar for diafol

I'm of the opinion that page actions should be active rather than passive. Hovers IMO should be cosmetic, e.g. colour change on active areas, etc or even magnify part of an image, that sort of stuff. Showing additional content on hover may be a bit much. Rolling the mouse around the screen may cause chaos. So, clicks may be the way to go. Consider accessibility too. Ajaxing hovers may put unnecessary load on the server, as many hovers may be 'mistakes',depending on the number areas and how widely spaced your hover areas are. My 2p.

Member Avatar for iamthwee

I think hovers on usernames are just fine, it's a normal sort of practice, works well on DW but I can understand onClick may be more efficient web friendly.

I still stand by my original statement that if you are doing mouseovers rather than query the db on a mouseover you should pull all the necessary info for all those users on page request and keep those in a hidden attribute that will only be revealed on mouseover.

It's pretty simple to do.

I'm a fan of AJAX requests on hover. Take, for example, a complex web-based banking application that has a very complicated form. They want to do help tooltips when different fields are rolled over to tell you what to fill into each textfield, and have the tooltips customized based on the data you'll filled in elsewhere on the page. That's an example of when it isn't possible to keep all necessary information hidden yet available from page generation.

Even if the tooltips are not customized post-pageload, suppose there are 100+ tooltips and statistical studies have shown that the average user only hovers over 2 of them on any given pageload. That's a lot of extra unnecessary information being sent to the browser for no reason.

Of course, whenever doing AJAX hovers, you'll always want to cache the information via javascript so it only need be fetched once.

Member Avatar for iamthwee

^^Good points.

I guess it all depends on if the OP has a complex hover over data. If not and it is just users' info you could load the whole thing at once.

you'll always want to cache the information via javascript so it only need be fetched once

Yup I overlooked this point as well.

Wow, I have some research to do then. I am a quick learner, but never really dabbled into Ajax, I am working on this site with a friend of mine and we want to keep the cost low. I do know a small amount of web stuff but by all means no PRO. Thanks everyone for your help and conversing with me to get a resolution on this.

I guess it all depends on if the OP has a complex hover over data.

Yup, you will want to factor in both the ratio of how many hovers the average user would perform per page compared to how many there are on the pages, as well as how expensive each one is. If it's really expensive to calculate the data, then you only want to do it if the user requests it. I'd prefer them to wait the extra half a second when explicitely requesting something than an extra three seconds waiting for the page to be generated for things that may or may not be requested to be calculated.

I think hovers on usernames are just fine, it's a normal sort of practice, works well on DW but I can understand onClick may be more efficient web friendly.

I still stand by my original statement that if you are doing mouseovers rather than query the db on a mouseover you should pull all the necessary info for all those users on page request and keep those in a hidden attribute that will only be revealed on mouseover.

It's pretty simple to do.
How easy is it? I am looking at this one option but when it comes to using what they want, i am lost.

http://rndnext.blogspot.in/2009/02/jquery-ajax-tooltip.html

They want me to use CSS, JQuery, and a rel tag that noone has.

any other options out there?

I should also probably be clearer. I already have the JQuery working, i need the guts of it. What should be called when they hover over it? how can I make this happen? That is what iam not sure of.

Member Avatar for iamthwee

I would imagine you would just run an ajax query.

So as you hover over a name pass that to a php file which queries the db then returns more info for that user, load this info into the tooltip and show on page.

Job done.

So I found a code from the W3.schools website. it does what i want, and it even pulls from another page that was created. But when I hover over the link, it does nothing still, here is the Ajax, php and db page:
Ajax:

<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script> 

My PHP Script:

        echo "<div class=\"author\"><img align=\"left\" style=\"vertical-align:top;\" class=\"imgb\" height=\"41\" width=\"37\" src=\"profilepics/".$row['pic']."\" /> <input type=\"hidden\" onmouseover=\"showUser(this.value)\" value=\"" .$row['id']."\" />".$row['author']."<br>".$row['timestamp']."<br></div>";

and the DB page:

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'USER', 'PASS');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("DB", $con);

$sql="SELECT * FROM fgusers3 WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='0'>
<tr>
<th>&nbsp;</th>
<th>Name</th>
<th>Favorite Exercise</th>
<th>Years Exercising</th>
<th>State:</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['profilepic'] . "</td>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['favexercise'] . "</td>";
  echo "<td>" . $row['yearsexercise'] . "</td>";
  echo "<td>" . $row['state'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?> 

Please let me know what you see is wrong or not. I only changed a few things from the original, like the link in the PHP from onchange to onmouseover=doscript(); and the database information to connect.

I got it to work. I am a very happy person now. I just needed to change the id of the hidden field, then i needed to change the showUser(user.value) instead of the this.value and put it to load on the div instead of the hidden <---dummy for thinking that ---> but it is resolved now.

Member Avatar for iamthwee

Glad you got it solved. For future reference consider using the jquery ajax.post function or the one dani posted previously.

http://api.jquery.com/jQuery.post/

It's probably the same but for readability and assurance (jquery libs are thorougly tested) it's much better.

Acutally, there is one issue that i am running into now with this code. What’s happening is I have an Ajax code, that when you mouse over a div it queries information from the database using a separate page that was created called getusers.php. it then takes that mouseover information and looks for the div that is assigned a number using the row[‘id’] in the database to make it easier well that works and all but the thing that isn’t working is when there is multiple users, it “targets” the first div and that is it.

Also, Im not sure if you posted your production code in here or not but this needs to be changed:
$sql="SELECT * FROM fgusers3 WHERE id = '".$q."'";

Thats open to SQL injection. Again, not sure if this is just sample code but make sure that doesn't make it into production systems.

For more info see this page: http://www.wikihow.com/Prevent-SQL-Injection-in-PHP

Member Avatar for diafol

SOrry, this is late, must have missed it. WRT hover states, I get a bit uncomfortable with show data / run script on hover. Problem is that smartphones and tablets don't usually have a hover state - well I suppose it could be argued that they do to some extent, but there's nothing obvious there, unlike a mouse that could show a tooltip or cause the colour of text to change. Here's a great (old) post on the matter:

http://trentwalton.com/2010/07/05/non-hover/

OK, I'll let sleeping dogs lie now.

commented: enjoyed the read ta +14
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.