I'm creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).
Here is my code:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>
main.js:
$(document).ready(function()
{
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}}).find(".ui-tabs-nav").sortable({axis:'x'});
//Create new document tab
newDoc();
});
function newDoc()
{
//Create new tab
$("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}
newdocument.html:
<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
<h3>Document</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Letter</li>
<li>Envelope</li>
<li>Business card</li>
</ul>
</div>
<h3>Spreadsheets</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Check list</li>
<li>Budget</li>
</ul>
</div>
<h3>Presentations</h3>
<div>
<ul class="selectTemplateTable">
<li>White</li>
<li>Black</li>
<li>Nature</li>
<li>Space</li>
</ul>
</div>
<h3>Form</h3>
<div>
<ul class="selectTemplateTable">
<li>Survey</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
How can I fix this?
Thanks,
I found out that I must use cache. I'll answer my own q to help others.
Add cache: true to the tabs() flags:
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}, cache: true})
Related
I am new to JavaScript I don't understand it that well.
I used this code: but I have no idea what I am doing wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
jQuery(function($) {
var $bgs = $('.menu-toggle');
$('.menu-item').click(function() {
var $target = $($(this).data('target')).stop(true).slideToggle();
$bgs.not($target).filter(':visible').stop(true, true).slideUp();
})
})
</script>
</head>
<body>
<div class="menu-item menu-item-1" data-target=".recovery-bg">
Recovery
</div>
<div class="menu-item menu-item-2" data-target=".forensic-bg">
Forensics
</div>
<div class="menu-item menu-item-3" data-target=".erasure-bg">
Erasure
</div>
<div class="menu-item menu-item-4" data-target=".training-bg">
Training
</div>
<div class="menu-item menu-item-5" data-target=".product-bg">
Products
</div>
<div class="menu-toggle recovery-bg">
recovery-bg
</div>
<div class="menu-toggle forensic-bg">
forensic-bg
</div>
<div class="menu-toggle erasure-bg">
erasure-bg
</div>
<div class="menu-toggle training-bg">
training-bg
</div>
<div class="menu-toggle product-bg">
product-bg
</div>
</body>
</html>
I did get this same code from this website, but I've had no luck whatsoever.
I saw in your code that you are using jquery function but you didn't even call it to your html page.
Step1:
Download your jquery
Step2:
call it to your html page
<script src="jquery.min.js"></script>
It does not work because missing referance. You must add a reference.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
I am new to jQuery, and I loaded a div from an external HTML page and I wanted to perform functions such as click, hide, show, etc. The problem is that I tried to put the functions which I wanted to accomplish in the HTML pages script but they did not work. I see the div of #helpPage loaded.
The HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<script>
$(document).ready(function(){
$( "#loadHelpHere" ).load( 'help.html #helpPage' );
$('#helpSection div').not(".helpDiv").hide();
$('.justClick').bind('click', function() {
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
});
</script>
<style>
#helpMenu ul li{margin: 0 0 5px 0;}
</style>
</head>
<body>
<div id="loadHelpHere"></div>
</body>
</html>
That is what was loaded into the div from the external HTML page:
<div id="helpPage">
<div id="helpMenu">
<header>Help Documentation</header>
<article>
<h4>Help Menu</h4>
<ul id="menu">
<li class="current_page_item justClick">Help Section 1</li>
<li class="justClick">Help Section 2</li>
<li class="justClick">Help Section 3</li>
</ul>
</article>
</div>
<div id="helpSection">
<div class="helpDiv">
<header>Help Documentation</header>
<article>
Works!
</article>
</div>
<div class="helpDiv1">
<header>Help Documentation content 1</header>
<article>
Help Section 1
</article>
</div>
<div class="helpDiv2">
<header>Help Documentation content 2</header>
<article>
Help Section 2
</article>
</div>
<div class="helpDiv3">
<header>Help Documentation content 3</header>
<article>
Help Section 3
</article>
</div>
</div>
</div>
Any help is appreciated.
Event delegation is what you want to use for HTML elements that are dynamically loaded into the DOM. The .on() method is the place to start.
Example
$(document).on('click', '.justClick', function(e){
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
Any questions?
I have added a textillate effect to text on a second jquery mobile page. When I click on the page 2 button in the navbar, the animation works correctly when page 2 is displayed. When I click on the page 1 button in the navbar followed by clicking on page 2 button, the text is displayed without animation. I presume there is javascript code to re-initialize the effect but I am at a loss what it is.
<!DOCTYPE html>
<html>
<head>
<title>put title here</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.min.css"/>
</head>
<body bgcolor="#ffffff">
<!-- Start of page-->
<div data-role="page" id="page1">
<div data-role="navbar" id="nbar3" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
</div><!-- end of page -->
<!-- Start of page-->
<div data-role="page" id="page2">
<script type="text/javascript">
$('#page2').on('pagecreate', function() {
$('.anim0').textillate({
});
});
</script>
<div data-role="navbar" id="nbar4" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
<div class="anim0" data-in-effect="fadeInLeftBig" style="font-family:Arial; font-size:34px; color:#000000; position:absolute; top:37px; left:196px;">hello</div>
</div><!-- end of page -->
</body>
</html>
In Textillate documentation, it is not mentioned if you can reinitialize same text again. However, you can simply destroy it and then reinitialize it.
To destroy it, you need to first save text in a var and then remove Textillate data stored into that target div by using .removeData(). And then replace all animated elements within target div with original text. You can use either pagecontainerbeforehide or pagecontainerhide to do the aforementioned steps.
To reinitialize it, just call .textillate() on pagecontainerbeforeshow or pagecontainershow.
$(document).on('pagecontainerbeforeshow', function (e, data) {
/* initialize */
$('.anim0', data.toPage).textillate();
}).on("pagecontainerhide", function (e, data) {
/* store text */
var text = $(".anim0 ul li", data.prevPage).text();
/* remove data and add original text back */
$(".anim0", data.prevPage).removeData().html(text);
});
Demo
i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}
Check the second Q/A pair from the Kendo UI Mobile FAQ.
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.