Jquery .hover not functioning

Question

I am trying to highlight a table row using Jquery's .hover() method.

I have the following code:

var x;
var namen;
window.onload = function(){
    x = true;
    y = true;
    $("submitnieuw").observe('click', addturf);
    $("submitdelete").observe('click', verwijderturf);
    $("stats").on("click", "tr", select);
    setInterval(function (){
        jQuery("#recent").load("vandaag.php");
        if(x){
            jQuery("#stats").load("stats.php");
        }
    }, 10000);
    $("tr").not(':first').hover(
        function () {
            $(this).addClassName("selected");
        }, 
        function () {
            $(this).removeClassName("selected");
        }
    );
    alert("test");
};

function select(naam){
    //highlight the selected list element
    if (y){
        var name = naam.findElement('tr').id;
        if (name !== ""){
            x = false;
            y = false;
            jQuery.ajax('details.php',{
                data: {
                    'Naam': name,
                    'door': $("door2").value
                },
                type: 'post', 
                success: function(data){
                    $("stats").innerHTML = data;
                },
                error: ajaxFailure
            });
        }
    }
    else{
        x = true;
        y = true;
        jQuery("#stats").load("stats.php");
        jQuery("#recent").load("vandaag.php");  
    }
}

function verwijderturf() {
    var box = document.getElementById("naamverwijder");
    var naam = box.options[box.selectedIndex].value;
    document.getElementById("naamnieuw").selectedIndex=0;
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'verwijderturf',
            'naam': naam,
            'door': $("door2").value
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}


function addturf() {
    var box = document.getElementById("naamnieuw");
    var naam = box.options[box.selectedIndex].value;
    document.getElementById("naamnieuw").selectedIndex=0;
    var reden = $("redennieuw").value;
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'addturf',
            'naam': naam,
            'door': $("door2").value,
            'reden': reden
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}

function update(ajax){
    jQuery("#stats").load("stats.php");
    jQuery("#recent").load("vandaag.php");
}


function ajaxFailure(ajax, exception) {
    alert("Error making Ajax request:" + 
        "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
        "\n\nServer response text:\n" + ajax.responseText);
    if (exception) {
        throw exception;
    }
}

selected is defined in the css I have included in my index.php.

This is my index.php

<?php
    include_once("db.php"); 
    session_start();
    if (!isset($_SESSION['uid'])){ 
        header("location:main_login.php");
        exit();
    }
    if (!isset($_SESSION['upass'])){ 
        header("location:main_login.php");
        exit();
    }
    $sql="SELECT * FROM users WHERE Naam='".$_SESSION['uid']."' AND Wachtwoord='".$_SESSION['upass']."'";
    $result=mysql_query($sql);
    $count=mysql_num_rows($result);
    if($count < 1){
        header("location:main_login.php");
        exit();
    }

?>


<?php
    $date = date("y-m-d");
    $vandaag = mysql_query("SELECT Type, Naam, Reden, Door FROM turfjes WHERE turfjes.Datum = '" . $date . "'");
    $names = mysql_query("SELECT Naam From users");
    $names2 = mysql_query("SELECT Naam From users");
    $names3 = mysql_query("SELECT Naam From users");
?>


