Hi, guys. Im having this weird thing where the buttons not responding to clicks handled by jquery.

i got a page which lists events then when an event names is clicked a table of guest list appears next to it. like this:

cf2669fd96869baa104ebf595b1f206c

the page is handled by ajax:

<script language="javascript" type="text/javascript">
     $(document).ready(function(){
        function getsum(str)
        {   
            if (window.XMLHttpRequest)
            {
                // Create the object for browsers
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // Create the object for browser versions prior to IE 7
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                // if server is ready with the response
                if (xmlhttp.readyState==4) 
                {
                    // if everything is Ok on browser
                    if(xmlhttp.status==200) 
                    {    
                        //Update the div with the response
                        document.getElementById("result").innerHTML=xmlhttp.responseText;
                    }
                }
            }
            //send the selected option id to the php page 
            xmlhttp.open("GET","guest-names.php?q="+str,true);
            xmlhttp.send();
           }
</script>

    <div class="table-wrap">
        <tbody>
            <table class="event-list">
                <thead>
                    <tr>
                        <th>Event List</th>
                    </tr>
                </thead>
                <tbody class="event-names">
                    <?php
                    require "connection.php";
                    $events = $dbh->prepare("SELECT event_id, event_name FROM event");
                    $events->execute();
                    if($events->rowCount() > 0)
                    {
                        $events->setFetchMode(PDO::FETCH_ASSOC);
                        while($rows = $events->fetch())
                        {
                            $eventid = $rows['event_id'];
                            $eventname = $rows['event_name'];

                            echo 
                            "
                            <tr><td id='td'><a href='#' id='event-name' onclick='getsum(".$eventid.")'>$eventname</a></td></tr>
                            ";
                        }
                    }
                ?>
                </tbody>
            </table>
        </tbody>
    </div>

<div class="label-wrap" id="result">
   Click on an event.
</div>

guest-names.php:

<?php

$q = $_GET['q'];

require "connection.php";
$name = $dbh->prepare("SELECT guest_name FROM guest WHERE event_id = ?");
$name->bindParam(1, $q, PDO::PARAM_INT);
$name->execute();
if($name->rowCount() >0)
{ 
       echo "
       <input type='button' value='Print Guest List' class='print-guest-list'><br><br>
       <input type='button' value='Click Me' class='clickme'>
        <tbody>       
            <table class='guest-list'>
                <thead>
                    <tr>
                        <th>Guest Names</th>
                    </tr>
                </thead>
                <tbody class='guest-names'>";

    $name->setFetchMode(PDO::FETCH_ASSOC);
    while($rows = $name->fetch())
    {
        $gname = $rows['guest_name'];

        echo
        "<tr>
            <td>$gname</td>
        </tr>";
    }

    echo "
            </tbody>
        </table>
    </tbody>";
}
else
{
    echo "No confirmed guests.";
}
?>

these buttons

<input type='button' value='Print Guest List' class='print-guest-list'><br><br>
<input type='button' value='Click Me' class='clickme'>

I tried to use jquery to do something but nothing happens

 $(document).ready(function(){
     $(".clickme").click(function(){
          alert("click");
     });
});

but i've done this for other pages and they work fine. just this page refuses to cooperate and i can't find the problem. these two pages arent doing much so theres not much code either.

Recommended Answers

All 4 Replies

I tried to use jquery to do something but nothing happens

Did you include the link to the jQuery script?

simple answer is that you do not call your jquery code from anywhere. This just might be you haven't included all your code. More complicated answer to follow in 5 minutes

change your event.php to

    require "connection.php";
    $events = $dbh->prepare("SELECT event_id, event_name FROM event");
    $events->execute();
    if($events->rowCount() > 0)
    {
        $events->setFetchMode(PDO::FETCH_ASSOC);
        while($rows = $events->fetch())
        {
            $content = array('eventid'=>$rows['event_id'],
                             'eventname'=>$rows['event_name']);
            $anarray[] = $content;

        }
        echo json_encode($anarray);
     }
     else
     {
        die('No Data!');

     }

then change guest-name.php to

require "connection.php";
$q = $_GET['event'];
$name = $dbh->prepare("SELECT guest_name FROM guest WHERE event_id = ?");
$name->bindParam(1, $q, PDO::PARAM_INT);
$name->execute();
if($name->rowCount() >0)
{ 
    $name->setFetchMode(PDO::FETCH_ASSOC);
    while($rows = $name->fetch())
    {
        $content = array('gname'=>$rows['guest_name']);
    $anarray[] = $content;

    }
    echo json_encode($anarray);
}
else
{
    die('No Data!');
}

use one HTML page just for an example I will call it event_screen.html or .php whichever you prefer. you must call your jQuery docs from here

eg <script type="text/javascript" src="../jquery/jquery-1.7.2.min.js"></script>

plus your own jquery doc

eg <script type="text/javascript" src="../js/myjquery.js"></script>

    <div class="table-wrap">
        <tbody>
            <table class="event-list">
                    <thead>
                            <tr>
                                <th>Event List</th>
                            </tr>
                    </thead>
                    <tbody class="event-names" id="events">
                    </tbody>
                </table>
        </tbody>
        </div>

    <div class="label-wrap" id="result">
        Click on an event.
    </div>


        <table class='guest-list'>
            <thead>
                    <tr>
                        <th>Guest Names</th>
                    </tr>
                </thead>
                <tbody class='guest-names' id="guests">

                </tbody>
        </table>

then finally add in your jquery

call it myjquery.js

$(document).ready(function()
{
    $.getJSON('../php/event.php', function(data)
    {
        $.each(data, function(i,data)
        {
            var elm = '<tr><td id="' + data.eventid + '" class="eventname">' + data.eventname + '</td></tr>';
            $('#events').append(elm);
        });
    });


    $(.eventname).click(function()
    {
        $.getJSON('../php/guest-name.php', { "event":$(this).attr(id)}, function(data)
        {
                var elm = '<input type="button" value="Print Guest List" class="print-guest-list"><br><br>';
            $('#guests').prepend(elm);
                var elm = '<input type="button" value="Click Me" class="clickme">';
            $('#guests').prepend(elm);

            $.each(data, function(i,data)
            {
                var elm = '<tr><td>' + data.gname + '</td></tr>';       
                $('#guests').append(elm);
            }); 
        });
    });
    $(.clickme).click(function()
    {
        alert('click me class');
    });
});

this is just a quick example I haven't checked the syntax or anything but I am sure that you will get the idea. If not PM me I might reply.

pritaeas jquery script is in the same page.

noelthefish i would really like to not have so many pages just to make one page work.

my jquery script, html is in one page(the first block of code in OP). while the php(guest_names.php) to call the guest names is in a different page.

lets take a different page essentially its the same as OP but without AJAX just jquery (full code):

<!DOCTYPE html>
<html>
<head>
    <title>EMS | Add Guest</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link rel="stylesheet" type="text/css" media="all" href="css/header.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/navbar.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/addg-style.css" />
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
        alert("load");
        $(".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();
                $(".contact-list").empty(msg);
                $(".guest-names").empty(msg); 

I CAN'T GET THIS PART OF THE SCRIPT TO WORK AS IN NOTHING HAPPENS:
//.name-row class for td in showUser.php

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

//

            }
        });

        $("#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></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())
    {
        $id = $rows['contact_id'];
        $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>";
}   
?>
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.