I'm using jQuery Tools to make use of he overlay function, and apart from simply loading a specific URL into the overlay, it gets coupled with a specific ID, so it loads specific information from a URL into the overlay, here is the code:
$(document).ready(function () {
$(function () {
$("a[rel]").overlay({
mask: 'grey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href") + ' #specificDIV');
}
});
});
});
If you're familiar with jQuery Tools you may notice that this is almost the basic documentation template for loading a URL within an overlay - with the exception that I've added that it must load only #specificDIV, and not the entire URL in the overlay.
For the sake of reference here is the original .load() function (without my #specificDIV) from jQuery tools demo docs:
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
In any case, I want to know how I would specify this load function using .ajax(). One reason is that I want to disable the cache, the other reason is I'm actually quite curious as to how this would be achieved. There are numerous examples here on stackoverflow on how to code .load() as .ajax() - but nothing with a .load() function like the one above - and I clearly need help - so it would be very much appreciated :P
Keep in mind, this load function is loading information into a div that has a class="contentWrap".
Well, you could just take a look on how $.load
is implemented:
$(document).ready(function () {
$(function () {
$("a[rel]").overlay({
mask: 'grey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
$.ajax({
url: this.getTrigger().attr("href") + ' #specificDIV',
dataType: 'html'
}).done(function (responseText) {
wrap.html(responseText);
})
}
});
});
});
Well, .load
is basically a short hand for $.get
and .html
. So you could do:
$.get(this.getTrigger().attr("href"), null, function(data) {
wrap.html($(data).find("#specificDIV"));
});
And $.get
it self is just a short hand for $.ajax
, so further expanded:
$.ajax({
url: this.getTrigger().attr("href"),
success: function(data) {
wrap.html($(data).find("#specificDIV"));
})
});