14 Replies - 736 Views - Last Post: 24 June 2013 - 07:06 PM

#1 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

on hover ajax issue

Posted 23 June 2013 - 08:50 PM

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.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: on hover ajax issue

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 06:34 AM

Your input is hidden so it cannot be moused-over. Perhaps put the onmouseover on the image, or div. Give the input an id so that you can refer to it in showUser(), as you cannot now refer to this.value.

This post has been edited by andrewsw: 24 June 2013 - 06:35 AM

Was This Post Helpful? 1
  • +
  • -

#3 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 08:30 AM

ok, so it work, but only for the first profile that is listed there. Is there something i am missing?

Attached image(s)

  • Attached Image

This post has been edited by Dormilich: 25 June 2013 - 01:44 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 08:31 AM

View Postpatk570, on 24 June 2013 - 03:30 PM, said:

ok, so it work, but only for the first profile that is listed there. Is there something i am missing?

Politeness?
Was This Post Helpful? 0
  • +
  • -

#5 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 08:33 AM

Sorry, thanks for you help on the first issue. I really do appreciate your time to help me out on this.

This post has been edited by Dormilich: 25 June 2013 - 01:44 AM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 08:50 AM

Ok. Your script is inserting the ajax-response into an element with id "txtHint". Ids must be unique so there can be only one such element on the page.

However, other than this point, you haven't explained what is going wrong.
Was This Post Helpful? 0
  • +
  • -

#7 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 08:54 AM

Sorry, what is happening is when i hover over the first users profile, it give the details from the database like expected but when i hover over the second user that posted, it is just blank, like there is no user details or querying the database at all. Just has the generic text of Profile info will go here like i have it defaulted to say in the div.. So for me to use this, i would have to create a whole new query system? or can this be modified to show all the users profiles when you hover over their name?

Thanks,
Patrick.

This post has been edited by Dormilich: 25 June 2013 - 01:44 AM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 09:02 AM

When onmouseover calls your function showUser() it needs to pass the current user's id as an argument. You can modify your PHP echo statement so that it inserts the id (for each user) directly into the function call:

onmouseover=\"showUser(" .$row['id']. ")\"

Was This Post Helpful? 0
  • +
  • -

#9 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 09:12 AM

Thanks for that. But now one last issue. it does show the profile information in the div, just not under the name like it is supposed it. I think that goes back to the div txtHint that is shown. is there a fix for that? or should i just do something else?

Thanks again for your help.

P.

Attached image(s)

  • Attached Image

This post has been edited by Dormilich: 25 June 2013 - 01:44 AM

Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 09:34 AM

I would use $row['id'] again to give each div a unique id such as "profile1", "profile2", etc. Then, when the response is received, I would use Javascript to append (using appendChild) the txtHint element to this div.

The variable str contains the number you need and it should still be available to the onreadystatechange callback. So you can refer to the div as:

var profileDiv = document.getElementById("profile" + str);
var profileHint = document.getElementById("txtHint");

profileHint.innerHTML=xmlhttp.responseText;
profileDiv.appendChild(profileHint);

If it is not already, then "txtHint" could be absolutely postioned, and the profile-divs relatively positioned. "txtHint" could be initially hidden, and you'll need to play with its css to position it properly. (You may already have done this.)

This post has been edited by andrewsw: 24 June 2013 - 09:37 AM

Was This Post Helpful? 2
  • +
  • -

#11 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 10:17 AM

Thanks, that worked perfectly. But there is one issue when user posts more then once, it will not show in its own div still reverts to the first one it sees.

This post has been edited by Dormilich: 25 June 2013 - 01:45 AM

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,116
  • Joined: 12-December 12

Re: on hover ajax issue

Posted 24 June 2013 - 10:22 AM

I do not understand what you mean.

This post has been edited by Dormilich: 25 June 2013 - 01:45 AM

Was This Post Helpful? 0
  • +
  • -

#13 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 10:35 AM

Hello,

Maybe I have my syntax wrong on the script, can you amend the script with your variables in there so I can compare with what I have? Also, in order to pull the data correctly, i have to use the variable id_user, which is what is stored in the DB for each comment. I then have it pulling the to the onmouseover=\"showUser(" .$row['id_user'].")\" then when it searches for the div, it uses the same command almost, just <div id=\"profile".$row[id_user']."\">

I think i am completely wrong on this whole thing...

Thanks,

P.

This post has been edited by Dormilich: 25 June 2013 - 01:45 AM

Was This Post Helpful? 0
  • +
  • -

#14 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 11:54 AM

Hi again,

This is my scripting. but now for some reason it shows again in the same ONE div at the top, but even stranger is the code below this.

<script>
function showUser(str)
{
	var profileDiv = document.getElementById("profile" + str);
	var profileHint = document.getElementById("txtHint");
		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)
    {
    profileHint.innerHTML=xmlhttp.responseText;
	profileDiv.appendChild(profileHint);
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>



Source Code of page:

                <div class="comment"><div class="author"><div><div class="content3"><div><div class="theLinks"><div class="author"><img onmouseover="showUser(1)" style="vertical-align:top;" class="imgb" src="profilepics/4965657af186b9092c7a96976ffe881c_XL.jpg" align="left" height="41" width="37">Patrick Kershner<br>June 24, 2013, 9:41 am<br></div><br></div></div></div>[u][i][b]<div style="display: none;" class="theDiv"><div id="txtHint"><table border="0">[/b][/i][/u]<tbody><tr><td valign="top"><img src="profilepics/4965657af186b9092c7a96976ffe881c_XL.jpg" height="80" width="80"></td><td valign="top">Name: Patrick Kershner<br>Favorite Exercise: Jumping Jacks<br>Years Exercising: 3<br>From: Co</td></tr></tbody></table> </div></div></div>this is a test<br><br></div><br><div class="comment"><div class="author"><div><div class="content3"><div><div class="theLinks"><div class="author"><img onmouseover="showUser(5)" style="vertical-align:top;" class="imgb" src="profilepics/generic.gif" align="left" height="41" width="37">Demo Account<br>June 24, 2013, 9:23 am<br></div><br></div></div></div>[i][b]<div style="display: block;" class="theDiv"><div id="txtHint"><div id="profile3"></div></div></div>[/b][/i]</div>dfadgf<br></div><br><div class="comment"><div class="author"><div><div class="content3"><div><div class="theLinks"><div class="author"><img onmouseover="showUser(5)" style="vertical-align:top;" class="imgb" src="profilepics/generic.gif" align="left" height="41" width="37">Demo Account<br>June 24, 2013, 9:19 am<br></div><br></div></div></div>[i][u][b]<div style="display: none;" class="theDiv"><div id="txtHint"><div id="profile2"></div></div></div>[/b][/u][/i]</div>kankajsd;fjj<br><br></div><br></div>
		<div class="clear"></div>
        <div style="clear: both;"></div>
	</div>
    </div>



The bolded and underlined is the area that it sends it to.

here is the php:

	echo "<div class=\"theDiv\">";
	echo "<div id=\"txtHint\"><div id=\"profile".$row['id']."\"></div></div>";
    	echo "</div>";



is this correct or did i totally fudge it up? lol

Thanks,

P.
Was This Post Helpful? 0
  • +
  • -

#15 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: on hover ajax issue

Posted 24 June 2013 - 07:06 PM

Hello,

I figured out what is going on here. The Ajax is only loading one profile in there. Any ideas why it might be doing that?

THanks,
Patrick.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1