I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
1.
Is there an error when you call $('#tabs').tabs(2)?
2.
You can set a variable in your controller that tells the view which tab to be active.
#controller
... do some stuff
#current_tab = 2
#view
$('#tabs').tabs(<%= #current_tab %>)
Related
I am using JQuery mobile tab. Based on some condition, I want the second tab to be selected showing the corresponding tab view. Appreciate the help :)
<!-----HTML------->
<div class="custom-tabs" id="tabDiv">
<div data-role="navbar" class="">
<ul>
<li name="">Tab 1</li>
<li name="">Tab 2</li>
</ul>
</div>
<!--- First Tab --->
<div id="one" class="tab-content-wrap" name="tabOneContentId"></div>
<!--- Second Tab --->
<div id="two" class="tab-content-wrap" name="tabTwoContentId"></div>
</div>
<!------JS------>
$(document).on("pagebeforeshow", "#requestServiceHome", function() {
$("#tabDiv").tabs();
if(flag == true){
$('#tabDiv').tabs("option", "select", 1 );
}
});
You need a data-role="tabs" on the container DIV:
<div class="custom-tabs" id="tabDiv" data-role="tabs">
Then to set active tab:
$('#tabDiv').tabs("option", "active", 1 );
When you do this, the corresponding tab button does not change color. So you either need to add the ui-btn-active class to the button, or trigger the button click instead of setting the active tab, e.g:
$("#secondTab").click();
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.
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.
Consider:
<div id="tabs" >
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul><br />
<div id="Tab1" style="margin:0px; padding:0px;">
<ul>
<li>Inner A</li>
<li>Inner B</li>
<li>Inner C</li>
</ul>
<div id="InnerTab1">Welcome to Inner Tab1</div>
<div id="InnerTab2"><p>Welcome to Inner Tab1</p></div>
<div id="InnerTab3"><p>Welcome to Inner Tab1</p></div>
</div>
<div id="Tab2"><p>Tab2</p></div>
<div id="Tab3"><p>Tab3</p></div>
</div>
The above code is in a PartialView named ABC.
<%= Ajax.ActionLink("Select", "Action", new { Id = item.CustomerID }, new AjaxOptions { UpdateTargetId = "Abc" })%>
And the above code is in a partial view as well named XYZ.
So I have two partial views, Abc and XYZ. These two partial views are called on one view. On the view XYZ, I have a actionLink button on the click of which I am able to fill in details in ABC.
Now, in ABC I have a Tab panel as shown in the above code. When the page is load for the first time, I get the jQuery tab properly displayed. When I click on the ActionLink button, the tabs are displayed in the form of List.
I don't know what is happeneing. So this is my problem. Why are they losing their CSS on the click of action link?
I have included all the jQuery files in my code.
The jQuery UI Tabs component is not just CSS - it also uses JavaScript code to modify the elements under #tabs. When you click on the link, everything inside ABC is replaced with the version from the server, which does not include those modifications.
If you are using unobtrusive Ajax updates on an element that contains tabs, you will need to add an OnComplete handler to AjaxOptions that calls $("#tabs").tabs() to redo those modifications after the HTML is updated.
I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
This is one way I'd do it:
Controller:
before_filter :set_default_tab
def some_action
#tab = "tab-3" # Go to a specific tab when using this action
...
end
private
def set_default_tab
#tab = params[:tab].blank? ? 'tab-1' : params[:tab]
end
View:
# Use #tab in the view to set the current tab
<li class="<%= #tab == 'tab-1' ? 'active' : ''%>"><a>Tab 1</a></li>
# Add the :tab param to any path so the before filter sets #tab
go_do_some_action_path(#item, :tab => 'tab-2')