Using jQuery within the context of an MySQL table

Question

I have some jQuery code that is having difficulty running because I'm using it with a dynamically created table (getting variables from a MySQL table). I would like to to display the corresponding PHP variable $row['name'] in the msg div. So it would say something like:

    $("#msg").text($("<?php echo $row['name']; ?> has been booked.");

Btw I'm not sure if that is the correct way of putting it.

Unfortunately when the user clicks on button3 it only updates the first msg div and ignores the rest. Is there any way for me to dynamically link jQuery instances with the PHP code generated so that it can update the correct msg div and display the correct message afterwards.

The jQuery code is in the head of my document and the PHP code is in the body.

jQuery code

<!-- alert -->

<script type="text/javascript">
 $(".button3").click(function() {
    $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button",this).text() + " has been booked.");
        });
    })
</script>

Dynamically created table:

if($res->numRows() > 0)
{
    echo "<table class='zebra'>
    <tr>
    <th scope='col'>Name</th>
    <th scope='col'>Capacity</th>
    </tr>";
    while($row = $res->fetchRow())
    {
        echo '<tr align="left">';
        echo "<td>{$row['name']}</td>";
        echo "<td>{$row['capacity']}</td>";

        <div>
        <input type='image' class='button3' src='resources/book.png'
        style='padding-top: 15px;'/>
        </div>

        <div id='msg'>
        </div>
        </td>";     
    }

IDs should be unique within an HTML document. You should rethink your approach — Andrew
– Andrew, Commented Mar 26, 2012 at 19:52
you're likely having multiple divs with id='msg', you may want to move to using a class, and use $(this).children(".msg") inside the parent's function. — Chris Carew
– Chris Carew, Commented Mar 26, 2012 at 19:53
$("button",this).text() has no value because it refers to a button element within the input element which doesn't exist. — j08691
– j08691, Commented Mar 26, 2012 at 19:55

haltabush · Accepted Answer · 2012-03-26 20:18:28Z

1

I didn't test it, but I hope it will help you. I'm going to jsFiddle to check that out.

Here it is. I had to change a lot of thing in the HTML, I'm not sure if it's exactly what you wanted?

For a matter of laziness, I would add a class to the cell containing the name (and this way you won't have to bother about the order of the cells)

    echo "<td class="name">{$row['name']}</td>

Then, you can simply replace your onclick function to :

<script type="text/javascript">  $(".button3").click(function() {
    var clickedButton = $(this);
    $(this).parent().slideUp("slow", function () {
        $("#msg").text(clickedButton.parent().parent().find('.name').text() + " has been booked.");
        });
    }) </script>

edited Mar 26, 2012 at 20:18

answered Mar 26, 2012 at 20:03

haltabush

4,5382 gold badges26 silver badges42 bronze badges

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

Comments

David · Accepted Answer · 2012-03-26 19:55:35Z

<div id='msg'>

This shouldn't be in a loop. If there are multiple HTML elements with the same id then I imagine the jQuery response to selecting them is going to be undefined and browser-specific. It would be better to use something like this:

<div class='msg'>

And select it with this:

$("div.msg")

Also of note, you seem to have a typo on this line:

$("#msg").text($(">?php echo $row['name']; ?> has been booked.");

The opening bracket for the PHP code is reversed. Additionally, what is the order of events here? You'll want to make sure that you're not trying to dynamically add PHP code to a client-side page. That won't work. If your JavaScript code needs to get information from your PHP code, it will need to contact a server resource (most likely in a call to .ajax() or similar functions, where a server-side resource accepts parameters and renders the information, likely as a JSON object).

Collectives™ on Stack Overflow

Using jQuery within the context of an MySQL table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related