Add Javascript event to button in PHP

Question

In a database, a number of items are stored. When the user loads the page, the items are listed as rows of a table. To enable that the user can remove elements (rows), each row also provides a "Remove item" button with an onclick event attached to it. Here's the PHP part that generates the table.

for ($i=0; $i<$num_books; $i++)
{
    $book  = mysql_fetch_row($classics);
    $shop .= "<tr>\n";
    $shop .= "<td>".$book[0]."</td>\n";
    $shop .= "<td><input type='button' onclick='remove_item()' value='Remove' /></td>\n";
    $shop .= "</tr>\n";
}

The remove_item() function is defined externally in JQuery (see below).

However, now clicking the buttons results in an error: ReferenceError: Can't find variable: remove_item. I believe it's because the remove_item()functions which are returned by PHP are not known to the DOM.

How can this be corrected?

The complete markup is here

 <html>
     <head>
     <script type='text/javascript'
             src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
     </script>
     <script type="text/javascript"
             src="../behaviour/interactions.js">
     </script>
     </head>
     <body>
         <h1>Publications database</h1>
         <div id="items"></div>
     </body>
 </html>

The complete interactions.js script is here

$('document').ready(function()
{
    // Path to MySQL configuration.
    var server = '../server/'
    var data   = '../data/'

    function mysql_connection_setup()
    {
        $.get(data + 'mysql_connection_setup.php');
    }

    function populate()
    {
        $.get(server + 'shop.php', cb);
    }

    function remove_item()
    {
        console.log("Remove item.");
    }

    // Generic AJAX callback.
    function cb(response)
    {
        $('#items').html(response);
    }

    mysql_connection_setup();
    populate();
}); // End ready

Try onclick='javascript: remove_item()'. If the remove_item() function is defined in a page that is included on the current page, then this should work. — Aiias
– Aiias, Commented Apr 7, 2013 at 20:33
I tried your suggestion but it does not work. I get the same error message. Yes, remove_item() is defined in the Javascript that loads with the page. — TMOTTM
– TMOTTM, Commented Apr 7, 2013 at 20:39
To confirm this, if you right click on the page and choose Inspect element with Chrome, click on Console then type in remove_item() it should be triggered successfully. If it is not, then it's not properly included on the page. — Aiias
– Aiias, Commented Apr 7, 2013 at 20:41
Yes that's the problem. I entered remove_item() in the console and it's not recognized (Can't find variable: remove_item). — TMOTTM
– TMOTTM, Commented Apr 7, 2013 at 20:43
Then it is not being included or defined globally on the page. You're defining the function within the $(document).ready() function. You should place the function outside of this so it is globally accessible to the page. — Aiias
– Aiias, Commented Apr 7, 2013 at 20:49

sybear · Accepted Answer · 2013-04-07 20:53:55Z

3

Put this in the <head> tag:

<script>
  function remove_item()
  {
      console.log("Remove item.");
      // Fancy AJAX call to manipulate database.
  }
</script>

By doing this, it will be possible to access the function globally. Or, at least, you have to declare your functions before calling them.

Ok, here should be the solution: First, declare variables globally.

<head>
  <script>
    var mysql_connection_setup, populate, remove_item, cb ;
  </script>
</head>

Then assign functions to the variables:

$('document').ready(function()
{
    // Path to MySQL configuration.
    var server = '../server/'
    var data   = '../data/'

    mysql_connection_setup = function()
    {
        $.get(data + 'mysql_connection_setup.php');
    }

    populate = function()
    {
        $.get(server + 'shop.php', cb);
    }

    remove_item = function()
    {
        console.log("Remove item.");
    }

    // Generic AJAX callback.
    cb = function(response)
    {
        $('#items').html(response);
    }

    mysql_connection_setup();
    populate();
}); // End ready

You cannot declare function inside other functions. But you can create variables-callbacks inside.

edited Apr 7, 2013 at 20:53

answered Apr 7, 2013 at 20:33

sybear

7,7921 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TMOTTM Over a year ago

The function remove_item() is defined in the Javascript which is loaded in the <head> of the page.

sybear Over a year ago

You could post some more code, so we could see how it is included.

sybear Over a year ago

@TMOTTM Check for the new answer.

TMOTTM Over a year ago

I was not aware of that I can not declare functions inside other functions. To be explicit, also not in ready()? However, the proposed solution works.

TMOTTM Over a year ago

I'm reading ''Javascript & JQuery, The missing manual''. It's definitely not true that one can not define a new function within the ready() function.

Vassilis Barzokas · Accepted Answer · 2013-04-07 20:57:31Z

0

Since you are already including jQuery consider using its own functions for click and document ready.

I would change the PHP code to this:

for ($i=0; $i<$num_books; $i++)
{
    $book  = mysql_fetch_row($classics);
    $shop .= "<tr>\n";
    $shop .= "<td>".$book[0]."</td>\n";
    $shop .= "<td><input type='button' class='myClass' value='Remove' /></td>\n";
    $shop .= "</tr>\n";
}

And at the <head> part of the HTML document i would add this:

$(document).ready(function(){
    $('.myClass').click(function(){
       console.log("Remove item."); //or call directly remove_item();
    });
});

edited Apr 7, 2013 at 20:57

answered Apr 7, 2013 at 20:42

Vassilis Barzokas

3,2822 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Add Javascript event to button in PHP

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related