Add table row using after() and load()

Question

My question is very similar to this topic. I'm trying to use jquery, so that when you click on a table row, it loads certain information from another page and insert as a new row below the one clicked on.

If I didn't have to load the data from another page, I could just use something like:

clicked.after('<tr><td>Something</td><td>Something</td></tr>');

If I wanted to load and insert into something other than a table, I could use something like:

clicked.after($('<div>').load("Page2.aspx"));

So how do I go about combining these two together? If I have on the first page:

clicked.after($('<div>').load("Page2.aspx"));

And have Page2.aspx returning:

<tr><td>Something</td><td>Something</td></tr>

I would get this:

<tr><td>...</td><td>...</td></tr><div><tr><td>Something</td><td>Something</td></tr></div>

Which is not valid HTML.

Any suggestions?

score 1 · Accepted Answer · answered Nov 20 '11 at 23:55

1

Use after in the callback of a get rather than load.

$('.clicked').click( function() {
    var $clicked = $(this);
    $.get('Page2.aspx', function(html) {
        $clicked.after(html);
    });
});

answered Nov 20 '11 at 23:55

tvanfosson

509,016
97
693
791

That's exactly what I'm looking for! Thank you very much :) – Pupper Nov 21 '11 at 00:18
You can accept this answer as the solution to your question using the check mark next to the up/down voting answers. – tvanfosson Nov 21 '11 at 00:19

Add table row using after() and load()

1 Answers1