CODEWITHSUNDEEP
phpjquerymysql
CJS
CJS

Reputation: 351

Using jQuery within the context of an MySQL table

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>";     
    }

Upvotes: 0

Views: 163

Answers (2)

haltabush
haltabush

Reputation: 4528

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>

Upvotes: 1

David
David

Reputation: 218808

<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).

Upvotes: 1

Related Questions