I needed to force refreshing using this technique. When I navigate to a new page jQM correctly adds a back button in my header. But when I go back to the first page the back button incorrectly appears. Is it possible to conditionally create a back button? I have tried manually creating a back button and conditionally hiding it based on a parameter in the URI but it seems that once the button appears I can never hide it again.
Edit:
Here is some code that demonstrates the problem. Not only does it not hide the custom back button when you go back to page 1, but it doesn't hide the "page 1" content when you are on page 2, or visa versa. It seems that once something has been shown it cannot be rehidden.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
var backButtonVar = null;
var page1Var = null;
var page2Var = null;
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="false">
<div data-role="header">
<h1>Test</h1>
<a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a>
</div>
<div id="page1" data-role="content">
Go to page 2
</div>
<div id="page2" data-role"content">
This is page 2
</div>
<script>
$(document).ready(function() {
jQuery(document).on('pagehide', 'div', function(event, ui) {
var page = jQuery(event.target);
page.remove();
});
backButtonVar = $('#backButton');
page1Var = $('#page1');
page2Var = $('#page2');
// Is this the root?
if (window.location.search == '') {
backButtonVar.hide();
page1Var.show()
page2Var.hide()
} else {
backButtonVar.show();
page1Var.hide()
page2Var.show()
}
});
</script>
</div>
</body>
</html>
Here is the fix. Give the back-button a class backButton. .hide() it if the active page is the home page page1, else .show() it.
Demo
$('.backButton').hide();
$(document).on('pagebeforeshow', function () {
var activePage = $.mobile.activePage;
if (activePage[0].id != 'page1') {
$('.backButton').show();
}
else {
$('.backButton').hide();
}
});
If you have any question, please let me know.
Related
I want a jQuery-UI dialog to open when a button (#loadFile) is clicked, prompting the user for a file. This works fine, but after a couple of seconds the dialog box auto closes. I want it to stay open until the user closes it, or until I specify it with code (for instance when a file is chosen). I can't figure out why this happens.
$('#accordion').accordion({
collapsible: true,
active: 1,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) {
currContent.slideUp();
} else {
currContent.slideDown();
}
return false; // Cancels the default action
}
});
$(document).ready(function() {
$(".btn").button();
$("#dialog").dialog();
$("#dialog").dialog("close");
});
$("#loadFile").click(function() {
$("#dialog").dialog("open");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
</head>
<body>
<div id="accordion">
<h3>Cards</h3>
<div>This is where the cards you pick from will appear</div>
<h3>Control Box</h3>
<div>
<form>Draft number:
<input type="text" placeholder="#">
<input type="submit" value="Search for Draft" class="btn">
<button class="btn" id="loadFile">Load from file</button>
</form>
</div>
<h3>Picks Log</h3>
<div>This is where your picks will be displayed</div>
</div>
<div id="dialog" title="Upload Draft Log" class="filePrompt">
<form>Click the browse button in order to select the log file on your hard-drive.
<br>
<br>
<input type="file">
</form>
</div>
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
This happens because you've assigned the dialog to open from clicking a button in a form where the button has no type attribute. A button's default type is submit, so when you click the button, you're submitting the form. The easiest solution is to simply set a type on the button other than submit, say for example "button".
<button type="button" class="btn" id="loadFile">Load from file</button
jsFiddle example
I have a navbar in Jquery mobile which have 5 contents, each content have a text right now. The problem is that the first time that I load the page, in the first tab all the content is loaded, and as soon as you start pressing the buttons, the content is loaded normally, as shown in the image below:
Then when I start clicking the buttons the content shows correctly:
Below is the code that I'm using:
Javascript:
<script>
(function($) {
// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
{
// If the new page is not being loaded by URL, bail
if (typeof data.toPage !== "string")
{
return;
}
// If the new page has a corresponding navbar link, activate its content div
var url = $.mobile.path.parseUrl(data.toPage);
var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
if ($a.length)
{
// Suppress normal page change handling since we're handling it here for this case
e.preventDefault();
}
// If the new page has a navbar, activate the content div for its active item
else
{
$a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");
// Allow normal page change handling to continue in this case so the new page finishes rendering
}
// Show the content div to be activated and hide other content divs for this page
var $content = $($a.attr("href"));
$content.siblings().hide();
$content.show();
});
})(jQuery);
Here is the HTML:
<body>
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</div>
<center>
<div data-role="content">
<div id="oneContent">First</div>
<div id="twoContent">Second</div>
<div id="threeContent">Third</div>
<div id="fourContent">Fourth</div>
<div id="fiveContent">Fifth</div>
</div>
</center>
</div>
</body>
How can avoid the problem of loading all content at first load?
UPDATED TO ANSWER NEW REQUEST BELOW
If you want the first tab to show up by default, set the CSS of them all individually then toggle them into view.
First put this in your <head> or in a linked CSS file:
<style>[data-role=content] > div { display: none; }</style>
Then insert these two lines into your Javascript at the beginning like so:
(function ($) {
$(document).ready(function() {
var path = (window.location.hash) ? window.location.hash : '#oneContent';
$(path).show();
});
$(document).bind("pagebeforechange", function (e, data) {
....
Here's an updated fiddle diddle skittle
When I have a template variable, and I change it, the screen goes white and it goes blank.
heres a simple example:
{{#if var}}
<p align="center">reactive templating</p>
<button id="button" value="click"/>
{{else}}
<p align="center">worked!</p>
{{/if}}
Session.setDefault("var",true);
Template.content.var = function () {
return Session.get("var");
}
Template.content.events({
'click #button': function(e,t) {
Session.set("var", false);
}
});
The issue is that I have
<body>
{{>content}}
</body>
so it re-renders the whole page, including the page divs.
So do this instead...
<body>
<div data-role="page">
{{>content}}
</div>
</body>
I am trying to add undo/redo functionality in Jquery tabs. I am able to store and restore li/divs for added/removed tab.
Issue is when I re-add tab to the form, though it is added properly as li and div for that particular tab are present and can be seen. But if I click on that tab 'tabsselect' event is not getting fired. Li and div for tab look in order. But I am not able to figure what is missing.
In my website I am dynamically adding and removing tabs and it is working fine but just readding of once removed tab isnt working
Here is the code for adding tab
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span id='id1' class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui) {
var tab_content = $tab_content_input.val(); // || "Tab " + tab_counter + " content.";
}
});
Here is the removal code
$("#tabs span.ui-icon-close").live("click", function () {
if (imode == 1) {
var index = $("li", $tabs).index($(this).parent());
if ($tabs.tabs("length") > 1) {
$tabs.tabs("remove", index);
}
}
});
Nothing fancy really. Looking for answers.
Thanks
Try This code out this will give you a nice example to manipulate data in tabs using jquery.
JavaScript
$(document).ready(function(){
var $tabs = $('#tabs').tabs();
var $a = $('<a />').appendTo('body').attr('href','#').html('add new tab').click(function(){
var n = parseInt($tabs.tabs( "length" ),10)+1;
$('body').append('<div id="tabs-'+n+'">content for the tab # '+ n +'</div>');
$tabs.tabs("add",'#tabs-'+n,'Tab #'+n);
return false;
});
$('<a/>').html('<br><br>remove tab').attr('href','#').click(function(){
$tabs.tabs('remove',$tabs.tabs('length')-1);
return false;
}).appendTo('body');
});
HTML
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
</body>
</html>
*
Just use the id's of the selected tabs and manipulate data in them. this will allow to add and remove tabs on your page
*
Tab Select Function
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected (clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
Use ui.index to get the index of the selected tab and then add then manipulate the selected tab .
All,
I have nested JQuery UI tabs. I want to implement a reloadTab functionality for a nested tab. Currently the following code has static fragments for nested tabs, but eventually they will have urls, so the tabs can behave as ajax tabs. How can I achieve the reloadTab functionality?
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#tabContainer').tabs({ selected: 0 });
$('#fragment-1').tabs({ selected: 1 });
});
function reloadTab(tabindex)
{
var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
$('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
$('#fragment-1').tabs('load', tabindex);
}
</script>
</head>
<body>
<div id="tabContainer">
<ul>
<li><span>TAB1</span></li>
<li><span>TAB2</span></li>
<li><span>TAB3</span></li>
</ul>
<div id="fragment-1">
<ul class="innerNav" >
<li><span>INNERTAB1</span></li>
<li><span>INNERTAB2</span></li>
</ul>
<div id="fragment-1a" class="innerFragment">Content of inner tab 1</div>
<div id="fragment-1b" class="innerFragment">Content of inner tab 2
<br>Reload tab content</div>
</div>
<div id="fragment-2"></div>
<div id="fragment-3"></div>
</div>
</body>
</html>
Thanks
From the docs:
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
EDIT
I copied your file, and made the following changes:
Change the reload link to look like this:
href="#" id="reload"
(markdown keeps converting my anchor tag to a link)
Change the jquery to this:
$(function() {
$('#tabContainer').tabs({ selected: 0 });
$('#fragment-1').tabs({ selected: 0 });
$('#reload').click(function(){
var $tabs = $('#fragment-1').tabs();
reloadTab($tabs.tabs('option', 'selected'));
});
});
function reloadTab(tabindex) {
//alert(tabindex); //un-comment for proof.
var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
$('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
$('#fragment-1').tabs('load', tabindex);
}