CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobileloading
user1850534
user1850534

Reputation:

jQuery mobile stop running the script in the current page used after moving to the next page

In my jQuery mobile application, iam having all the scripts being loaded at the index page(say index.php) and not using any (rel="external" or data-ajax="false")for linking pages to keep the appication loaded fully with Ajax. But in my application, i want to run the script for only one page(say home.php) and after leaving that page, i want to kill the script being used.In home.php, i am using $(document).on('pageinit', function(){ }) for loading the script.

But i found that the script iam using in home.php is running throughout my application after leaving that page.

How to stop the script running which is used through page-init function without using (rel="external" or data-ajax="false")?

Here is the code i am using in home.php,

<script type="text/javascript">
                $(document).on('pageinit', function(){
    var auto_refresh = setInterval(
             function ()
            {
                 /*  */
                $("#color-bar").load("controller/file.txt");
                        }, 3000);
                });
</script>

I want to stop loading the file.txt after leaving home.php.

Upvotes: 0

Views: 817

Answers (1)

user1850534
user1850534

Reputation:

As, Omar suggested I want to give an id instead of $(document). Using pagebeforeshow or pageshow , pagehide and Clearing the interval will solve this issue. The following code works for me, 

var auto_refresh;
$("#light-page").on('pagebeforeshow', function(){
  auto_refresh = setInterval(function () {
    // code
  }, 3000);
});

$('#light-page').on('pagehide', function () { 
  clearInterval(auto_refresh);
});

Adding id in Html:

<div data-role="page" id="light-page">
   </div>

Upvotes: 1

Related Questions