How should I load/unload JS called by dynamically loaded partial pages?

StackOverflow https://stackoverflow.com/questions/19719147

سؤال

I make use of jQuery and history.js to manage dynamic transitions between partial-pages; such that I avoid reloading entire documents. Some of these partial-pages call their own unique javascript files. While the transitions between pages work well, remnants of executed javascript remain active after the partial page that called it has been dynamically replaced.

How can I unload javascript that was introduced with a dynamic page load, and later asynchronously replaced by another page?


The finer details

Master template

My master template (used for all pages) can be thought of as a simple:

<html>
<head>
<script>
    //scripts to manage asynchronous loading of partial-pages into #content div
</script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

User profile

One partial page that renders inside the #content div is for a user's Profile:

<script src="profile.js"></script>
<form>
    <input type="file" name="profile-picture">
</form>

The contents of profile.js are similar to:

$(function() {
    $('input').change(function() {
        // upload profile picture asynchronously
    });
});

User settings

Another partial page that is loaded inside the #content div of the master template is the user's Settings:

<script src="settings.js"></script>
<form>
    <input type="text" name="first-name">
    <input type="text" name="last-name">
</form>

The contents of settings.js are similar to:

$(function() {
    setInterval(function() {
        // auto-submit form every 10 seconds
        $('form').submit();
    }, 10000);
}
});

The problems

  • Certain javascript functions continue to run (e.g. setInterval) after the partial page that called them has been replaced by another.
  • This business of loading new javascript for each partial page feels messy; but for the life of me, I can't find any recommendations for best practices.

What is the better way to achieve this effect of dynamic partial-page loading/unloading while allowing page-specific scripts for each partial page?

Thank you!

هل كانت مفيدة؟

المحلول

Firstly...once you load javascript...you can't unload it

The setInterval problem will require using clearInterval

Declare some esoteric name that would make it fairly unique as a global variable when you initialize setiIterval; Make sure you declare the var outside of $(document).ready before using it

var my_super_form_submitter

$(document.ready)function(){...
 my_super_form_submitter=setInterval(func.....

Then whenever you load a new page

if(my_super_form_submitter)
clearInterval(my_super_form_submitter)

As for collisions with other methods....you could adopt a content class protocol for your page specific code. On each page load, change class of content div...then use that class within selectors for jQuery

نصائح أخرى

For first problem:

Question is what functions continues to run after replacing packages. SetInterval that you mentioned uses js timers, and simply replacing package wont stop timer automatically. You should clear all timers started via setInterval before replacing.

E.g.

$(function() {
    var timer = setInterval(function() {
        // auto-submit form every 10 seconds
        $('form').submit();
    }, 10000);
}

function uninitialize(){
    clearInterval(timer);
}

Just call uninitialize before replacing package, and it should work.

UnfortunatelyI don't know any proper way for loading partial pages, but I hope it helps you somehow (:

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top