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