I try to focus() an input in a Bootstrap modal, but nothing seems to work. I have tried the setTimeout and the tabindex fixes, but nothing.
Even when I run it in the console:
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
it doesn't focus. I am using Firefox 53.0, 64 bit on Fedora.
This is the modal:
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update it works one time in Chrome, zero times in Firefox.
If you need to focus it in just the beginnig you can add autofocus event on the html element you want to focus in.
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1" autofocus></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But if you want to do it with jQuery you need to surround your code with $(document).ready(function());
$(document).ready(function() {
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
});
Here is the Bootstrap Modal events you can use:
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Also if you are running js at console you need use this(open modal first):
jQuery("#inpProperty").focus();
$(document).ready(function() {
$("#myBtn").click(function() {
$("#mdlAddProperty").modal("show");
});
$("#mdlAddProperty").on('shown.bs.modal', function() {
$("#inpProperty").focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Events - shown.bs.modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p>
<input class="input" id="inpProperty" tabindex="1">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Related
I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">submit</button>
</div>
</div>
By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Bootstrap Modal button save is not working when clicked.Below is my jquery:
$('#add-more-academic').on('click',function(){
$('#myModal').modal();
})
//==================================================
$('.SaveAcademic').on('click',function(){
var academic = $('#new-academic').val();
alert(academic);
Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:
<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" 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">Academic Year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
</div>
</div>
</div>
</div>
</html>
In this scenario I would like to preserve bandwidth by when a modal opens then it loads the import_audit_table into a Div in the Modal. Is this possible?
<script>
$(document).ready(function(){
$('#import_audit_div1').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</script>
<input type="button" class="btn btn-default" value="Modal Opener" id="import_audit_div1" data-toggle='modal' data-target='#import_audit_div'/>
<div class="modal" id="import_audit_div" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<h3>
<div id="import_audit_table">
</div></h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
Allright i want to make my bootstrap modal dynamic but not sure how to do it.. I know i need to use #PredictioItems.Name But not sure where :(
Code:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
<hr />
}
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
Some one that can tell me what to replace to make it work? Thank you :)
Something like this should do it - as #vel says, each possible modal "instance" has to have a unique id and the button to open it should reference that id:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal#(PredictioItems.Id)">View full description & Livestream!</button>
<hr />
}
<div id="myModal#(PredictioItems.Id)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!
Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<div class="modal-dialog">
<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">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>