Member Avatar for nadiam

hi. i got 2 tables next to each other: .contact-names & .guest-list and a left and a right button between those tables and a drop down list. by default both tables have the message "Please select an event" from the drop down. when an event is selected .contact-names will be filled with names from database which was hidden by default while .guest-list is empty. when a 3 rows(names) from .contact-names is selected background for those rows change to red. and then when right button is clicked those three names get appended to .guest-list(class for guest-names tbody). the problem arises when 1 or 2 rows(names) not all 3 from .guest-list is clicked and left button is clicked instead of the 1 or 2 rows(names) prepended to .contact-list(class for contact-names tbody) all the rows(names) get prepended into .contact-list. help please. TIA!

<?php
  require "connection.php";
  $user_id = $_SESSION['sess_user_id'];
  $eventnames = $dbh->prepare("SELECT event_id,event_name FROM event WHERE euser_id = :user_id ORDER BY start_event ASC");
  $eventnames->bindParam(':user_id', $user_id);
  $eventnames->execute();
  $retrieve = $eventnames->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
    <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")
            {   
                $(".contact-list tr").hide();
                var msg = "<span>Please select an event.</span>";
                $(".contact-list").append(msg);
                $(".guest-names").append(msg);
            }
            else
            {
                $(".contact-list tr").show();
                $(".container-buttons").show();
                $(".guest-names").empty(msg);

                $(".contact-list tr").on("click", function(){
                    var row = $(this).css('background','red');
                    $("#moveright").on("click", function(){
                        row.appendTo(".guest-names");
                        row.css('background','');
                    });
                    $("#moveleft").on("click", function(){
                        row.prependTo(".contact-list");
                        row.css('background','');
                    });
                });
            }
        });

        $("#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">
                <?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'><input type='hidden' value='$salute $fname $lname' name='guest-name[]'><span style='font-size:14px;'>$salute $fname $lname</span></td>
                            </tr>";
                        }
                    }   
                    else
                    {
                        echo 
                        "<tr>
                            <td>Contact Database is empty.</td>
                        </tr>";
                    }   
                ?>
                </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
  • 2 Contributors
  • 2 Replies
  • 217 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by nadiam

Recommended Answers

All 2 Replies

Member Avatar for hericles

The problem is that you aren't dealing with each row in the contacts-list table separately. This code :
$(".contact-list tr").on("click", function(){
gets all of the rows in .contact-list, not just the selected ones.

One solution could be to add a css class to the table row being clicked via jquery and then the move right/move left functions look for, and affect, only the table rows with that css class (and them remove it after the move of course)

Member Avatar for nadiam

like this?

$(".contact-list tr").on("click", function(){
    var selected = $(this).addClass("higlighted");
    $("#moveright").on("click", function(){
      selected.appendTo(".guest-names");
      selected.removeClass("higlighted");
    });
    $("#moveleft").on("click", function(){
      selected.appendTo(".contact-list");
      selected.removeClass("higlighted");
    });
});

.highlighted {background: red}

but the rows clicked doesn't turn red and move left doesn't append the row it disappears.

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.