I'm trying to load a page in with AJAX using a method I found here.
Everything goes well until I get to the parse_html
function. The correct values from the elements on the next webpage are assigned to the body
variable (that is, a string of the HTML code from the body tag). But when it turns that into the jQuery object, $body
ends up being equal to Object (which I think is maybe correct? I THINK this is a DOM object that has all the HTML from the body tags in it).
Finally, the jQuery object "$content" is made equal to the contents of the first "#content" element. However, response.$content ends up being equal to "[object Object]".
How do I make it so that when I use $content.html(response.$content) the #content div is filled with the HTML from the new page instead of [object Object].
function find_all($html, selector) {
return $html.filter(selector).add($html.find(selector));
}
function parse_html(html) {
return $($.parseHTML(html, document, true));
}
// Convert page contents to jQuery objects
function parse_response(html) {
// 'body' is equal to the strings of text in between the body tags
var body = /<body[^>]*>([\s\S]+)<\/body>/.exec(html),
$body = body ? parse_html(body[1]) : $(),
// '$content' is equal to the contents of the first #content element
$content = $.trim(find_all($body, '#content').first().contents());
// Output the variable "$content"
return {
'$content': $content
}
}
For context, here is where I call these functions inline:
url = History.getState().url,
rel = url.replace(root, "/");
$.get(rel).done(function (data) {
var response = parse_response(data);
var $content = $("#content");
$content
.slideUp(500) // Get it off screen to start
.promise()
.done(function () {
$content
.html(response.$content)
.slideDown(500);
});
}).fail(function () {
document.location.href = url;
return false;
});
Aucun commentaire:
Enregistrer un commentaire