I have modal that opens up and in that modal i want to show tabbed navigation. i have the following code
<div id="TaskListDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
<h3>Task List</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Data 1
</div>
<div class="tab-pane" id="tab2">
<p>Data 2.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
the problem i have is that modal launches with the first tab but on clicking the second tab nothing happens.
what have i missed that it's not loading the second tab.
any help highly appreciated.
Related
I have a button which toggles a modal window i would like the button to get the current Model.ID of it item that the button is attached to then pass that Model.ID into the window i would like to do this without using JavaScript.
At the moment the first Model.ID out of all of them is passed in but i want the current one
To do this would i need to put the modal toggle in a form with Method GET then post the data back to a partial view inside the modal window.
HTML Code
<button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
You can specify some custom parameter for your button, like
<button type="button" data-bs-toggle="modal" something="#Model.ID" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
Now, at the event that opens the modal, you will have to find the referrer, which is the button. Its something attribute should hold your model's id.
The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method.
Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.
I've been trying to get menu item from menu-id="2" to put some JavaScript in each item in it, but unfortunately it doesn't work.
I would appreciate some help.
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-mdf left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Information</h5>
<vc:menu menu-id="2"></vc:menu>
</div>
</div>
</div>
</section>
I need to change an exising ASPX page by adding a tab control. This will change the layout and so I have started with this tag:
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">TAB1</li>
<li>TAB 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="tab1">
This is Tab 1
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
This is Tab 2
</div>
</div>
</div>
</div>
Now, I need to insert a control for tab panel. How can I share it and modify it on the fly during swtich from one tab to another tab?
I will appreciate it.
Thanks.
p.s. I'm not an expert in this so are there better ways or sample that you could share?
I am trying to format a page where I have an image, then NEXT to it, a heading... and then under the heading, I want some descriptive text.
I am trying this:
<div class="panel">
<div class="panel-heading">
<div class="row">
<div class="col-xl-2">
<img src="~/images/user_error.png" />
</div>
<div class="col-xl-10">
<h1>#Model.Heading</h1>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
Hello
</div>
</div>
</div>
But the image stays on it's own row. How can I get the heading NEXT to the image?
<div class="col-xs-2">
Here is a jsfiddle for people to see the difference: http://jsfiddle.net/692UC/
I created an empty MVC4 web application project in VS2012. I then installed the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However when I run the sample application, I cannot see any of the navigation menu items in the navbar. I can only see the "Application Name" link. The other items ("Automatic Scaffolding", nested "Example Layouts" dropdown navigation menu) are hidden.
Do I need to modify the cshtml or less files in some way to get these items to display in the sample application?
I modified the cshtml markup in the _BootstrapLayout.basic.cshtml file to get the navigation bar items to display correctly. I used the fixed top navbar example from http://getbootstrap.com/examples/navbar-fixed-top/ as a guide.
Original (Not Working) Code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Application Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div>
</div>
</div>
</div>
New (Working) Code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#Html.Navigation()
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Result: