I'm trying to use the tabs purely as a navigational menu, loading my pages in the tabs, but being able to bookmark said tabs, and have the address bar correspond with the action I'm executing.
So here is my simple nav partial:
<div id='tabs'>
<ul>
<li id='home'>Home</li>
<li id='test'>Test</li>
</ul>
</div>
And the simple tabs intializer:
$(document).ready(function() {
$('#tabs').tabs({spinner: ''
});
});
My layout just displays $sf_content. I want to display the content for the action I'm executing (currently home or test) in the tab, via ajax, and have the tab be bookmarkable.
I've googled this like 4000 times and I can't find an example of what I'm trying to do. If anyone has a resource they know of, I can look it up, or if you can help, I would greatly appreciate it.
Thank you in advance.
This will make your tabs load using ajax
<div id='tabs'>
<ul>
<li title='home'>Home</li>
<li title='test'>Test</li>
</ul>
<div id="home">home content here</div>
<div id="test">test content here</div>
</div>
Related
So I have one page that works perfectly fine, I am actually creating the links programatically and any link to get to the page with the working back button from is fine - I can see the back button no problem, but then I have a drop down that is just UL full of links and the two pages I link to from there don't show the back button.
Here is the top of the working page.
<div data-role="page" id="detailsPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title"></h1>
</div>
There here is the one that doesn't work.
<div data-role="page" id="calendarPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title">Calendar</h1>
</div>
Here is the UL that has the link to the calendar page that won't show a back button.
<div class="ui-block-b">
<ul data-role="menu" id="optionsDropDown">
<li>
<span data-role="button" data-icon="arrow-d" data-iconpos="right" data-iconpos="left">Calendar</span>
<ul data-role="listview" data-inset="true">
<li data-icon="false">
Thursday
</li>
<li data-icon="false">
Friday
</li>
<li data-icon="false">
List All Sessions
</li>
<li data-icon="calendar">
<a href="#calendarPage" >Calendar</a>
</li>
<li data-icon="gear">
<a href="#settingsPage" >Settings</a>
</li>
</ul>
</li>
</ul>
</div>
The back button on detailsPage always works, the back button on calendarPage never shows up. I have trolled the site but people seems to have issues when they mess with changeHash which I haven't touched.
Could I be screwing something up in the JS? I can't see anything obvious, I could post my whole JS file but I don't even touch these pages from there or mess with the links or anything. I thought maybe because the display is set to none on that list I just showed you above that it wouldn't work but then I tried changing that - it make no difference if you can see it initially or not. I don't get any errors in the console. I am so stumped at the moment. I hope someone can help.
Thanks
Not sure if it is a possible cause but according to the docs, data-role="button" is only valid on <a>, <button> and <input> type elements. I don't see <span> listed there and wonder if that is affecting your navigation?
There is also no valid data-role="menu" attribute listed.
What version of jQuery Mobile are you using? Are you relying on any third party widgets?
I have navigation bar in a JQM page:
<div data-role="navbar">
<ul>
<li>About</li>
<li>Details</li>
</ul>
</div>
Both pages have the same navbar.
I have back button as below:
<a href="#" data-icon="back" data-rel="back" >Back</a>
The problem is that back button will not go to the previous page prior to viewing the page, #details and #about pages are included in the history. How to disregard or exclude the two pages so that clicking back button will go to the page that load it first.
You can't since "data-rel=back" uses the browser history, hence:
start with "Main"
click "About"
click "Details"
click "About"
click "Back" - returns you to "Details"
click "Back" - returns you to "About"
click "Back" - returns you to "Main", woohoo!
I suggest you remove the navbars on both "About" and "Details" pages, this way you only have one way to go: back to the page where you called it.
The simplest way to do that would be to make your about and details pages jquery mobile dialog pages (see documentation).
Open dialog
Dialog pages are not tracked in the history, which should achieve the goal you are looking for.
Try this solution:
<script>
$('#about').click(function(){
$('#contentDiv').html('Your content');
});
$('#details').click(function(){
$('#contentDiv').html('Your content');
});
</script>
<body>
<div data-role="page" id="main">
<div id="contentDiv" data-role="content">
</div>
<div data-role="navbar">
<ul>
<li><a id="about" class="ui-btn-active ui-state-persist">About</a></li>
<li><a id="details">Details</a></li>
</ul>
</div>
</div>
</body>
When using this solution, you will make sure that when you click on the back button, you go to the previous page.
My tabs view look like this (Remember this is not part of application.html.erb, since I need the tabs to be available only to certain specific pages):
<div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">
Mail Settings
</li>
<li>
Text Settings
</li>
</ul>
</div>
But, on clicking on any of the above tabs, the vertical tabs disappear and goes to the respective views. I would like to retain the tabs in each page it navigates to, any pointers are welcome.
How about using something like
layout "other_layout"
in the relevant controllers? Like explained in http://guides.rubyonrails.org/layouts_and_rendering.html, "2.2.12.1 Specifying Layouts for Controllers"
You can use yield :tag in your layout and use
content_for :tag do
"your tabs"
end
in your views where you want tabs and don't put content_for method in view where you don't want these tabs.
I am using jQuery Mobile with MVC. I don’t know how to create a link to Index page of a car controller with pageid.
I have two pages defined in _Layout.cshtml:
First page:
<div data-role="page" id="CarID">
<div data-role="header">
<ul>
<li>1. Page Car</li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageCar")
Second page:
<div data-role="page" id="MaintID">
<div data-role="header">
<ul>
<li><a href="#Url.Content("~/Car/Index/#CarID")" >1. Page Car</a></li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageMaint")
The problem is that these links render section in Index page in home controller NOT the index page in car controller. Links without page id work so href="#Url.Content("~/Car/Index") works but, obviously since no page id I don’t know how to get to a particular page ID. I tried all kind of links, none will not quite work or will take me to home controller Index view:
<li>2 Page Maint</li>
<li>2 Page Maint</li>
<li>#Html.ActionLink("2 Page Maint", "Index", "Car", new { id = "Maint" }) </li>
Can somebody help to create a link to Index page of car controller with pageid? Any help would be greatly appreciated. Thanks
I have a set of jQuery UI tabs, which load their content via the ajax method:
<div id="tabs">
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
<div id="Inbox"> ... </div>
<div id="Sent"> ... </div>
<div id="Ins"> ... </div>
</div>
JS:
$(document).ready(function () {
$("#tabs").tabs();
}
The tab titles are displayed, and the content of the first tab is loaded OK.
Using the AJAX Tabs method is detailed here
When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.
Any ideas what I am missing?
replace your ul list by this :
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.