I want to use some jQuery in my Modals. For like form validation, but the problem is more general.
I load the content of the modals from another html-file.
In Bootstrap 3.1.x it worked with just putting the jQuery code at the end of the html file from where I get my modalcontent.
But now with Bootstrap 3.2. the jQuery doesn't work anymore in the modals.
Outside of the modals they working fine.
Even if I call the contenpage not within the modal the jQuery works.
Here is some example code showing how I call my modals:
<a data-toggle="modal" href="dir" data-target="#inputModal">Some Button</td>
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
And the content.html for the modalcontent
<form name="contactdeleteform" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="moduleModalLabel">topic</h4>
</div>
<div class="modal-body">
<select id="modules" name="modules" class="form-control select2" multiple>
<option value="1">option 1 </option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
<button type="submit" id="contactDataSubmit" class="btn btn-primary" >Submit</button>
</div>
</form>
<script type="text/javascript">
$('.select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>
using the select2 lib for better multiselection. For example I can't get this to work.
/edit: tried to explain the the Problem more clearly.
/edit2 : I checked the networks with the Firefox debugging tools and there is no jQuery call when I load the modal
if you add to your own jquery in bootstarp 3.2 use (noConflict) in your own jquery script
Example:
<form name="contactdeleteform" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="moduleModalLabel">topic</h4>
</div>
<div class="modal-body">
Body content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
<button type="submit" id="contactDataSubmit" class="btn btn-primary" >Submit</button>
</div>
</form>
(No Changes it's working in my sys once check your total code )
http://jsfiddle.net/suryakiran/ffqhtr35/
once please do your project example in (http://jsfiddle.net). i will try to solve your problems. am also beginner in bootstrap. if you do your example in jsfiddle.net am learn more from you
I found a solution that a friend of mine sugested.
When you put the id of the modalframe into the jquery it works.
$(#modalid #idforjqueryelemnt).function()(...
So in the case of my problem I change nothing much but the jquery of the content.html
<script type="text/javascript">
$('#inputModal .select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>
Related
Im new in web application and i came across the modal feature in bootstrap, i did researched and came across some examples that works perfectly fine but when i tried to copy what they did, an underlying image or panel or i dont know displays behind the modal... how to remove this? ive been trapped in this thing for like 3 days.. haha.. thanks...
Here is the image:-
and the code from w3schools... this should work but i dont know why..
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As I checked your code of modal, This is coming fine.
check here
The problem is in your html kindly show us the entire html so that we can debug your code.
hi your code is working just fine. i find no problem with it.
output of the code
hopefully problem with the browser?
I use bundle config for my jquery and bootstrap. I have notice that I am getting different results depending on where I place the jquery and bootstrap.
Using standard code
#{
ViewBag.Title = "CreateWebOrder";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<h2>CreateWebOrder</h2>
<div class="container">
<div class="row">
<div class="col-lg-6">
#*<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shipToModal">Add</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
</div>
</div>
When I add the below scripts and link to the top of the form the modal is working correctly.
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
I would like to use bundle config and add this to the _Layout page.
When I add my jquery and bootstrap on the _layout page at the bottom of the form and remove the scripts and link from the form
#Scripts.Render("~/bundles/myjquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
The modal will display for a second then clear and only show a faded background.
My question is why can't I use my bundle config rather then placing the scripts and link at the top of the form. What is causing this problem?
This might be if you have included the Jquery file or the bootstrap js file more than once. I would suggest you to check your bundle config to see if the Jquery js file or the bootstrap file is not getting invoked more than once.
Multiple references of bootstrap js file can instantiate the modal more than once which can toggle its visibility and add strange behavior to it.
If this does not work please try and check your console to provide some error information if it persists.
I've below bootstrap modal. I'm just showing only 2 fields here. But I've more than 10 fields which are all mandatory. I'm doing javascript validation on click of Add button in Add_click(); and alerting user that All fields are mandatory. After click on Alert, the Modal window just goes off. I need this window to be retained until user gives all the details.
<div id="modalUserAddition" class="modal fade">
<div class="modal-dialog" style="width: 600px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="txtUserName" class="form-control" runat="server" placeholder="User Name" />
</div>
<div class="form-group">
<input type="text" id="txtPassword" class="form-control" runat="server" placeholder="Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" id="Close" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="Add" onclick="Add_click();" class="btn btn-primary" data-dismiss="modal">Add User</button>
</div>
</div>
</div>
</div>
I tried below code, but it didn't work for me.
alert('All fields are mandatory!');
//$('#modalUserAddition').modal('toggle');
$('#modalUserAddition').modal({
show: true
});
Please help!
Remove data-dismiss="modal" from the Add button and close the modal in Add_click where the data is proven valid by adding:
$('#modalUserAddition').modal('hide');
I think you are clicking outside the modal when you click on the alert, and it is closing the modal due to its native behavior. You can use the backdrop option. Passing this option with value static will prevent closing the modal after clicking outside the modal.
<button data-target="#myModal" data-toggle="modal" data-backdrop="static">
Launch demo modal
</button>
Or you can do it via JavaScript
$('#myModal').modal({backdrop: 'static'})
DEMO
Since you're using Bootstrap, perhaps a better alternative would be to use its native alerts.
It would avoid your current issue and be more consistent.
It worked for me putting data-backdrop="static" in the button and return false; when returned the validations results.
Hey guys I'm using bootstrap modal class for popping up window when a user leaves the page.
And what I need is to pop up the window using javascript not the button.
So it does not work and I'm stuck with it, any help is appreciated
Modal Window
<div class="modal fade" data-toggle="draftModal" data-target="#draftModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<p>You are about to leave the deal. Would you like to save as a draft?</p>
</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>
</div>
</div>
JS
<script type="text/javascript">
$(document).ready(function(){
window.onbeforeunload(function(event){
event.preventDefault();
$('.modal').modal('show');
});
});
You can not override the onbeforeunload dialog with your own, so unfortunately you better be working with it as it's intended. The dialog will show, but also the once coming with the intended event. Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
In my code, there are 2 sections (taken from the example) - Some Input and Some More Input. I only see Some More Input with a disabled scrollbar and some buttons on the left of the page. (look at it here)
Before you answer, I've already applied the patch BEFORE the main bootstrap-modal CSS and have both bootstrap-modal and modalmanager included. I've tried placing it everywhere, but it still shows up broken.
My code:
<div id="responsive" class="modal fade" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Some Input</h4>
<p><input class="form-control" type="text"></p>
</div>
<div class="col-md-6">
<h4>Some More Input</h4>
<p><input class="form-control" type="text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
So you should add this code below.
<button type="button" data-toggle="modal" data-target="#responsive">Launch modal</button>
http://getbootstrap.com/javascript/#modals
Look At the madal document, it explain how to use the madal method.
Well, fixed this myself. Found out that the examples on that page weren't compatible with Bootstrap 3, so I tried to write my own example with the Bootstrap docs.
(i am such an idiot for using examples)