I have a topbar over my main nav. They are both part of the header in the master page. In this topbar, I have a register and a login link. They are both supposed to trigger a modal respectively. (well, the register link actually triggers a series of modals that are part of a registration process).
The modals are not part of the Master Page obviously. They are in a separate page called "register.aspx" and "login.aspx"
My question is: How do I call these modals? I tried the normal Bootstrap Modal invocation but no luck.
I dont figure this out I will make the Default page a static page and run the rest of the site from the Master Page but I'd rather not do that.
This is the code:
master page
<div class="top-links">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 email">
<ul class="nav navbar-nav pull-left">
<li><a runat="server" href="mailto:brazilvagroup#outlook.com"><i class="fa fa-envelope"></i> brazilvagroup#outlook.com</a></li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right pull-right">
<li><a runat="server" data-toggle="modal" data-target="#getstarted" href="#getstarted"><i class="fa fa-user"></i> Sign up</a></li><%--~/Account/Register--%>
<li><a runat="server" href="~/Account/Login">Log in <i class="fa fa-sign-in"></i></a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right pull-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
</div>
<%-- Main Nav is down here --%>
the register.aspx page
<div class="modal" id="getstarted" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Don't create these as separate pages. This is something more easily done by creating them as user controls and importing them into the page, where the modal can than be called by script. Better yet though, don't put the modal markup in the user control as it makes it less portable and re-usable. Reference the user control from a page where the reference can be wrapped in the content area of a dialog.
Basically though, this isn't a good approach. If you want the pages to be separate, don't put the modal HTML code in them. Create them as ordinary .aspx pages without any html markup that would designate it as a bootstrap modal. Then, put your modal markup in the .aspx page or .master and you can put an iframe in the content area of the modal. The design approach already taken is more similar to what you would do with winforms, where a page is a separate form and can be a modal dialog.
Related
I have a bootstrap panel-collapse as follows
<div class="panel-heading">
Business/Financial Information <a data-toggle="collapse" href="#BusFinInfo"><span class="glyphicon glyphicon-collapse-down"></span></a>
</div>
<div id="BusFinInfo" class="panel-collapse collapse">
and an ajax calendar extender as follows
<div class="input-group">
<asp:TextBox ID='txtTermNotifctnDate' runat='server' CssClass='form-control'></asp:TextBox>
<span class="input-group-addon" id="inputCalenderTermNotifctnDate">
<asp:LinkButton ID="lnkBtnTermNotifctnDate" runat="server"><i class="icon-Calendar"></i></asp:LinkButton>
</span>
<ajaxtoolkit:CalendarExtender ID="ceTermNotifctnDate" runat="server" TargetControlID="txtTermNotifctnDate"
PopupButtonID="lnkBtnExecutionDate" PopupPosition="BottomLeft" Format="MM/dd/yyyy"></ajaxtoolkit:CalendarExtender>
</div>
The problem is that when I click on the calendar control, the panel collapses.
Simple mistake that I overlooked. PopupButtonID was wrong and didn't match the link button.
I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.
Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...
Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS
How do I fix these issues?
HTML file
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Modal content load script
<script>
$('.signup').on('click', function(e){
e.preventDefault();
$('.modal').modal('show').find('.modal-body').load($(this).attr('linkFile'));
});
</script>
I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.
Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.
https://jsfiddle.net/fatchild/b04r7Ljo/3/
It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.
i want to have a radio buttons that acts as tab controller same as in below jsfiddle: http://jsfiddle.net/bizamajig/mju8gzwa/
i have created the same thing in jsp with with spring tag as below.i am facing null exception in getting the selected tab value in my controller.i want to know which tab selected and based on tab selection i will query different data.
how to get which tab is selected
enter code here
<div class="container">
<div class="row">
<div id="tab" class="btn-group" data- toggle="buttons">
<a href="#daily" class="btn btn-default
active" data-toggle="tab">
<form:radiobutton path="recurrence" value="d" />Daily</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="w" />Weekly</a>
<a href="#requests" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="m" />Monthly</a>
<a href="#contact" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="o" />Once</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
<div class="tab-pane" id="requests">Requests Content</div>
<div class="tab-pane" id="contact">Contact Content</div>
</div>
</div>
</div>
someone please help to get this working?
You can know which tab is activated currently. Based on that you can query data.
Just add below code in your jfiddle's javascript/Jquery part.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
$(target).show();
alert(target);
});
I want to define a common login section on the navbar, which is saved on the master page.
My problem is, asp.net doesn't allow to have multiple tags runat = "server" per page. How can I overcome this issue, so that I can have controls on the master page (user login in navbar) and on the child pages as well?
The issue is with the button located at the bottom. I have to surround it with form runat="server" tag. But I already have 1 one form tag in the page at the very bottom for the child pages.
<ul class="nav navbar-nav navbar-right">
<li>Sign Up to the Service</li>
<li class="dropdown">
Login<span class="caret"></span>
<ul class="dropdown-menu" id="dropdownlogin">
<div class="form-group">
<label for="usr" class="userlogininfo">Username</label>
<input type="text" class="form-control" id="usr"/>
</div>
<div class="form-group">
<label for="pwd" class="userlogininfo">Password</label>
<input type="password" class="form-control" id="pwd"/>
</div>
<li role="separator" class="divider"></li>
<a class="btn btn-primary btn-block" href="LoggedHome.aspx" role="button">Go</a>
<asp:Button CssClass="btn btn-primary btn-block" ID="btnLogin" Text="Vai" runat="server" />
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Thanks
If the setup you have would render a form within a form, this is not allowed.
If you can:
re-imagine the markup so the forms are side by side
OR:
If the side-by side this is not possible,try simply removing the login form tag. - the parent form tag will post back to the same page: if this is all you want, it may do the trick.
This is #mason suggestion
As mason said, just put the form runat="server" tag in the master page that will enclose all your controls,
so you can add server controls anywhere inside the master or child pages & controls
<form id="form1" runat="server">
<ul class="nav navbar-nav navbar-right">
<snip>....</snip>
</ul>
<div>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Here is the code i have for my modal window it is located in views/devise/registration/_newfile.html.erb folder
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<div id="normalModal" class="modal fade" data-toggle="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title">Signup to sharebox</h1>
</div>
<div class="modal-body">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the button that this form makes
When clicked it gives the proper modal window,which appears as a popup,and the screen in the background gets darker as it should,everything works fine.
Question: How to put this button in my navigation bar,in the header? which is located in views/layouts/_header.html.erb,(my
layouts/application.erb file calls this partial)
I tried to put in my _header partial this code
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><%= render "users/registrations/newfile" %></li>
<% end %>
</ul>
</div>
</nav>
As you see i used <%= render "users/registrations/newfile" %>
and the form appeared literally in my navbar,when i click on sign up button
When it actually should appear in the main layout,so the button is in my header but the form must appear in the main body or layout.
how can i fix it?
thank you
I think you need to show the signup dialog anywhere in the site where the SignUp button exists in the navigation bar. So for this make these changes in the code:
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<% end %>
</ul>
</div>
</nav>
And outside this nav where you body is rendered using <%= yield %> or in the container whatever your layout is using for the main body in that add this
<%= render "users/registrations/newfile" %>
And from this partial remove:
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
as you have added this in the nav bar.
I hope this will do the job. Basically what you are doing is writing the dialog code in the layout itself but outside the nav bar. In the body of you view. Not in header.