how to use ajax link in a ajax return HTML unobtrusively

Question

I have a page, with ajax URL on it, ofcourse this page is applying unobtrusive javascript, let's call this page A.

<div id="pageA">
    <a href="additem?id=1>Add this item</a>
</div>
<div id="items"></div>

when i click that URL page B return a div with a URL that suppose to be ajax link. the return something like this:

<div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>

so the page final will look like this:

<div id="pageA">
    <a href="additem?id=1>Add this item</a>
</div>
<div id="items">
    <div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>
</div>

the delete link tag from returned HTML suppose to run just like the additem link. but i dont know how to make this work.

is there any way to keep this unobtrusive?

thank you very much :)

PS: IM using jquery

Answer 1

$("#pageA").click(function(e){
   e.stopPropagation();
   $("#items").append($("<div>").load( $(this).find("a").attr("href")));
});

Answer 2

In the click handler for pageA, when you call load, give it a callback that in turn uses the click function on the newly-loaded items to set up their ajax functionality.

Answer 3

Hi,

You can either have a page or a web service return data in that particular format you expect inside the parent div:

<div id="items">
    <div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>
    ...
    ...
</div>

The response (ie. text/html) of that particular thing you've used will be like

<div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>
...
...

You can then use the jQuery.load() to call this page...ultimately the code will look like:

$('#items').load('pathToMyWebService');

jQuery.load() returns a jQuery object, so you can run your selectors on that too...so let the solution you are about to implement be a full fledged html page, and the data you've generated sits inside a div called results; you can fetch the results this way...

$('#items').load('pathToMyWebPage #results div');

For correct implementation check the docs: http://docs.jquery.com/Ajax/load#urldatacallback

Answer 4

http://plugins.jquery.com/project/livequery/

for the sake of simplification, we can just use this. one call

$('.item-control').livequery('click', function(event) {
    var addlink = $(this);
    $('#form').ajaxSubmit({ url: addlink.attr('href'), success: function(d) { $("#parrentDIV").empty().append(d); } });
    return false;
});