CODEWITHSUNDEEP
javascriptphphtml
depperm
depperm

Reputation: 10746

Load js when visible

I have a phtml page that has separate tabs

<div id="maintabs">
    <ul id='mainTabNav'>
        <li><a href="#maintabs-1">Tab 1</a></li>
        <li><a href="#maintabs-2">Tab 2</a></li>
    </ul>
    <div id="maintabs-1">
        <p><?php require_once VIEW_DIR."somewhere/tab1.phtml"; ?></p>
    </div>
    <div id="maintabs-2">
        <p><?php require_once VIEW_DIR."somewhere/tab2.phtml"; ?></p>
    </div>
</div>

Each tab/page has a header with a js source specific to the page like this

<script src="js/tab<num>.js"></script>

On the page load though each javascript file is loading. Is there a way to only load the js for the tab currently open? When a new tab opens then the js reloads with just the js for the current tab?

Upvotes: 3

Views: 1918

Answers (5)

bobbyjo
bobbyjo

Reputation: 3

The use of AMD requirejs can do this also. It is possible to use pure js although I prefer AMD modules [i.e. define()]. For my apps depending on user actions, code is downloaded on the fly reducing load. An onclick event fires on the tab control calling requirejs and the script get downloaded and you call it. PsuedoExample:

<script type="text/javascript" src="require.js"></script>

$(document).ready(function() {
//Assuming using jQuery, use document.getElementById and what not otherwise

$('#maintabs-1').click(function(e) {
    require(['/js/tabnum1.js'], function (tab1) {
        tab1(doStuff);
    });
});

}

Use a for loop for multiple tabs. Also, I try and put as much processing [sans data storage and server validation (obviously)] into the client side.

Upvotes: 0

Johnbastian
Johnbastian

Reputation: 11

Using pure Javascript, I believe it is possible if you are loading the page using AJAX.

This tutorial, http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26, demonstrates a way of loading another page (I call them child pages) into the main page (which I call the index page). As far as I can tell, if you include associated script tags in the child pages rather than the index page, then they are dynamic in that they load when the child page loads, and unloads when he child page unloads.

I have used a modified version of this tutorial in my own projects before, where I don't create the child pages with the same content as the index page as the tutorial shows, and instead use the whole child html file solely for only the child page's content.

Here’s an example based off your code:

indexScript.js :

/* When index.html is loaded and ready */
$(document).ready(function() {

    /* Handels on-click of menu buttons */
    $('#mainTabNav a').click(function(){

        /* Getting the linked page */
        var toLoad = $(this).attr('href');

        /* Hiding content and calling loadContent function - creates animation*/
        $('#contentDiv').hide('slow', loadContent);

        /* Injects content to contentDiv div tag */
        function loadContent(){
            $('#contentDiv').load(toLoad, '', showNewContent);
        }

        /* Shows contentDiv div */
        function showNewContent() {
            $('#contentDiv').show('normal');
        }

        demonstratePageChange(); //For testing - you can remove this

        /* In order to stop the browser actually navigating to the page */
        return false;

    });

    /* Initial Load - load first child page by simulation of clicking on it*/
    $('#maintabs_1').click();

});

/* To demonstrate the respective JS script is loaded as needed */
function demonstratePageChange() {
    setTimeout(function(){
        alert(testMsg); //Alerts the message from resepctive child page script
    }, 3000);
}

index.html :

<!DOCTYPE html>
<html>

<head></head>

<body>

    <div id='maintabs'>
        <ul id='mainTabNav'>
            <a id='maintabs_1' href='childA.html'><li>Tab 1</li></a>
            <a id='maintabs_2' href='childB.html'><li>Tab 2</li></a>
        </ul>
    </div>

    <div id='contentWrapper'>
        <div id='contentDiv'></div>
    </div>

</body>

<script type='text/javascript' src='jquery-2.1.1.min.js'></script>
<script type='text/javascript' src='indexScript.js'></script>

</html>

childA.html :

<div id='maintabs-1' class='contentBody'>
    <script type='text/javascript' src='childAScript.js'></script>
    Child A - Page
</div>

childAScript.js :

console.log("childAScript has been loaded");
var testMsg = "This is Child A";

childB.html :

<div id='maintabs-2' class='contentBody'>
    <script type='text/javascript' src='childBScript.js'></script>
    Child B - Page
</div>

childBScript.js :

console.log("childBScript has been loaded");
var testMsg = "This is Child B!!!!";

However, there are few things to consider using this method:

  1. This particular method requires jQuery
  2. This method doesn't support reload, you'd have to code that in. i.e. if you're on tab 2, you need store that fact and on refresh, point back to tab 2.
  3. Local testing - as far as I can tell, only FF supports this when testing it locally. If you want to test this on Chrome for example, you'd need to upload this onto a server and only then will this work. This is due to the "XMLHttpRequest cannot load" error, if you try this locally.

I hope this helps and resolves your problem.

Upvotes: 1

sitilge
sitilge

Reputation: 3737

Is there a way to only load the js for the tab currently open?

Since you are using PHP you could manage to pass the number of the current page to view. Pseudo-code 

View::factory('templateView')
    ->set('page_number', $page_number)

The $page_number variable now holds the page number that can be used in your scripts with ease

<script src="js/tab<?php echo $page_number; ?>.js"></script>
...
<div id="maintabs">
    <ul id='mainTabNav'>
        <li><a href="#maintabs-1">Tab 1</a></li>
        <li><a href="#maintabs-2">Tab 2</a></li>
    </ul>

    <div id="maintabs-".<?php echo $page_number; ?>>
        <p><?php require_once VIEW_DIR."somewhere/tab".<?php echo $page_number; ?>.".phtml"; ?></p>
    </div>
</div>

Upvotes: 2

Camilo Payan
Camilo Payan

Reputation: 181

You could keep click events on each of the main tabs that would dynamically load the appropriate javascript using something like jQuery.getScript().

$('div[id^="#maintabs"]').click(function(e){
  var tabno = $( this ).index();
  $.getScript("js/tab"+tabno);
});

The pitfall I'd imagine with this is that you seem to want to have all the previous javascript to be washed away once the latest JS file was loaded. I'm not sure if that's doable or if you'll have side effects from it.

Also this could totally be done with vanilla JS but well, time savings.

Upvotes: 4

sentosa
sentosa

Reputation: 21

Can't you just put this: 

<script src="js/tab<num>.js"></script>

into your somewhere/tab*.phtml?

Upvotes: 2

Related Questions