I have some content being loaded into a div via an ajax call, and depending on how long it takes the content to load (its a recordset of a various number of products based on checkbox criteria) the sIFR headers inside the new content may or may not replace. A similar thread on another forum suggested the replace function be placed in a timeout to ensure all the elements are loaded and visible before sIFR attempts to replace them. This works, but it leads me to my question which is, is there a better way of doing this without having to pre-assume how long the content will take to appear?
Here's my ajax call:
<script type="text/javascript">
var ajax = new sack();
function whenLoading(element){
var e = document.getElementById(element);
e.innerHTML = "Sending Data...";
}
function whenLoaded(element){
var e = document.getElementById(element);
e.innerHTML = "Data Sent...";
}
function whenInteractive(element){
var e = document.getElementById(element);
e.innerHTML = "Getting data...";
}
function whenCompleted(){
/** HERE WE NEED TO ADD A DELAY TO THE sIFR REFRESH SO THAT ALL ELEMENTS ARE PRESENT UPON SIFR REFREH */
setTimeout( function(){
sIFR.replace(verlag, {
selector: 'h2',
css: '.sIFR-root { color: #000000; }',
wmode: 'transparent'
});
//alert('done');
}, 1000) // increase number if users are experiencing blank headers on ajax load
}
function filterProdQuery(){
var formobj = document.getElementById('filter_form');
/** DEFINE OPTIONS CHECKBOXES ************************************/
var opt = document.getElementsByName('p_options')
var i;
var j=0;
var options= new Array();
/** ITERATE LENGTH OF CHECKBOXES ARRAY AND, IF CHECKED, ADD TO ARRAY TO BE POSTED */
if(opt.length != null){
for(i=0;i<opt.length;i++){
if(opt[i].checked){
options[j]=opt[i].value;
j++;
} // end if
} // next
}
//alert(vals);
ajax.requestFile = "{$C->WWW}/ajax.filter-prod-query.php?p_options=" + options;
ajax.element = 'prod-query-results';
var onloading = whenLoading(ajax.element);
var onloaded = whenLoaded(ajax.element);
var onInteractive = whenInteractive(ajax.element);
var onCompletion = whenCompleted(ajax.element);
ajax.runAJAX();
}
</script>
That above script works fine if the content takes a second or less to load. If it's a quick load, there's a delay on the header refreshes and if it takes longer than a second to load, the headers stay blank. I guess what I'd prefer is to refresh sIFR when all the elements are confirmed to be visible. Am I doing this completely the wrong way here or am I missing something obvious?
Thanks in advance!
--Sean

New Topic/Question
Reply



MultiQuote


|