I can't get the bootstrap modal and asp.net mvc validation start working together. I've got a complex form with some validation displayed in bootstrap modal. Unfortunetely when I hit the submit button the validation doesn't work at all.
The form uses standard asp.net mvc validation. Below there is a part of it just to get the idea of how it is build:
#using (Html.BuildForm().AddClass("form-horizontal").Id("contact-add-popup").EncType(FormEncType.MultipartData).Begin()) {
#Html.AntiForgeryToken()
#Html.Partial("_Alerts")
<div class="control-group">
<div class="control-group company-field">
#Html.BuildLabelFor(m => m.Name).AddClass("control-label")
<div class="controls">
#Html.BuildTextBoxFor(m => m.Name).AddClass("input-xxlarge")
#Html.ValidationMessageFor(m => m.Name)
</div>
</div>
(...)
Here is my modal:
<div id="createContactModal" class="modal hide fade modal-contact" tabindex="-1" role="dialog" aria-labelledby="createContactModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-header">
<h4 class="modal-label" id="createContactModalLabel">Add contact</h4>
</div>
<div class="modal-body">
#Html.Partial("_CreateContact", new ContactCreateModel())
</div>
<div class="modal-footer">
Zapisz
<button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>
</div>
And some javascript that I hope to get the validation working:
$('#createContactModal').on('shown', function () {
$("#contact-add-popup").removeData("validator");
$("#contact-add-popup").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#contact-add-popup");
});
$('#contact-add-popup').on('submit', function(e){
e.preventDefault();
$.validator.unobtrusive.parse($("#contact-add-popup"));
if ($('#contact-add-popup').valid()){
alert('AJAX');
}
});
The line if ($('#contact-add-popup').valid()) returns always true. How can I get the modal and validation to work?
You should try this way:
var form = $("#contact-add-popup")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
Stackoverflow: unobtrusive validation not working with dynamic content
After some research I found that javascript validation script files were missing - so the client side validation was not working at all. After including these files everything works fine.
Thanks for all answers.
Add this in the base view, load modal and enable client side validation.
#section scripts {
#{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
#* The normal bootstrap behavior is to only grab the content
for the modal once, if you need to pull in different partial
views then the data on the modal will have to be cleared. *#
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
$(function () {
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
//enable client side validation after page is loaded
modal.find('.modal-content').load(url, function () {
$('#registration_form').removeData("validator");
$('#registration_form').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#registration_form');
});
});
});
</script>
}
Related
Script to Call Modal, and HTML Skeleton for Modal: (which is working)
<script>
$(document).on("click", ".addworker", function (e) {
e.preventDefault();
var $popup = $("#popup");
var popup_url = $(this).data("popup-url");
$(".modal-content", $popup).load(popup_url, function () {
$popup.modal("show");
});
});
</script>
<div id="popup" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
The HTML loaded into modal-content is returned by a django view which sits behind the url. (this part is working too)
Inside this HTML i have the Button, which i want to use to then close the modal again.
But when the Modal got injected with the HTML and is open, it seems like the modal is out of scope, so i tried to get it back with var $popup = $("#popup");.
And i indeed get back the Object, but the $popup.modal("hide"); Method doesnt work.
<script>
$(document).on("click", ".cancel", function (e) {
var $popup = $("#popup");
$popup.modal("hide");
});
</script>
<div class="modal-header">
<h1>{{ aoe }} Worker: {{ id }}</h1>
</div>
<form action="add/" method="post">
{% csrf_token %}
<div class="modal-body">
{{ form|crispy }}
</div>
<div class="modal-footer">
<input type="button" class="btn btn-secondary cancel" value="Cancel">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
My first workaround: (inside the html file that gets injected to the modal)
<script>
$(document).on("click", ".cancel", function (e) {
var $popup = document.querySelector('#popup');
$popup.classList.remove('show');
$('#popup').css("display", "none");
var $back = document.querySelector('.modal-backdrop');
$back.parentNode.removeChild($back);
});
</script>
This works, but is not really that convenient.
Second Workaround:
Just call $("#popup").click() when pressing the Close Button,
to simulate a click into the free area next to the Modal.
Feels like cheating, but at least its less effort now.
Still, i would like to know the "proper" way to do this.
Problem Solved. I included JQuery in Both HTML Files, which seemed to cause the function not to work anymore. Now it works using $("#popup").modal('hide');
I have a list box in the bootstrap modal and a button.
When the button is clicked a new button gets rendered inside a div in the modal.
When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.
How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.
<!-- Modal -->
<div
class="modal fade"
id="myModal"
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">Select Language</h4>
</div>
<div class="modal-body">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="submit_form">Submit</button>
<div class="modal-body1">
<div id="placeholder-div1"></div>
</div>
</div>
<div class="modal-footer">
<script>
$("#submit_form").on("click", function () {
$(".modal-body1").html("<h3>test</h3>");
});
</script>
<script>
$(function () {
$(".modal-footer").click(function () {
$(".modal").modal("hide");
});
});
</script>
</div>
</div>
</div>
</div>
-- Update ---
Why doesn't this work?
<script type="text/javascript">
$(function () {
$("#myModal").on("hidden.bs.modal", function (e) {
console.log("Modal hidden");
$("#placeholder-div1").html("");
});
});
</script>
Just reset any content manually when modal is hidden:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
There is more events. More about them here
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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 type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" 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 class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tried it and working well
$('#MyModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset');
})
reset is dom build-in funtion, you can also use $(this).find('form')[0].reset();
And Bootstrap's modal class exposes a few events for hooking into modal functionality, detail at here.
hide.bs.modal This event is fired immediately when the hide instance
method has been called.
hidden.bs.modal This event is fired when the modal has finished being
hidden from the user (will wait for CSS transitions to complete).
What helped for me, was to put the following line in the ready function:
$(document).ready(function()
{
..
...
// codes works on all bootstrap modal windows in application
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
...
..
});
When a modal window is closed and opened again, the previous entered and selected values, will be reset to the initial values.
I hope this will help you as well!
Try cloning, then removing and re-adding the element when the modal is hidden. This should keep all events, though I haven't thoroughly tested this with all versions of everything.
var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
$('#myModal').remove();
var myClone = originalModal.clone();
$('body').append(myClone);
});
To reset all the input fields in a modal use the following.
$(".modal-body input").val("")
Here's an alternative solution.
If you're doing a lot of changes to the DOM (add/removing elements and classes), there could be several things that need to be "reset." Rather than clearing each element when the modal closes, you could reset the entire modal everytime it's reopened.
Sample code:
(function(){
var template = null
$('.modal').on('show.bs.modal', function (event) {
if (template == null) {
template = $(this).html()
} else {
$(this).html(template)
}
// other initialization here, if you want to
})
})()
You can still write your initial state in HTML without worrying too much about what will happen to it later. You can write your UI JS code without worrying about having to clean up later. Each time the modal is relaunched it will be reset to the exact same state it was in the first time.
Edit: Here's a version that should handle multiple modals (I haven't tested it)...
(function(){
$('.modal').on('show.bs.modal', function (event) {
if (!$(this).data('template')) {
$(this).data('template', $(this).html())
} else {
$(this).html($this.data('template'))
}
// other initialization here, if you want to
})
})()
(function(){
$(".modal").on("hidden.bs.modal", function(){
$(this).removeData();
});
});
This is perfect solution to remove contact while hide/close bootstrap modal.
That's works for me accurately
let template = null;
$('.modal').on('show.bs.modal', function(event) {
template = $(this).html();
});
$('.modal').on('hidden.bs.modal', function(e) {
$(this).html(template);
});
also, you can clone your modal before open ;)
$('#myModal')
.clone()
.modal()
.on('hidden.bs.modal', function(e) {
$(this).remove();
});
Reset form elements ( Works with bootstrap 5 as well). Sample code :
$(document).on("hidden.bs.modal", "#modalid", function () {
$(this).find('#form')[0].reset();
});
you can try this
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
It will remove all the data from the model and reset it.
I am using BS 3.3.7 and i have a problem when i open a modal then close it, the modal contents keep on the client side no html("") no clear at all. So i used this to remove completely the code inside the modal div.
Well, you may ask why the padding-right code, in chrome for windows when open a modal from another modal and close this second modal the stays with a 17px padding right.
Hope it helps...
$(document)
.on('shown.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
$(document.body).css("padding-right", "0px");
$(this).removeData('bs.modal').find(".modal-dialog").empty();
})
Sample code:
$(document).on('hide.bs.modal', '#basicModal', function (e) {
$('#basicModal').empty();
});
The below statements show how to open/reopen Modal without using bootstrap.
Add two classes in css
And then use the below jQuery to reopen the modal if it is closed.
.hide_block
{
display:none !important;
}
.display_block
{
display:block !important;
}
$("#Modal").removeClass('hide_block');
$("#Modal").addClass('display_block');
$("Modal").show("slow");
It worked fine for me :)
Using BS 3.3.7
$("#yourModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null); // will clear all element inside modal
});
/* this will change the HTML content with the new HTML that you want to update in your modal without too many resets... */
var = ""; //HTML to be changed
$(".classbuttonClicked").click(function() {
$('#ModalDivToChange').html(var);
$('#myModal').modal('show');
});
Reset form inside the modal. Sample Code:
$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
$('#myModal form')[0].reset();
});
To reset/clear all input fields from bootstrap modal use the following code:
$(".modal-body input").val("")
To hide/close bootstrap modal use the following code:
$('#yourModalId').modal('hide');
Keep Coding 😎
What I want is to create new form in a new page and have it submitted. I've picked up this snippet from How to create HTML Form in a new window.
But it's only opening a new window with the URL in the action and not submitting the form automatically:
(function($) {
Drupal.behaviors.ajax_example2 = {
attach: function(context) {
jQuery("#btn1").click(
function () {
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", 'http://moodle.foresteee.com/login/index.php');
// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("username", "testaccount1#wo");
hiddenField.setAttribute("password", "forest3");
form.appendChild(hiddenField);
document.body.appendChild(form);
// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
form.submit();
}
);
}
}
})(jQuery);
And I've created a small link:
Click here
This seems to be working:
$('a').click(function(){
window.open('', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
$('<form></form>').attr('method','post').attr('action','url_to_post').attr('target','formresult').append('<input type="text" name="test" value="test_value"/>').submit();
});
JSFiddle
So, the whole popup window thing is a little 90s, isn't it? Modals are definitely the way to go and via a simple framework such as bootstrap, you can ensure that it will be cross-browser compatible and even responsive. Plus your interface will look a lot better.
just remember to include the bootstrap cdn:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
html:
<a class="btn btn-primary">click me bro</a>
<div id="popup" class="modal fade">
<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">Modal's rock!!</h4>
</div>
<div class="modal-body">
<form method="post" action="url_to_post" target="formresult"></form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
jquery:
$('a').click(function(){
$('.modal-body form').empty().prepend('<input type="text" name="test" value="test_value"/>');
$('#popup').modal('show');
});
check it out Fiddle
Continuing what Flash Thunder has done (he probably deserves more credit)
This is the fix that I found to his work
http://jsfiddle.net/doiks14/a8HFa/11/
For some reason, IE won't respond to a submit event from a form unless its in the body.
I've only really added $('body').append($form) - this seems to fix it.
I use a template that uses bootstrap. I'm having trouble with showing a modal.
The form has a jquery validation, if everything is ok then when clicking on submit a confirmation modal should appear to ask user if he is sure he wants to store that information. If form doesn't pass validation then a simple message appears.
For the mentioned actions I build this:
<form action="#" id="form_sample_2" class="form-horizontal">
<div class="alert alert-error hide">
<button class="close" data-dismiss="alert"></button>Existen errores en el formulario. Por favor verifique.</div>
<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel3">Cargar Usuario</h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn green" id="btnYes">Confirmar</button>
</div>
</div>
<!-- end modal -->
</form>
As you can see, modal and error message has the attribute "hide"...
the js file:
var handleValidation2 = function () {
// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form2 = $('#form_sample_2');
var error2 = $('.alert-error', form2);
var success2 = $('#myModal', form2);
//IMPORTANT: update CKEDITOR textarea with actual content before submit
form2.on('submit', function () {
for (var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
})
form2.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
//some code
},
submitHandler: function (form) {
success2.show();
error2.hide();
}
//some code
On this snippet, if form doesn't pass validation then error2.hide() function shows up the alert error message.
Problem comes when form passes validation when success2.show() function should show confirmation modal, but it's not doing that. Nothing appears when form is ok and I'm wondering what am I doing wrong.
Any help would be really much appreciated.
J.
Instead of success2.show(); use success2.modal('show')
This should fix your issue
submitHandler: function (form) {
success2.removeAttr('aria-hidden');
success2.show();
error2.hide();
}
do u try to remove att aria-hidded. hope that work for u
I have problem with jquery $.post function. I use this function a lot and same function works fine except in one case and I don't understand why it keeps redirecting me after script was executed, here is js code:
var record;
$('.delbtt').on('click', function(e){
e.preventDefault();
var deleteid = $(this).parent().parent().find('#id').text();
record = $(this).parent().parent();
$('#delrecord').empty().val(deleteid);
});
$(document).on('submit', '#delteform', function() {
var formData = $(this).serialize();
$.post('includes/delete.php',formData,processData);
function processData(data){
record.remove();
};
});
HTML:
<!-- Modal -->
<div class="modal fade" id="deleteFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="deleteform" class="form-horizontal" role="form" action="includes/delete.php" method="POST"> <!-- -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete record</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this person?</p>
</div>
<input type="hidden" id="delrecord" name="delrecord" value="" />
<div class="modal-footer">
<button type="button" class="btn btn-default empty" data-dismiss="modal">Cancel</button>
<button id="delentry" type="submit" class="btn btn-danger">Delete Person</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I know that function is executed successfully, because if I put alert("Why is this not working?"); after record.remove();, I can see alert and in background code executed, but instead of staying at the same page it redirects me to 'includes/delete.php'. I tried disabling all other $.post functions that I have in my JS, I tried using $('#deleteform').submit(), I tried putting it outside of my main $(document).ready(function() {}); same results... Always same result it redirects me after function completes instead of staying on a page. Does anybody have idea why am I getting this behavior?
php code:
<?php
include('budgetprop/Initialize.php');
Database::GetInstance()->ConnectToServer($errors);
$record = $_POST['delrecord'];
# CONNECT TO DB
if(Database::GetInstance()->ConnectToServer($errors)){
$insertSQL1 = "DELETE FROM salaries WHERE record_id = '".$record."' ";
$stmt1 = sqlsrv_query(Database::GetInstance()->databaseConnection, $insertSQL1);
# IF THERE IS AN ERROR
if(!$stmt1){
echo "Error, cannot delete record";
}else{
Database::GetInstance()->LastInsertId($stmt1);
}
# IF ALL QUERIES WERE SUCCSESSFUL, COMMIT THE TRANSACTION, OTHERWISE ROLLBACK
if($stmt1 && !$errors){
sqlsrv_commit(Database::GetInstance()->databaseConnection);
# FREE THE STATEMENT
Database::GetInstance()->FreeDBStatement($stmt1);
echo "success";
return true;
}else{
sqlsrv_rollback(Database::GetInstance()->databaseConnection);
# FREE THE STATEMENT
Database::GetInstance()->FreeDBStatement($stmt1);
return false;
}
# NO CONNECTION WAS MADE
}else{
return false;
};
?>
preventDefault() doesn't work either
It sounds like your form is still being submitted, hence the redirect. You can stop it with preventDefault()...
$(document).on('submit', '#deleteform', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.post('includes/delete.php',formData,processData);
function processData(data){
record.remove();
};
});
Assuming "deleteform" is the ID of a form element on your page, within which you have an input or button of type "submit", I would suggest changing the delentry button to have a type of "button".
Most browsers will perform a POST/GET on a form that has an input or button of type submit when that button is clicked.
I would then update your jQuery event handler to select the button and specify an onclick event:
$('#delentry').click(function() {
...
});
If you wish to maintain some form of graceful degradation, you could leave the markup as a submit type button and on $(document).ready(), update the type of the button to be "button".