Question

I have this code:

$('#customerPaymentTable > tbody > tr').eq(index).after("<tr><td colspan='6'><center>" + $('#customerRecordForm').load(url) +  "</center></td></tr>");

The problem is it returns this value object Object instead of the div element. The weird part is if I load the div independently, I mean if I don’t insert it in the table row it is working.

The working code is:

$('#customerRecordForm').load(url);

How am I gonna make it work? I really need that div form to be inserted. Please help. Thanks in advance.

Answer 1

The issue is because $('#customerRecordForm').load(url); will fill the #customerRecordForm element with the HTML from the url and then return the jQuery object, not the HTML as a string.

You have two options. Firstly, you could change the logic to get the HTML you require from an AJAX call, and then insert that into the table cell., like this:

$.ajax({
    url: url,
    dataType: "html",
    success: function(html){
        $('#customerPaymentTable > tbody > tr').eq(index).after("<tr><td colspan='6'><center>" +  html +  "</center></td></tr>");
    }
});

Alternatively, you could append the cell, and then call the load() on that new element, like this:

var $row = $('#customerPaymentTable > tbody > tr').eq(index);
$row.after('<tr><td colspan='6' class="foo"></td></tr>');
$(".foo", $row).load(url);