[jQuery] Ajax Replacing HTML Using JSON
I'm having a strange problem using $.ajax. Better to illustrate with
the code:
function ajaxBind(trigger) {
trigger.click(function(){
$.ajax({
type: "POST",
url: $(this).attr('href'),
data: {
'authenticity_token': $
('input[name=authenticity_token]').val()
},
dataType: 'json',
beforeSend: function(xhr) {
xhr.setRequestHeader("Accept", "application/json");
},
// json contains id and partial keys
success: function(json) {
$('#task' + json['task']).html(json['partial']);
}
});
return false;
});
}
When the DOM element "trigger" is clicked, a request to the server is
issued and the JSON response comes back. Hokey, dokey. The response is
an html link. Something along the lines of:
partial: "link in html that google would strip out anyway"
This gets inserted using the html() function, as you see in the
success: part of the $.ajax call, and all is well until I click on the
new link. Then the link is interpreted as a request to open a document
of type application/json. Firebug doesn't reveal anything unusual
about the inserted HTML. Does anyone see the problem here?
Thanks