I have this code:
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="lineModalLabel">Prašymas Dėl Pakvietimo</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
#if($errors->any())
#foreach($errors->all() as $error)
<ul class="list-unstyled">
<li class="alert alert-danger">{{$error}}</li>
</ul>
#endforeach
#endif
{!! Form::open(['url' => 'sukurti', 'id' => 'frm']) !!}
#include('components.forma')
{!! Form::close() !!}
</div>
</div>
</div>
</div>
Want I want to do here is to show errors without closing the modal. Because if now I leave blank spaces and press submit, the modal shuts down and if I'm press one more time on button to show modal than I can see the error. How to make make that when spaces blank I press enter the modal wont close and just stay but with errors ?
To Work like that you have to make few adjustment in your code .
Jquery will handle your submit action . Make a submit event like ;
$('#frm').submit(function(e){
//stop default submit
e.preventDefault();
//make checks here now check for space .
var field = trim($('fieldname').val());
//of course you can apply some jquery validation library here too .
if(field.length > 0){
//submit form but you need to perform ajax for saving data here
//on ajax success close you modal
//here if you have some server side validation error then show them here without closing modal
//laravel give you error in json array form . foreach and append them on ul tag .
//$error = []; $.each(errors , function(val){$error[] = "<li>"+val+"</li>";}); $('ulid or class').html(error);
//empty html of this ulid or class if there is no error
// $('#squarespaceModal').modal('hide');
}else{
//show error
$('ulid or class').html('<li>This is error</li>');
}
})
That is the basic idea , how you can achieve your goal .
Related
I am trying to get an "id" to a modal view, this is in order to updated a "onclick" element, but I don't find a way :(, any idea how this could be done for boostrap 5 , ¿or other way I could do it? Thanks !
<tr th:each="user: ${users}">
<a data-bs-toggle="modal" th:title="active" th:id="${user.id}" th:attr="data-target='#modal-warning'+${user.id }" data-bs-target="#modal-view">inactivate</a>
<div th:fragment="modal" class="modal fade modal-warning" th:id="modal-warning+${clinicalRepresentative.id }" tabindex="-1" role="dialog" aria-labelledby="label-modal-1" >
<div class="modal-dialog">
<div class="modal-footer">
<input th:onclick="'location.href=\'/inactivate/' + (id=${clinicalRepresentative.id}) +'\''" />
<script>
$(document).ready(function() {
var id;
$('[title="active"]').click(function() {
id = $(this).attr('id');
Finally, thanks to lot of searching and trying, I found the solution, hope it helps with who is struggling, the trick is to put the modal inside the same loop of the table or div, and creating and dynamic "id" with the attribute sentence of thymeleaf, like is explained in this page for an older version:
<tr th:each="user: ${users}">
<td ><a data-bs-toggle="modal" data-row="${user}"
th:attr="data-bs-target='#modal-warning'+${user.id }">Inactivate</a>
<!-- MODAL -->
<div th:fragment="modal" class="modal fade" th:id="modal-warning+${user.id }" tabindex="-1"
My problem is that when I click the submit button the modal closes and the only way to know if an error has trigerred is if I click again on the button to make the modal form appear. The error trigger works fine but I would like to reload the modal window if an error is detected.
Any help would be greatly appreciated.
Here's the button to trigger the modal form and the form div:
<button id="addFilm" type="button" class="btn btn-primary mb-5 mr-3" data- toggle="modal" data-target="#modalFilm">
Add a film
</button>
<div class="modal fade" id="modalFilm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
Here's a function that checks if an input is empty and then triggers an error message right below the input title:
<?php if(isset($_GET['code'])){
if($_GET['code'] == 'addFilm'){
if (!Utilitaire::validateInput($_POST['title'])) {
echo ("Please enter a title");
$validate= false;
}
}
}
?>
you can programmatically open modal if you need
<?php if (!$validate) : ?>
<script>
$(document).ready(function () {
$('#modalFilm').modal('show');
});
</script>
<?php endif; ?>
http://getbootstrap.com/docs/4.1/components/modal/#via-javascript
I have a simple question about javascript and bootstrap modal. I have a wizard where I use file upload form, so I check the name of the file and if it doesn't contains some string I have to show a modal where ask if you want to continue anyway. How can I know which button is clicked into modal from javascript or jquery?
I have this code:
if (index==3){
var fileControl = document.getElementById('file');
//Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
//File contains id so you can continue the upload
uploadFunction();
}
else{
$('#warningDatatableModal').modal("show");
//If click on Yes call uploadFunction
//If click on No return false
}
}
HTML modal code:
<div class="modal" id="warningDatatableModal" data-backdrop="static" data-keyboard="false">
<div class="modal modal-warning">
<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">Warning</h4>
</div>
<div class="modal-body">
<p>There is a incongruity between file name and fleet and
car previously selected. Are you sure to continue?</p>
</div>
<div class="modal-footer">
<button id="close" type="button" class="btn btn-outline pull-left"
data-dismiss="modal">Close</button>
<button id="continueButton" type="button" class="btn btn-outline">Continue</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
After Yeldar Kurmangaliyev advice I have update my code but the wizard go ahed to the next tab instead of waiting into actual tab
if (index==3){
var fileControl = document.getElementById('file');
//Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
//File contains id so you can continue the upload
uploadFunction();
}
else{
$('#warningDatatableModal').modal("show");
$(".modal-footer > button").click(function() {
clicked = $(this).text();
$("#warningDatatableModal").modal('hide');
});
$("#warningDatatableModal").on('hide.bs.modal', function() {
if (clicked === "Cancel"){
return false;
}else {
uploadFunction();
}
});
}
}
If I put this code out of wizard works(it doesn't close modal with cancel button because I use return false that needs for my wizard), but I need to stop wizard waiting modal result.
You can simply attach events to your buttons.
However, the user may want to close the window without action. The design of modal UI and its overlay suggests to click outside the window and close it.
In order to create an event which will fire event always when a user closes your modal, you need to attach to hide.bs.modal event:
$('#warningDatatableModal').on('hide.bs.modal', function() {
});
Here is the working JSFiddle demo.
You can try using the ids of the buttons and attaching a listener to see when they have been clicked like so:
$('#close').on('click',function(){
//do something
});
$('#continueButton').on('click',function(){
//do something
});
This might be really stupid but I am not seeing anything straight here, help me out please.
so their is this guy :
As you can see upon click the function changeBlock is called
this.changeBlock = function() {
var flag = confirm("You sure you want to block this user ?");
if(flag){
blockUser(this.postId);
if(this.block() != ""){
this.block("Blocked");
this.pointId(AS.currentUserDetails.name);
return "Blocked";}
}
}
and somewhere lie the function blockUser
function blockUser(post_id) {
var blockUser = AS.baseUrl + "blockNewUser";
$.ajax({
url:blockUser,
type:"POST",
data:{postId : post_id},
success:function(data) {
// `request` seems a very strange name; perhaps `data` or `response`?
},
error: function(){
// You can't use `document.write` after the page has been parsed
}
});
}
My problem is that I cant use confirm() for confirming block or cancel.
I will have to use a html modal which is used through out the website.
If at some point of the execution I add
$('#my-modal').modal('show');
then though the modal appears but rest of the execution takes place without waiting for me to select yes or no.
And if by some magic I manage to make JS wait for selection, How will I know what was selected ?
what should I do ?
I cannot use any third party modals.
here is the modal I want to use :
<div id="block-confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<div class="clearfix side-space">
<h3 class="modal-title text-center">Are you sure you want to Block this user ?</h3>
</div>
<form id="form-block-confirm" name="" method="post" action="" class="form-horizontal">
<div class="clearfix side-space">
<div class="clearix text-center">
<button type="submit" class="btn btn-saffron btn-introduce" id='block-confirm-button'>Block</button>
<button type="submit" class="btn btn-saffron btn-introduce" id='block-cancel-button'>Cancel</button>
<!--input type="submit" name="submit" class="btn btn-saffron btn-introduce" value="Post"-->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
you should be doing something like this in such situations .
In View Model:
this.changeBlock = function() {
$('#my-modal').modal('show');
}
function blockUser(post_id) {
//code here
}
this.Block=function(){
blockUser(this.postId);
if(this.block() != ""){
this.block("Blocked");
this.pointId(AS.currentUserDetails.name);
return "Blocked";}
}
}
this.Cancel=function(){
$('#my-modal').modal('hide'); //hide or close what ever suits
}
View :
<button id='block-confirm-button' data-bind="click:Blocked">Block</button>
<button id='block-cancel-button' data-bind="click:Cancel">Cancel</button>
Any issues on this lets us know
I'am trying to append the action result of partial view to a modal popup div on button
click
Here is the script;
Function Edit(ID) {
debugger
$('#basicModal1').load('#Url.Action("Edit", "Resource")', "&id=" + codeURIComponent(ID))
}
On button click am calling the function and pass parameter to it.
Modal Popup
<div class="modal fade" id="basicModal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog" style="margin:90px 0 0 360px">
<form style="height:440px;width: 500px;background-color:white" class="form">
<div class="modal-header popup_back" >
<h4 class="modal-title" id="myModalLabel1">Edit</h4>
</div>
<div class="modal-">
<fieldset id="EditField" class="account-info" style="margin-top:-20px" >
</fieldset>
</div>
<fieldset class="account-action">
//here i like to place the partial view result
</fieldset>
</form>
#*<div class="modal-footer">
</div>*#
paritalviewaction is executing but popup is not displaying...
you should add modal.show event after load event , for example;
$( "#result" ).load( "ajax/test.html", function() {
console.log( "Load was performed." );
// show modal with modal show/hide method
});
for your example:
$('#basicModal1').load('#Url.Action("Edit", "Resource")', "&id=" + codeURIComponent(ID),
function(){
// modal.show
});