Using jQuery Timer with an iFrame
Hello,
I have an issue I can't seem to resolve. The scenario is like this:
- User loads the import page
- The import page defines a few divs, start the timer of import duration and loads an iFrame that starts the import process itself
- The time correctly updates the div with the time passed in 1 of the divs
- After x seconds the import page does a reload to prevent the time out, this all happens within the iFrame. From within the iFrame I try to stop the timer started on the first page load but for some reason this doesnt happen. The result is that the first timer cancels the import because the maximum amount of time has passed. I can stop the timer using Firebug but this is of course not a solution ;)
The question is, how do I stop the timer from within the iFrame?
The page that is loaded looks like this:
- <?php
defined( '_JEXEC' ) or die( 'Direct Access to this location is not allowed.' );
if (isset($this->redirect)) {
?>
<div id="maincontent">
<div id="loading" style="float: left;">
<?php echo JHTML::_('image', JURI::root().'administrator/components/com_csvivirtuemart/assets/images/csvivirtuemart_ajax-loading.gif', JText::_('LOADING')) ;?>
</div>
<br />
<?php echo JText::_('TIME_RUNNING'); ?>
<div class="uncontrolled-interval">
<span></span>
</div>
<br clear="all" />
<div id="status" style="float: left;"></div>
<div id="progress" style="float: left; display: none;">
<?php
$attribs = array('frameborder' => "0", 'scrolling' => "yes", 'width' => "500", 'height' => "400");
echo JHTML::_('iframe', $this->redirect, 'importframe', $attribs);
?>
</div>
</div>
<?php } ?>
<form method="post" action="index.php" name="adminForm">
<input type="hidden" name="task" value="" />
<input type="hidden" name="option" value="com_csvivirtuemart" />
<input type="hidden" name="controller" value="import" />
<input type="hidden" name="import_id" value="<?php echo $this->import_id; ?>" />
<input type="hidden" name="filename" value="<?php echo basename($this->filename); ?>" />
<input type="hidden" name="template_name" value="<?php echo $this->template->template_name; ?>" />
<input type="hidden" name="action_type" value="<?php echo $this->template->template_type; ?>" />
</form>
<script type="text/javascript">
jQuery(function() {
jQuery(".uncontrolled-interval span").everyTime(1000, 'importcounter', function(i) {
if (<?php echo ini_get('max_execution_time'); ?> > 0 && i > <?php echo ini_get('max_execution_time'); ?>) {
jQuery("#loading").remove();
jQuery("#progress").remove();
jQuery(this).html('<?php echo JText::_('MAX_IMPORT_TIME_PASSED'); ?>');
}
else {
jQuery(this).html(i);
}
});
});
</script>
The script called from the iFrame to stop the timer is this:
- echo '<script type="text/javascript">
jQuery(this).parents("div").find(\'span\').stopTime(\'importcounter\');
jQuery(".uncontrolled-interval ", window.parent.document).everyTime(1000, \'importcounter\', function(i) {
if ('.ini_get('max_execution_time').' > 0 && i > '.ini_get('max_execution_time').') {
jQuery("#loading", window.parent).remove();
jQuery("#progress", window.parent).remove();
jQuery(this).html(\''.JText::_('MAX_IMPORT_TIME_PASSED').'\');
}
else jQuery(this).html(i);
});
jQuery(function(){window.location=\''.$redirect.'\'});
</script>';
Not sure if it is related to this issue but during the import I send status updates to the parent window using:
- <script type="text/javascript">jQuery("#status", window.parent.document).html("Process line: <?php echo JRequest::getInt('currentline')+JRequest::getInt('totalline');?>");</script>
Now I do see this end up in the page source using Firebug but it never shows on screen only the last entry after a page reload shows up.
Any insight in this is greatly appreciated as I am totally out of ideas except for abandoning the timer.