CODEWITHSUNDEEP
javascriptphpjqueryhtml
Yasitha
Yasitha

Reputation: 911

how to get html content of a div element using jquery

I have a dynamically created html table so I need to get some of the cell values in to jquery variables I tried next() nextAll() cosesst() but nothing work for me.

this is my table created using php

if ($result = $hongcon->query($query)) {
                                while ($row = $result->fetch_object()) {
                                    echo "<tr>";
                                    echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
                                    echo "<td><div id=\"id\" style=\"padding: 10px; \">$row->id</div></td>";
                                    echo "<td><div style=\"padding: 10px;\" class=\"edite\">$row->itemName</div></td>";
                                    echo "<td><div id=\"iid\" style=\"padding: 10px;\">$row->iId</div></td>";
                                    echo "<td><div id=\"pid\" style=\"padding: 10px;\">$row->pId</div></td>";
                                    echo "<td><div id=\"image\" style=\"padding: 10px;\">$row->itemImage</div></td>";
                                    echo "<td><div id=\"desc\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
                                    echo "<td><div id=\"pdfone\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
                                    echo "<td><div id=\"pdftwo\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
                                    echo "<td><div id=\"pdfthree\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
                                    echo "</tr>";
                                };

and I have following jquery function in my head section. this code is for testing. always it gives me undefined.

iid, pid, desc are the id that I want to get the values to variables.

$(document).ready(function() {
                $("div.edite").on("dblclick", function() {
                    OriginalText = $(this).html();
                    $id = $(this).next("td div").find("#iid").html();
                    alert($id);
      });
            });

Upvotes: 0

Views: 298

Answers (6)

user3291093
user3291093

Reputation:

Use this instead:

$id = $(this).parent("td div").find("#iid").html();

Because in your current code you have:

$id = $(this).next("td div").find("#iid").html();

And that wouldn't work because there is no td next to the div. Due to that, you won't be able to find div#iid inside the next td div.

Upvotes: 0

Cristofor
Cristofor

Reputation: 2097

You should change your php code in order to generate table rows with unique numeric identifier

<?php
if ($result = $hongcon->query($query)) {
while ($row = $result->fetch_object()) {
    echo "<tr>";
    echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
    echo "<td><div id=\"id_$row->id\" style=\"padding: 10px; \">$row->id</div></td>";
    echo "<td><div style=\"padding: 10px;\" class=\"edite\" editId=\"$row->id\">$row->itemName</div></td>";
    echo "<td><div id=\"iid_$row->id\" style=\"padding: 10px;\">$row->iId</div></td>";
    echo "<td><div id=\"pid_$row->id\" style=\"padding: 10px;\">$row->pId</div></td>";
    echo "<td><div id=\"image_$row->id\" style=\"padding: 10px;\">$row->itemImage</div></td>";
    echo "<td><div id=\"desc_$row->id\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
    echo "<td><div id=\"pdfone_$row->id\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
    echo "<td><div id=\"pdftwo_$row->id\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
    echo "<td><div id=\"pdfthree_$row->id\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
    echo "</tr>";
};
?>

JQUERY:

$(document).ready(function() {

            $("div.edite").on("dblclick",function() {
                $iid = "iid_"+$(this).attr('editId');
                OriginalText = $(this).html();
                $id = $("#"+$iid).html();
                alert($id);
            });
});

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Instead of this

$id = $(this).next("td div").find("#iid").html();

Use like this

$id = $(this).parent().siblings().find("#iid").html();

Upvotes: 1

miguel-svq
miguel-svq

Reputation: 2176

ids should be unique within the entire document. I think you should change the code a bit adding a suffix to each id (p.j. the number of the row) Anyway, you could select those values with a something like $(this).parent().parent().find("#iid").html();

Upvotes: 1

gwcoffey
gwcoffey

Reputation: 5921

You have this:

$id = $(this).next("td div").find("#iid").html();

But that won't work because there is no td that is next from the div.edite. And also, you won't be able to find the div#iid inside the next td div because it is that div already. Finally, you should avoid using IDs in this code because you will end up with duplicates which won't work. Change the above line to this and it should work:

$id = $(this).closest("TR").next("td div").html();

Upvotes: 1

Christoph
Christoph

Reputation: 307

You have a bad mistake in your code: You assign an ID for each row in the table. So your IDs are NOT unique but they should.

So try to make a difference: Use css-classes instead of IDs. Possible:

 <table><!-- ... --> <tr>
     <td class="mytable-td mytable-col-iid">...</td>
     <td class="mytable-td mytable-col-pid">...</td>
     <!-- ... -->
 <tr></table>

That design has two advantages:

  1. You can "hide" your padding in the class mytable-td
  2. You can get the values via jQuery by calling $('mytable tr').get(rowIndex).find('.mytable-col-iid').html()

Upvotes: 1

Related Questions