HTML onclick function doesn't call through PHP echo

Question

Originally I had the following to produce a menu using PHP:

<ul>
   <?php 
         $items = mysqli_query($con, "SELECT DISTINCT item FROM table");
         while ($row = mysqli_fetch_array($items)) { ?>
             <li><a href='#' onclick='myFunction(<?php echo $row['item'] ?>)'><?php echo $row['item'] ?></a></li><? php 
         } ?>
</ul>

I had this code inside an index.php page surrounded by html. The is to produce a menu from items in a database. In this form it worked fine and called 'myFunction(string)' which is in a seperate global.js file.

function myFunction(string) {
$('#container').load('php/getContent.php', {string: string});
}

getContent.php is similar to the php above. except it uses a where clause in the query which it extracts from the string.

So my problem arose when I went to clean up the code which produces the menu. I added the following function to global.js

$(document).ready(function() {
    $('#menu').load('php/getMenu.php');
});

getMenu.php looks like this:

$items = mysqli_query($con, "SELECT DISTINCT item FROM table");

echo "<ul class='tab'>";
while ($row = mysqli_fetch_array($items) {
    echo "<li><a href='#' onclick='myFunction(".$row['item'].")'>".$row['item']."</a></li>";
}
echo "</ul>"

This works correctly in producing the menu items as before except the onclick function no longer works. Placing an anonymous inline onclick function did work however so I figured it may be the $(document.ready() inside the global.js file causing issues. I moved the $(document).ready() back into index.php in a script tag to check, still not working.

I originally had the script tags as the last elements in the body so I moved them up into the header to check if that changed anything but that also didn't work.

the header tag looks as follows:

<script src='scripts/jquery-3.0.0.js'></script>
<script src='scripts/global.js'></script>
<script>
     $(document).ready(function() {
         $('#menu').load('php/getMenu.php');
     });
</script>

all my php files are in a subfolder called php and all my js files in a subfolder called scripts.

So firslty, does it matter if I have the $(document).ready() in a js file with other functions, does that mess with the other functions?

Secondly any idea on why the function is no longer being called?

Thanks in Advance.

change ´myFunction(string)´ to ´function myFunction(string)´. Do you really have a element named ´menu´? Or is it an id name? — , Jun 20 '16 at 22:51
the function myFunction() was just a mistake in the text, it's like that in code. 'menu' is the id of a
, also just a typing mistake transcribing, not in the actual code :) — , Jun 20 '16 at 22:57
Remember, PHP runs only on the server, never in the browser. Never at the same time as JavaScript. The only way PHP and JavaScript can work together is through the HTTP pipe in the form of links, forms and XHR. jQuery `load` is an XHR call, so you need to use a URL, not a file path, to get through HTTP back to the server and PHP. This answer may help you: [URL not file path](http://stackoverflow.com/a/12524381/2743458) — bloodyKnuckles, Jun 20 '16 at 23:04
Shouldn't matter if you have `$(document).ready()` in another file. As for why it's not being called anymore, have you checked your dev tools for an error message? I wanted to say that you're printing out variables instead of strings for the parameters in your click callback, perhaps something like this: `echo "
The string `` should be quoted because it is a string in JS, I'd think. — chris85, Jun 20 '16 at 23:08
Have you tried using developer tools from Chrome or Firefox, to check if the console is displaying any errors or warnings? Like undefined function or something like that. In Chrome you can bring it up with the shortcut CTRL + SHIFT + i — Tiago, Jun 20 '16 at 23:09

score 0 · Accepted Answer · 2016-06-20T23:39:43.913

0

This is a problem I had too. When you generate elements after the DOM fully loads the onclick wont work anymore. In my case I used:

$('parent of element which is in DOM').delegate('element', 'event', function(){
});

And worked.

Take a look at jQuery API http://api.jquery.com/delegate/

In your case your php should be like:

$items = mysqli_query($con, "SELECT DISTINCT item FROM table");

echo "<ul class='tab'>";
while ($row = mysqli_fetch_array($items) {
    echo '<li><a href="#">'.$row['item'].'<input class="sql_input" hidden="hidden" value="'.$row['item'].'"></a></li>';
}
echo '</ul>';

And your Javascript:

function load_file(value){
   $('#container').load('php/getContent.php', {string: value});
}

$('parent of .tab').delegate('.tab li a', 'click', function(){
   var get_value = $(this).find('.sql_input').val();
   load_file(get_value);  
});

edited Jun 20 '16 at 23:39

answered Jun 20 '16 at 23:09

delegate is no longer the preferred method for delegated events - the recommended method to bind events is using $.on - http://api.jquery.com/on/ – Sam Dufel Jun 20 '16 at 23:31
Hmmm, "Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()." and "Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.". Same page you named. – Jun 20 '16 at 23:34
.... you didn't read carefully enough, $.on allows you to bind handlers for delegated events. The element to which you bind the handler has to exist, yes, but not the element triggering the event. – Sam Dufel Jun 20 '16 at 23:46
DOCTYPE is correct though, I just tried the other way for interest sake. I put it in the $(document).ready() so it would try to bind the $.on() in the same function where the element it's being bound to is created, it wasn't doing the trick. Delegating does the trick though. – Jun 21 '16 at 00:01
Hmmm, elements to trigger an event shouldn't be loaded before $.on is ready? As I now and readed carefully delegate is only for elements which don't comes up with the DOM. $.on event or onClick attribute only with elements which comes with the DOM. – Jun 21 '16 at 00:20

HTML onclick function doesn't call through PHP echo

1 Answers1