i'm having a JQuery tab on my page and currently when i reload or run some serverside codes , the tab would go back to the first one, is there a way to make the tabs stay?
I would like my tab to stay on the current selected tab rather than go back to the first tab when the page reloads
My JQuery:
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
My tabs:
<div class="tabs">
<ul class="tabNavigation">
<li>Annoucments</li>
<li>Events</li>
<li>Photos</li>
<li>Job Opportunities</li>
<li>Contacts</li>
<li>Videos</li>
</ul>
<div id="Annoucments" class="ContentDIV">
..
</div>
<div id="Events" class="ContentDIV">
..
</div>
<div id="Photos" class="ContentDIV">
..
</div>
<div id="JobOpportunities" class="ContentDIV">
..
</div>
<div id="Contacts" class="ContentDIV">
...
</div>
<div id="Videos" class="ContentDIV">
..
</div>
</div>
You need to save user state somewhere:
Url - parse url and determine whether it's yours tab secion or not.
Cookies - write to cookie user information (e.g. selected tab).
Session - same as for cookie.
Custom Hidden field or asp.net ViewState.
One thing you can try is to keep a hidden field that maintains the href value of the currently selected tab. This way, when there is a postback, you can read the value from that hidden field and select the correct tab.
Put a get parameter in your page url. So you could have yourpage.aspx?page=1 for example. Then just pull that parameter out of the querystring and either apply the 'selected' class in your server side code (which would be best) or in jQuery on the page directly (not as good a solution but it'll work too) to the appropriate tab.
EDIT (Code Sample)
$('#[formID]').onSubmit(function () {
var tab = $('.selected').prop('href');
// Append a hidden field to the form containing tab. Example below
return true;
}
...and then when you load your page from the server, simply look at the value passed and apply the 'selected' class to the element.
Example:
jQuery - add additional parameters on submit (NOT ajax)
Related
On the admin side of my DotNetNuke website, I have two tabs with a few controls. I have also a grid view control on Tab 1 with a few records from the SQL server database i.e. Default Images & Slider Images. Each of the grid view row on Tab 1 also has an Edit button which fills the required textboxes (Image Title, Path, and URL, etc) of Tab 1 with data from that particular row in the code-behind.
When the user clicks on the edit button, an if statement on the code-behind file will check the type of the selected image. If it is a Slider Image, then it's title and URL will be passed to those particular textboxes on Tab 1.
However, if it is a Default Image, then I want to activate Tab 2 and pass the Title, Path, and URL of this default image those specific textboxes on Tab 2.
Is there any way to handle this from c# (code-behind)? Can I mark these tabs something like server controls, so I can easily get them with c# and activate the Tab 2? Any help will highly be appreciated.
Here is an illustration of the Tabs markup I am currently working on.
<div class="dnnForm dnnModuleSettings dnnClear" id="dnnAcProjectsModuleSettings">
<ul class="dnnAdminTabNav dnnClear">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="A" class="HomeRoomSlider">
<div class="mspsContent dnnClear">
<fieldset>
//Controls etc
</fieldset>
</div>
</div>
<div id="B" class="HomeRoomSliderDefault">
<div class="mspsContent dnnClear">
<fieldset>
//Controls etc
</fieldset>
</div>
</div>
I'm working on a C# MVC project and I want a master page that has a header that contains some information among which is the application logo on the top left corner. However, there's one view in which I don't want it to be seen, the login page.
So, how can I hide it for just the Home/Index view and then display it for all the other views?
Here's part of the _Layout.cshtml
...
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="../../Images/_logo.png" alt="whatever" />
</div>
...
This shows in every page, I just wish I could hide it from the initial page where the user enters its credentials.
How can this be achieved?
Thanks
You can set Layout = null for that Login page.
#{
Layout = null;
}
You can use section of MVC views for this purpose. They are precisely used for this -
in _layout.cshtml include header section as this, so that the header is included as an optinal section
#RenderSection("Header", False)
#RenderSection("MainContent")
then other pages you can have separate header such as this (some.cshtml) -
#section Header {
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="../../Images/_logo.png" alt="whatever" />
</div>
}
#section MainContent{
other body content.
}
And for login just don't define the section and only provide the body -
#section MainContent{
other body content.
}
This gives you not only the option to show hide header but also a great option to customize your layout based on the contents and need of the content pages.
You can learn more from here -
http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in
and in msdn you can find the Documentation
http://msdn.microsoft.com/en-us/library/system.web.webpages.webpagebase_methods(v=vs.111).aspx
You can check to see if the current user is authenticated, and if not then hide the elements you wish to hide.
#if(HttpContext.Current.User != null && HttpContext.Current.User.Identity != null && HttpContext.Current.User.Identity.IsAuthenticated)
{
... stuff to show if user is authenticated here ...
}
You can write a JQuery on your login page (cshtml). Use $(document).ready() event and hide the div containing the logo image.
use script
$(window).load(function () {
$("#actionlinkid").hide = true;
});
Agree with solution given by Softsen. But in case you are asking only for hiding logo for particular page, You can do it as below:
#if(Request.Url.ToString().IndexOf("index")==-1)
{
<div class="float-left">
<p class="site-title">#Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
}
In my MVC 4 project, i have 2 menus, one top fixed menu and a side menu. The top menu is always visible, even when the user isnt logged. But the side menu is only visible when the user is logged. But if the user has a admin role he is able to acces the "Create User" view, and i wish the side menu would not be visible in that speciefic view. How can i do that?
Here´s the side menu part in my layout view:
#if (Request.IsAuthenticated)
{
<div class="row">
<div class="col-md-3">
<p class="lead">Comparações</p>
<div class="list-group">
Item 1
Item 2
</div>
</div>
</div>
}
I used css - you can make this into "HideMenu.cshtml" and call #RenderPage("HideMenu.cshtml") in any cshtml file where you don't want to see the menu.
<style>
body {
padding-top : 0px;
}
.navbar {
display: none;
}
</style>
In this css, "navbar" is the class of the menu item I want to hide.
Use F12 from your browser to find the class name of the element you want to hide.
I use ViewBag to set a flag from the controller. This flag determines whether to do something, but make sure that missing value is also valid and it indicates default action. In that case, only the actions that are affected by the additional part of the layout are free to set the ViewBag item to specific value.
For example, I have a sign in form in layout. But sign in should not be rendered when user visits sign up page, obviously. So, there is a HideSignInForm with default False (and missing equals False). In _Layout.cshtml this is covered by this piece of code:
bool hideSignInForm = false;
if (ViewBag.HideSignInForm != null)
{
hideSignInForm = (bool)ViewBag.HideSignInForm;
}
Later on in the _Layout.cshtml, I use the flag normally:
if (!hideSignInForm)
{
<div id="signInUser">
...
</div>
}
Try:
#if (Request.IsAuthenticated && !HttpContext.Current.User.IsInRole("Admin"))
{
<div class="row">
<div class="col-md-3">
<p class="lead">Comparações</p>
<div class="list-group">
Item 1
Item 2
</div>
</div>
</div>
}
I am writing a website master page with a form for member login
Below is the markup from the master page:
<form id="loginForm" action="account.aspx" method="POST">
<div class="div-topHead">
<input type="button" id="submitLogin" title="Login" value="Login" />
<input type="button" id="forgetPW" title="Forget password" value="?" onclick="window.open('forgetpassword.aspx','_self')" />
</div>
<div class="div-topTail">
<div class="div-login">
<div class="row-body row-def">
<input id="input_memID" name="input_memID" runat="server" type="text" maxlength="255" />
</div>
<div class="row-header row-def">
Member ID:
</div>
</div>
<div class="div-login">
<div class="row-body row-def">
<input id="input_memPW" name="input_memPW" runat="server" type="password" maxlength="255" />
</div>
<div class="row-header row-def">
Password:
</div>
</div>
</div>
</form>
and below is the posting script
$(function(){
$('#submitLogin').click(function(){
var f = $('#loginForm').get(0);
$.post("../script/loginCheck.aspx", { "memID": f.inputID.value, "memPW": f.inputPW.value }, function(data){
var result = JSON.parse(data);
if(result[0] == 1){
//Login validated
f.submit();
} else {
//Login is invalid
alert(result[1]);
}
});
});
});
The problem is, when i open the website on browser,
the text input field names are automatically added a prefix "c100$"
and then from console I can see I got below error
Uncaught TypeError: Cannot read property 'value' of undefined
I have tried to lookup on the net what is this happening,
and seems it is something .NET automatically does.
Yet I could not find a way to make my post script works.
I don't need to keep the ID as it was without ct100,
as long as the posting script can work
I tried changing to f.ct100$input_memID etc but not working
Also tried the clientIDMode="Static" but can't get it work either
the browser complains clientIDMode is not an attribute of <% PAGE %>
So could someone please kindly advise what can I do?
Thanks in advance!
ClientIDMode is a property that can be added to individual controls.
In addition (from MSDN):
You can set the ClientIDMode value for all pages in a Web site by setting the pages element in the site's Web.config file. You can set the ClientIDMode value for a page in the # Page directive.
This for instance:
<div id="dvDiv" runat="server" clientidmode="Static" />
Will make the div's name be "dvDiv" in both client and server side.
So $("#dvDiv") will work fine on the client side.
About your last remark, make sure you put it in <%# Page %> and not in <% Page %> (notice the # sign)
Although Blachshma's answer is perfectly reasonable and will solve your problem, I recommend simply taking off the runat="server" attributes on your inputs.
I can't see that you have any real reason to have these exist as HtmlInputText objects if you don't need to reference them from page code-behind.
EDIT: as per comment, if you do need to access them from code-behind, then it's a better idea to simply change the ClientIDMode to Static.
You can simply use this jquery selector to get any element you want :-
$("[id$='yourElementID']")// Select an Element whose ID ends with yourElementID
Example :-
$("[id$='submitLogin']").click(function(){
var f = $("[id$='loginForm']").get(0);
....................
See The Detailed Information here
If the Javascript code is contained inside the aspx markup, you can also use
var f = $('#<%= loginForm.ClientID %>').get(0);
I have three tabs on a page called Main.aspx. I want it so that when the user first accesses Main.aspx, the url changes to the default tab and when a different tab is clicked, the url changes to refer to the id of that tab. So for example, if they click Second Tab, I want the url to be Main.aspx#secondTab. That way, if they refresh the page, it will remain on the current tab.
How would I accomplish this?
<div id="everyNavigationTabID" class="everyNavigationTabClass">
<ul class="singleTabNavigationClass">
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div id="firstTab" class="tabContent">
First Tab
</div>
<div id="secondTab" class="tabContent">
Second Tab
</div>
<div id="thirdTab" class="tabContent">
Third Tab
</div>
You can use the document.location.hash property to add # fragments to your current URL.
Something like -
$("div.tabContent").on('click',function(evt){
document.location.href = document.location.href + "#" + $(this).attr('id');
evt.preventDefault();
});
Then on your $(function() (document.ready) function you can examine the document.location.hash variable and take appropriate actions.