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')
Related
I have a simple two tab layout. First tab shows details whereas the second tab shows a search box and search results. When a user navigates to the page I wish to show the first tab however when a search is performed (from the second tab) I wish the show the page displaying the second tab.
I had tried the code:
<ul class="nav nav-tabs">
<li class="<%= 'active' if !params[:search] %>">
Details
</li>
<li class="<%= 'active' if params[:search] %>">
Search
</li>
</ul>
The code above displays the correct tab however not the corresponding div so if a search is performed the "Search" tab is active however the "Details" div is displayed.
OK, I did not realise I had to set the active class for both the "li" item and the corresponding "div" item. Works now.
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
<div class="tab-content">
<div class="tab-pane <%= 'active' if !params[:search] %> fade in" id="details">
...
</div>
<div class="tab-pane <%= 'active' if params[:search] %>" id="search">
...
</div>
</div>
I have a mobile page for my app that uses the jquery mobile "collapsible" data-role to hide Microposts (Hartl's tutorial) until the user clicks them to expand.
I also use a modified paginate to render the paginate links.
https://gist.github.com/jugyo/3135120
<div data-role="collapsible">
<h3>Show Microposts (<%= #user.microposts.count %>)</h3>
<ul data-role="listview">
<%= render #microposts %>
</ul>
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
previous_label: 'Prev',
next_label: 'Next'
%>
</div>
My question is: how do I add an event to the paginate click? I want to have the list collapsed (the default), with data-role="collapsible" when the page is first loaded, but when I click next (or later, prev) I want the collapsible container to add the data-collapsed="false" attribute so that the list is open.
(It doesn't make sense to click next and go to a collapsed list again)
Do I put it in the rb that has the paginate code? If so, how do I refer to the page elements? Or do I put some jquery somewhere...?
Any assistance appreciated.
You can add a class or id to your pagination. I'll add an id :
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
id: 'my_pagination',
previous_label: 'Prev',
next_label: 'Next'
%>
Then give your main div some kind of identifier :
<div data-role="collapsible" id="my_list">
Now you can activate it manually with jQuery :
$("#my_pagination").click(function() {
$("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false')
});
In my application i have tab at the top of the page which should each render a new page.
The tabs are defined in the Layouts file as this will be part of the standard view.
Now i have created different views for each of the options e.g. project is one of the tabs.
So when i click the tab option how will it render the body based on the tab i have selected?
I have used the Foundation layout tabs but will need jquery hooking into it to launch an event.
Any examples or replies would be great
Try jQuery UI Tabs
Edit 1:
<div id="tabs">
<ul>
<li>Projects</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="projects">
<% Html.RenderAction("Projects", "Home"); %>
</div>
<div id="tab-2">
<% Html.RenderAction("TabTwo", "Home"); %>
</div>
<div id="tab-3">
<% Html.RenderAction("TabThree", "Home"); %>
</div>
</div>
Decorate your tabs action method with [ChildActionOnly] if you want methods to work using child view only.
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.
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 %>)