jQuery does not apply code to content outputted by PHP

Question

I am really stuck on an issue. I have some PHP code that outputs correctly to HTML and displays as it should in the browser (and firebug shows the source is correct), but because the information is sent by PHP to display a list of clients, my jQuery on click 'Options' menu will not work - it gets ignored. If the rows are written in flat HTML, the jQuery on click works for the 'Options' menu, so I know the jQuery is fine. On click of 'Options', the 'action-menu' ul list should toggle its display and go from none to block.

PHP:

<?php
include('dbConfig.php');
$term = $_POST['searchit'];

if($term == ''){
    echo '<div class="row"><div class="col-2"></div>Enter a search term</div>';
} else {
    if($client = $db->prepare("SELECT client_id, client_unique_id, client_first_name, client_last_name, client_organisation_name, client_telephone, client_list_all FROM clients WHERE client_unique_id LIKE ? OR client_first_name LIKE ? OR client_last_name LIKE ? OR client_organisation_name LIKE ? OR client_address_line_1 LIKE ? OR client_list_all LIKE ? ORDER BY client_id DESC")){

        $client->bind_param('ssssss', $term, $term, $term, $term, $term, $term);
        $client->execute();
        $client->bind_result($client_id, $client_unique_id, $client_first_name, $client_last_name, $client_business, $client_telephone, $client_list_all);
        $client->store_result();

        $string = '';
        if($client->num_rows > 0){
            while($client->fetch()){

                $properties = $db->prepare("SELECT property_id FROM properties WHERE property_client_id = ? LIMIT 1");
                $properties->bind_param('i', $client_id);
                $properties->execute();
                $properties->store_result();
                $properties->bind_result($property_id);

                if($properties->num_rows > 0 ){
                    $active = '<span class="label label-success">ACTIVE</span>';
                } else {
                    $active = '<span class="label label-warning">INACTIVE</span>';
                }

                if(!$client_business){
                    $client_business = 'N/A';
                }

                $properties->close();

                $string .= '<div class="row">';
                $string .= '<div class="col-2">'.$client_unique_id.'</div>';
                $string .= '<div class="col-3">'.$client_first_name.' '.$client_last_name.'</div>';
                $string .= '<div class="col-3">'.$client_business.'</div>';
                $string .= '<div class="col-2">'.$client_telephone.'</div>';
                $string .= '<div class="col-2 align-center">';
                $string .= '<div class="action">Options<span class="action-arrow"><i class="fa fa-caret-down"></i></span>';
                $string .= '<ul class="action-menu">';
                $string .= '<li><a href="view-client.php?client='.$client_id.'"><i class="fa fa-folder-open-o"></i>View client</a></li>';
                $string .= '<li><a href="edit-client.php?client='.$client_id.'"><i class="fa fa-pencil-square-o"></i>Edit client</a></li>';
                $string .= '<li><a onclick="deleteItem($(this))" style="cursor: pointer;" data-client-id="'.$client_id.'"><i class="fa fa-trash-o"></i>Delete client</a></li>';
                $string .= '</ul>';
                $string .= '</div>';
                $string .= '</div>';
                $string .= '</div>';
            }
            $client->close();
        } else {
            $string = '<div class="row"><div class="col-2"></div>No record found</div>';
        }
        echo $string;

    } else {
        echo '<div class="row"><div class="col-2"></div>ERROR: Could not prepare SELECT Client SQL statement.</div>';
    }
}
?>

And the jQuery:

$(document).ready(function () {
    $('.action').on('click', function () {
        $('.action-menu').fadeToggle(200);
        $(this).toggleClass('action-on');
    });
});

If they're being added dynamically after the page is loaded, you need to use event delegation. See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jun 02 '14 at 18:29
I've updated my PHP script above to show the whole code. It all works perfectly until I attempt to put in a ul menu that requires jQuery to open it and close it on click — darylsummers, Jun 02 '14 at 18:29
you suppose to have js error in a console. the code looks good — volkinc, Jun 02 '14 at 18:31
No errors are flagging up in firebug with js - it's like the code is being completely ignored by the browser, even though the document structure is the same as it would be displayed if each item was typed in flat HTML — darylsummers, Jun 02 '14 at 18:33
The browser doesn't care and can't tell whether the HTML was created statically or via PHP -- all it sees is the resulting HTML. — Barmar, Jun 02 '14 at 18:43
Can we access the page? Or can you copy the resulting HTML to a jsfiddle? — Barmar, Jun 02 '14 at 18:47

score 1 · Answer 1 · answered Jun 02 '14 at 18:33

1

Try changing your jQuery like this:

$(document).ready(function () {
    $('div.row').on('click', '.action', function () {
        $('.action-menu').fadeToggle(200);
        $(this).toggleClass('action-on');
    });
});

This will target the .action class elements no matter when they are loaded. Adding the selector parameter into the .on() method lets jQuery find elements that match no matter when they are created. If you have .action elements outside of the .row element, select for an element that contains them all. If all else fails, use body.

answered Jun 02 '14 at 18:33

Surreal Dreams

24,368
3
42
57

Unfortunately this done nothing, jQuery is not being applied to source – darylsummers Jun 02 '14 at 18:39
Have you verified that jQuery is loading? I imagine your PHP file could be loading from a different path than the html version was? – Surreal Dreams Jun 02 '14 at 18:41
Yes it is loading. If I compare a flat HTML page with the same information and a PHP page that has pulled the data from a database using the PHP code above, the jQuery function works on the flat HTML, but will not work on the PHP generated content. This is really getting to me I just cannot understand why/what the issue is – darylsummers Jun 02 '14 at 18:46
There has to be a difference in the resulting HTML. Compare View Source between the two versions. – Barmar Jun 02 '14 at 19:44

score 1 · Answer 2 · edited Jun 02 '14 at 18:36

1

If you are adding the HTML dynamically, you can add the onclick event to any reliable parent that would exist on DOM load (eg:body).

Try to change the onclick like below,

$('body').on('click', '.action', function ()
{

    $('.action-menu').fadeToggle(200);

    $(e.target).toggleClass('action-on');

});

edited Jun 02 '14 at 18:36

LSerni

49,775
9
56
97

answered Jun 02 '14 at 18:34

Muthu Vijayan

93
9

Unfortunately this done nothing, jQuery is not being applied to source – darylsummers Jun 02 '14 at 18:40
Can you please give the url to verify, if it is hosted? – Muthu Vijayan Jun 02 '14 at 18:56

score 1 · Answer 3 · answered Jun 06 '14 at 08:31

1

Thanks for all the support. The jQuery code that required this to work needed to be placed in the actual HTML file at the end of the PHP script - for reasons unknown, as it would not listen to the same code in the javascript.js file

answered Jun 06 '14 at 08:31

darylsummers

89
1
10

jQuery does not apply code to content outputted by PHP

3 Answers3