<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tomaten turfjes pagina | 258</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> 
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            jQuery.noConflict();
        </script>
        <script src="js/prototype.js" type="text/javascript"> </script>
        <script src="js/scriptaculous.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"> </script>
    </head>

    <body>
        <div id="container">
            <div id="header">
            </div>
            <div id="info">
                <div id="recent">               
                    <fieldset>
                        <legend>Vandaag</legend>
                        <table border="0">
                            <tr>
                            <td>Type</td>
                            <td>Naam</td>
                            <td>Reden</td>
                            <td>Door</td>
                            <?php
                                while($a = mysql_fetch_array($vandaag)){
                            ?>      <tr>
                                    <td><?php echo($a['Type']);?></td>
                                    <td><?php echo($a['Naam']);?></td>
                                    <td><?php echo($a['Reden']);?></td>
                                    <td><?php echo($a['Door']);?></td>
                                    </tr>
                            <?php
                                } 
                            ?>
                        </table>
                    </fieldset>
                </div>
                <div id="stats">                
                    <fieldset>
                        <legend>Turfjesteller</legend>
                        <table border="0">
                            <tr>
                            <td>Naam</td>
                            <td>Aantal</td>
                            <td>Gedaan</td>
                            <td>Resterend</td>
                            </tr>
                            <?php
                                while($r = mysql_fetch_array($names)){
                                echo("<tr id=".$r['Naam'].">");
                            ?>
                                    <td><?php echo($r['Naam']);?></td>
                            <?php 
                                        $sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
                                        $result=mysql_query($sql);
                                        $count=mysql_num_rows($result); //count = adtjes
                                        $sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
                                        $result2=mysql_query($sql2);
                                        $count2=mysql_num_rows($result2); //count2 = turfje     
                            ?>
                                    <td><?php echo($count2);?></td>
                                    <td><?php echo($count);?></td>
                                    <td><?php echo($count2-$count);?></td>
                                    </tr>
                            <?php 
                                }
                            ?>
                        </table>
                    </fieldset>
                </div>
            </div>
            <div id="actie">
                <div id="nieuw">
                    <fieldset>
                    <legend>Nieuwe turfjes</legend>
                        <label>Naam</label>
                        <select id = "naamnieuw">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names2)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Reden</label> <input type="text" name="redennieuw" id="redennieuw"/>  <br>
                        <label>Door</label> <input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div>
                    </fieldset>
                </div>
                <div id="verwijder">
                    <fieldset>
                    <legend>Verwijderen turfjes</legend>
                        <label>Naam</label>                     
                        <select id = "naamverwijder">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names3)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Door</label> <input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div>
                    </fieldset>
                </div>
                <form name="logout" method="post" action="logout.php">
                <div id = "buttonz"><input type="submit" name="logout" value="Log uit"></div>
                </form>
            </div>
        </div>
    </body>
</html>

The test alert is not executed so I know that my hover is not working. I checked and everything before the hover is executed however and still functional.

I am not quite sure what I am doing wrong. Can anybody help me please?

My syntax seems to be just fine, according to online checkers.

Thanks for posting your code, but maybe you should put a copy of the final rendered page into a fiddle so that we can play with it. — Robert Harvey
– Robert Harvey, Commented May 29, 2012 at 17:55

Mathew Thompson · Accepted Answer · 2012-05-29 18:13:30Z

2

There's no such thing as addClassName in jQuery, did you mean addClass?

Try this:

$("tr").not(':first').hover(
    function () {
        $(this).addClass("selected");
    }, 
    function () {
        $(this).removeClass("selected");
    }
);

Also, your selector could be "simplified" to $("tr:not:(first)")

edited May 29, 2012 at 18:13

answered May 29, 2012 at 17:56

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

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

1 Comment

user1390504 Over a year ago

Thanks a lot for your quick and accurate reply!

Denys Séguret · Accepted Answer · 2012-05-29 17:58:04Z

1

It seems (not sure due to your code being php) that you want to apply hover on elements that aren't present on load. If that's the case, you cannot simply do

$("tr").not(':first').hover(

You must use jquery on so that it will be applied to all elements appearing.

To replace a hover by a on, you have to hook the 'mousenter' and 'mouseleave' events :

$('body').on('mousenter', 'tr:not(:first)', function({ ... });
$('body').on('mouseleave', 'tr:not(:first)', function({ ... });

answered May 29, 2012 at 17:58

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

user1390504 Over a year ago

Thanks a lot for your quick and accurate reply!

user1390504 Over a year ago

$("stats").on("mouseenter", "tr", function(){ $(this).addClass("selected"); }); $("stats").on("mouseleave", "tr", function(){ $(this).removeClass("selected"); }); Is what I have now. The code afterwards is executed now, however: the class is not added and when I replace it with alerts, they are not executed either..

Collectives™ on Stack Overflow

Jquery .hover not functioning

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related