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.
Related
I have a layout page in shared folder of my mvc application. The name of the page is Layout.cshtml
I have two div tags in Layout.cshtml namely div1 and div2.
I have a controller called membersController.
This controller sends list of two types of members to view. i.e. GeneralMembers and AdminMembers.
I have a view called Index.cshtml in members folder.
In this view I get the data as expected. But the only problem is that I dont know how to get that two lists inside of each div. In short I want to have GeneralMembers in div1 and AdminMembers in div2.
There might be duplicates of this question but I dont know the keywords/query to search for on google.
If anyone knows any tutorials then please post the link.
If model you send to View from your Controller Action contains two lists, you may call each of them in your View. For example:
<div class="div1">
<ul>
#foreach (var i in model.GeneralMembers)
<li>#i.Name .......</li>
</ul>
</div>
<div class="div2">
<ul>
#foreach (var i in model.AdminMembers)
<li>#i.Name .......</li>
</ul>
</div>
ADDED:
In that case may me you can use jQuery. In your Index page use hidden div:
<script>
$('.Indexdiv1').hide();
</script>
<div class="Indexdiv1">
<ul>
#foreach (var i in model.GeneralMembers)
<li>#i.Name .......</li>
</ul>
</div>
And on your Layout page append html from Indexdiv1 to div1:
<script>
$(document).ready(function()
{
$('.div1').append($('.Indexdiv1').html())
});
</script>
<div class="div1"></div>
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.
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.
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.
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 %>)