Load js on visibility
I have a phtml page with 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 title with a js source specific to that page, e.g.
<script src="js/tab<num>.js"></script>
When the page loads, each javascript file is loaded. Is there a way to load js for an open tab? When a new tab opens, does js reload only js for the current tab?
Is there a way to load js for an open tab?
Since you are using PHP, you will be able to pass the current page number to view. Pseudo code
View::factory('templateView')
->set('page_number', $page_number)
Now the variable $page_numbercontains a page number that can be easily used in your scripts.
<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>
, javascript, - jQuery.getScript().
$('div[id^="#maintabs"]').click(function(e){
var tabno = $( this ).index();
$.getScript("js/tab"+tabno);
});
, , , , , , javascript JS . , , .
JS, , .
Javascript, , , AJAX.
http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26 ( ) ( ). , script , , , .
, , , , html .
, :
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!!!!";
, , :
- jQuery
- , , .. 2, , 2.
- - , FF . Chrome, , , . " XMLHttpRequest ", .
, .
Using AMD also requires this. You can use pure js, although I prefer AMD modules [i.e. define ()]. For my applications, depending on the user's actions, the code loads on the fly, reducing the load. The onclick event is fired in a tab control that requires requirejs and a script, 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 the for loop for multiple tabs. In addition, I try to do so much processing [without storing data and checking the server (obviously)] on the client side.