CODEWITHSUNDEEP
phpjqueryajax
Alen
Alen

Reputation: 917

Issue with getting data from HTML into jQuery

I'm trying to pass some data from HTML to jQuery, my code partially works, but since I have more than one tags with same class I don't know how to send data only from tag which is clicked. I tried to send data through javascript function but with no luck. Can someone take a look at my code and try to help me.

<div id="inboxWindow">
        <table id="list_ofMessages">
            <tr>
                <td>id</td>
                <td>From</td>
                <td>Title</td>
                <td>Date</td>
            </tr>
        <?php while($data = $query2->fetch_assoc()): ?>
            <?php 
                $senderID = $data['senderID'];
                $query3 = $con->query("select * from login where user_id = '$senderID'");
                $name = $query3->fetch_assoc();
                $name = $name['username'];
             ?>
            <tr>
                <?php if($data['opened'] == 1) : ?>
                <td class="messageID"><?php echo $data['idmessage']; ?></td>    
                <td><?php echo $name; ?></td>   
                <td><a class="readMessageLink"><?php echo $data['title']; ?></a></td>
                <td><?php echo $data['received']; ?></td>
            <?php else : ?>
                <td class="messageID"><b><?php echo $data['idmessage']; ?></b></td> 
                <td><b><?php echo $data['senderID']; ?></b></td>    
                <td><b><a class="readMessageLink"><?php echo $data['title']; ?></a></b></td>
                <td><b><?php echo $data['received']; ?></b></td>
            <?php endif; ?>
            </tr>
        <?php endwhile; ?>
        </table>
    </div>
    <div id="messageWindow">
        <label id="titleArea"></label><br><br>
        <label>Message:</label><br>
        <label id="contentArea"></label>
    </div>

script.js

$(".readMessageLink").click(function(){
        $.post("readMessage.php", {"id" : $(".messageID").html()}, function(data){
            var obj = jQuery.parseJSON(data);
            $("#titleArea").html("Title: " + obj.title);
            $("#contentArea").html(obj.content);
        });
        $("#inboxWindow").slideToggle(300);
        $("#messageWindow").slideToggle(300);
    });

Using this code I always get messageID from first message, no matter on which one I click.

Upvotes: 1

Views: 81

Answers (2)

Sonu Sindhu
Sonu Sindhu

Reputation: 1792

try this

"id" : $(this).closest('tr').find(".messageID").text();

Upvotes: -1

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17586

use 

"id" : $(this).closest('tr').find(".messageID").text()

instead of 

"id" : $(".messageID").html()

Upvotes: 2

Related Questions