0

hello. I have a page with two tables, .contact-names and .guest-list, and a drop down list. by default the tables are empty but shows message "please select an event" from the drop down list. when an event is selected .contact-names is loaded with names from database and .guest-list remains empty. These events work fine. the problem is when i added function whereby when a row(a name) from .contact-names is clicked the background changes to red, this function does not work.

the page is : add_guest.php

<html>
<head>
    <title>EMS | Add Guest</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
        $(".container-buttons").hide();
        $("#dd-event").change(function(){
            if($(this).val() == "0")
            {   
                var msg = "<span>Please select an event.</span>";
                $(".contact-list").append(msg);
                $(".guest-names").append(msg);
            }
            else
            {
                $(".contact-list").load("showUser.php");
                $(".container-buttons").show();
                $(".guest-names").empty(msg);

//THIS IS NOT WORKING

                $(".contact-list tr).on("click",function(){
                    $(this).css('background','red');
                });

//TRIED JUST TO TEST :NOT WORKING

                $(".name-row").on("click",function(){
                    alert("clicked!");
                });

//TRIED JUST TO TEST : NOT WORKING

                $(".contact-list .name-row").on("click",function(){
                    alert("clicks.");
                });
            }
        });

        $("#dd-event").trigger('change');
    });
    </script>
</head>
<body>

<div>
    <div>
        <h2 id="title">Event Management System</h2>
    </div>
</div>

<br><br>

  <div class="dropdown">
    <label>Event : <label/>
    <select name="event" id="dd-event" required>
      <option value="0" selected>Event</option>
      <?php foreach($retrieve as $r): ?>
      <option value="<?=$r['event_id']?>"><?=$r['event_name']?></option>
      <?php endforeach ?>
    </select>
  </div>


<br>

<div class="main">

    <div class="add-guest-contain">
        <tbody>
            <table class="contact-names">
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody class="contact-list">

                </tbody>
            </table>
        </tbody>
    </div>

    <div class="guest-list-contain">
        <tbody>
            <table class="guest-list">
                <thead>
                    <tr>
                        <th>Guest Name</th>
                    </tr>
                </thead>
                <tbody class="guest-names">

                </tbody>
            </table>
        </tbody>
    </div>

    <div class="container-buttons">
        <div class="contain-buttons">
            <input type="button" value=">" id="moveright" class="move">
            <br><br>
            <input type="button" value="<" id="moveleft" class="move">
        </div>
    </div>
</div>
</body>
</html

showUser.php

<?php

require "connection.php"; 

$check = $dbh->prepare("SELECT contact_id,salutation,fname,lname FROM contact1 ORDER BY fname ASC");
$check->execute();
if($check->rowCount() > 0)
{
    $check->setFetchMode(PDO::FETCH_ASSOC);
    while($rows = $check->fetch())
    {
        $salute = $rows['salutation'];
        $fname = $rows['fname'];
        $lname = $rows['lname'];

        echo 
        "<tr>
            <td class='name-row'><span style='font-size:14px;'>$salute $fname $lname</span></td>
        </tr>";
    }
}   
else
{
    echo 
    "<tr>
        <td>Contact Database is empty.</td>
    </tr>";
}   
?>

Please help. TIA!

2
Contributors
1
Reply
22
Views
2 Years
Discussion Span
Last Post by mattster
0

I have replicated this in jsFiddle, and all is working okay.

Your alert script will not kick in until $("#dd-event").change() is called (as its within an IF statement).

So as soon as you click on the dropdown and change the value, your script suddenly works, giving the appearance that jQuery isn't firing. If you want to change this, simply bring your code out of the IF.

Example: (Begins line 17)

else
{
    $(".contact-list").load("showUser.php");
    $(".container-buttons").show();
    $(".guest-names").empty(msg);
}

$(".contact-list .name-row").on("click",function(){
    alert("clicks.");
});
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.