Jquery Issue: All My SQL Queries

Question

In my code below, the JQuery events (mouseenter and leave) are implemented only on the first row of the entire list. So if I have more than one row in the results, the other rows are not effected by the JQuery and no change in the image height is done on mouseover. Can anyone explain the problem? and offer a possible solution?

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/main.css">
    <title></title>
</head>
<body>
<div id="headpanel"></div>
<div id="tablehead">
<a href="addmember.php"><img src="images/ico/add.png" id="addmember"><span style="position:absolute; top:3vmax; left:11vmax;">Add A New Profile </span></a>
</div>
<div id="tablebody">
<?php 
$profile_test = mysqli_query($db,"SELECT * FROM studs WHERE prof_id= '$prof_id'");
while($profile = mysqli_fetch_array($profile_test))
{
    ?>

    <div id="contact<?php echo $profile['stud_id']; ?>" class="contactblock">
<?php   
    echo "Name:";
    echo "&nbsp;";
    echo "&nbsp;";
    echo $profile['firstname'];
    echo "&nbsp;";
    echo "&nbsp;";

    echo $profile['lastname'];
    echo "<br>";
    echo "Marks:";
    echo "&nbsp;";
    echo $profile['marks'];
?>

 <img src="images/ico/edit.png"  id="editprofile">

</div>
<?php
}
?>
</div>

</body>
</html>
<script type="text/javascript">
$(document).ready(function(){

    $("#editprofile").mouseenter(function(){

        $(this).animate({"height":"4vmax"});
    })
    $("#editprofile").mouseleave(function(){

        $(this).animate({"height":"3vmax"});
    })

})
</script>

where is $db defined?

Iceman
– Iceman

2016-07-12 19:58:44 +00:00
Commented Jul 12, 2016 at 19:58 — Iceman
– Iceman, Commented Jul 12, 2016 at 19:58
Its there I didn't provide the upper PHP part!

d1r3w0lF
– d1r3w0lF

2016-07-12 20:02:27 +00:00
Commented Jul 12, 2016 at 20:02 — d1r3w0lF
– d1r3w0lF, Commented Jul 12, 2016 at 20:02

devlin carnate · Accepted Answer · 2016-07-12 20:06:19Z

2

You're using the same ID on multiple elements. Inside your loop, you have:

<img src="images/ico/edit.png"  id="editprofile">

IDs must be unique:

The Element.id property represents the element's identifier, reflecting the id global attribute. It must be unique in a document...

Change that to a class:

<img src="images/ico/edit.png"  class="editprofile">

And then adjust your binding to $(".editprofile") instead of $("#editprofile")

edited Jul 12, 2016 at 20:06

answered Jul 12, 2016 at 19:58

devlin carnate

8,6617 gold badges55 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

d1r3w0lF Over a year ago

It solved it! Thanks a Ton! :D ... I got to learn a new thing too! .. didn't know this constraint about IDs, always wanted to know the advantage of class over ID , Now I Know!

Collectives™ on Stack Overflow

Jquery Issue: All My SQL Queries

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related