I'm trying to load a DIV element from an external page into my current page using the Ajax/jQuery.ajax function. While I have successfully been able to load an entire external page, I can't seem to load just the DIV element.
Here's my code:
$("a").click(function() {
/* grabs URL from HREF attribute then adds an */
/* ID from the DIV I want to grab data from */
var myUrl = $(this).attr("href") + "#external-div";
$.ajax( {
url: myUrl,
success: function(html) {
/* loads external content into current div element */
$("#current-div").append(html);
}
});
return false;
});
It grabs the HREF attribute without any trouble, but won't append "#external-div" to the URL. Any ideas?
Thanks much!
~Jared Crossley
If you wanted to just return that div you could use the load
method of jQuery to simply load the content returned into your #current-div
ala
$("a").click(function() {
/* grabs URL from HREF attribute then adds an */
/* ID from the DIV I want to grab data from */
var myUrl = $(this).attr("href") + " #external-div";
$("#current-div").load(myUrl);
return false;
});
Take a look at the jQuery Ajax/load documentation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With