[jQuery] BlockUI - Can't Keep Active Until all Iframe Content Loads from AJAX Response
Sorry if the title doesn't make much sense, but here's what I am
doing. I have a page that searches the net for a search term that a
user enters and then places webpages (not the links), which are the
results of the search query, in their own respective iframe. This
iframe is initially hidden until a line of text ("Click Here For
Search Result 1"). After it is clicked on a jqModal box is displayed
with the iframe as the content.
When the user enters their search term and clicks the submit button I
use the jQuery Form plugin to submit the search query as an AJAX
request via "ajaxSubmit(options)" to a script that generates the
iframes and the list of <span> text. In the options I am using the
target, beforeSubmit, and success options.
The target is simply a div where the response data is placed.
The beforeSubmit is a function "showBlock" that launches
$.blockUI({ backgroundColor: '#f00', color: '#fff' });
The success is a function that launches $().ajaxStop($.unblockUI) and
also fades in the target div.
The problem is that the unblockUI is called only when there is a
successful response from the AJAX request. I want the unblockUI to be
called after ALL of the iframe content is loaded. With 10 iframes, it
can take about 10 seconds depending on the connection and the search
query.
How can I keep the blockUI modal active until ALL iframe content has
loaded, NOT when there is a successful response from the AJAX request?
Here is some code if that didn't make any sense:
$().ready(function(){
var options = {
target: '#results', // target element(s) to be
updated with server response
beforeSubmit: showBlock, // pre-submit callback
success: showResponse // post-submit callback
};
// bind to the form's submit event
$('#searchForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
function showBlock(){
$.blockUI({ backgroundColor: '#f00', color: '#fff' });
return true;
}
// post-submit callback
function showResponse() {
$().ajaxStop($.unblockUI); // -- This is what I
currently have
//$('iframe').load($.unblockUI) -- This is what
I want, but doesn't work.
$('#results').fadeIn(2500);
}
}); // End document.ready handler.
I am working on this locally, but if this isn't good enough I will try
to transfer to my server so you can get an idea of what I"m doing...
Thanks!
Joe
www.subprint.com