Member Avatar for nadiam

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
  • 236 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by mattster
Member Avatar for mattster

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.");
});
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.