CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Phantom
Phantom

Reputation: 688

Finding element in jquery ajax html answer

The following code:

        ajax_obj = $.ajax(
        {
        data: data,
        success: function(answer)
        {
            console.log(answer);
            console.log($('#table_conferences_tbody', answer).html());
            console.log($(answer).find('tbody').html());
            console.log($(answer).find('tr').length);
        }
    });

Console Result:

<div><tbody id="table_conferences_tbody"><tr id="conf26" class="darkrow"><td><span class="expand">&nbsp;</span></td><td class="cm_aln">20.03.26</td><td class="no_border">13:00</td><td class="cm_aln no_border">&minus;</td><td>14:00</td><td>TEst</td><td>Test</td><td>Dr. Fariss Chegrani</td></tr><tr id="conf25" class="lightrow"><td>&nbsp;</td><td class="cm_aln">20.02.26</td><td class="no_border">12:00</td><td class="cm_aln no_border">&minus;</td><td>13:00</td><td>Test</td><td>Test</td><td> Petra Haubrich</td></tr><tr id="conf27" class="darkrow"><td>&nbsp;</td><td class="cm_aln">20.03.20</td><td class="no_border">12:11</td><td class="cm_aln no_border">&minus;</td><td>13:11</td><td>Test</td><td>TEst</td><td>Dr. Ariane Hähn</td></tr><tr id="conf24" class="lightrow"><td>&nbsp;</td><td class="cm_aln">30.11.12</td><td class="no_border">15:00</td><td class="cm_aln no_border">&minus;</td><td>17:00</td><td>Test</td><td>Test</td><td> Petra Haubrich</td></tr></tbody></div>
undefined
undefined
0

I don't understand why I can't find any elements within the answer. It works with others answers, so I'm really stuck here. I validated the html answer, it seems correct. What did I do wrong? Thank you very much...

Upvotes: 1

Views: 81

Answers (1)

guest271314
guest271314

Reputation: 1

<tbody>

Usage context:

Permitted parent elements:

Within the required parent <table> element, the <tbody> element can be added after a <caption>, <colgroup>, <thead> and a <tfoot> element.

If possible, try adding <table> element to wrap <tbody> element within html. See <table> 

// added `<table>` element as parent of `<tbody>` element
var html = '<div><table><tbody id="table_conferences_tbody"><tr id="conf26" class="darkrow"><td><span class="expand">&nbsp;</span></td><td class="cm_aln">20.03.26</td><td class="no_border">13:00</td><td class="cm_aln no_border">&minus;</td><td>14:00</td><td>TEst</td><td>Test</td><td>Dr. Fariss Chegrani</td></tr><tr id="conf25" class="lightrow"><td>&nbsp;</td><td class="cm_aln">20.02.26</td><td class="no_border">12:00</td><td class="cm_aln no_border">&minus;</td><td>13:00</td><td>Test</td><td>Test</td><td> Petra Haubrich</td></tr><tr id="conf27" class="darkrow"><td>&nbsp;</td><td class="cm_aln">20.03.20</td><td class="no_border">12:11</td><td class="cm_aln no_border">&minus;</td><td>13:11</td><td>Test</td><td>TEst</td><td>Dr. Ariane Hähn</td></tr><tr id="conf24" class="lightrow"><td>&nbsp;</td><td class="cm_aln">30.11.12</td><td class="no_border">15:00</td><td class="cm_aln no_border">&minus;</td><td>17:00</td><td>Test</td><td>Test</td><td> Petra Haubrich</td></tr></tbody></table></div>';
var answer = $(html);
console.log(answer);
console.log($('#table_conferences_tbody', answer).html());
console.log(answer.find('tbody').html()); // removed second call to `jQuery()` around `answer`
console.log(answer.find('tr').length);

var withTable = "<div><table><tbody><tr>b</tr></tbody></table></div>";
var withoutTable = "<div><tbody><tr>a</tr></tbody></div>";    
console.log($(withTable), $(withTable).find("tbody")
           , $(withoutTable),  $(withoutTable).find("tbody"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 1

Related Questions