1.I want form should gives bootbox confirm popup and after clicking on confirm button of bootbox should submit the form**[Important]**
2.Bootbox Popup is coming on clicking update button but it should not submit the form on clicking confirm button of bootbox.(in alert it gives true value on clicking confirm)
javascript:
$('.linkmasterdata').submit(function(e)
{
bootbox.confirm({
title: "Confirmation Message?",
message: "Do you want to update this form?.",
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check "></i> Confirm'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
if (result == true) {
$("#submit").click();
}
}
});
e.preventDefault();
});
{!! Form::model($law, array('route'=>array('admin.forms.update',
$forms->id),'id'=>'linkmasterdata', 'class' => 'form-horizontal edit_form',
'method' => 'PUT', 'files' => true)) !!}
<input type="submit" id="submit" class="btn btn-success submit" value="Update">
{!! Form::close !!}
Related
My code:
div.form-group.col-md-12
label =t('.password')
= f.text_field :password,
required: true,
label: false,
type: 'password',
placeholder: 'Password',
input_html: {autocomplete: "new-password"},
class: 'form-control input-sm form-control-sm'
This form field is for taking input of password. I want to add an eye button in the right side of the input field box which will toggle password show & hide.
$("body").on('click', '.toggle-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password">Show/Hide</span>
<input type="password" id="pass_log_id"/>
=> behalf of html you can use this code
%script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"}
%span.fa.fa-fw.fa-eye.field_icon.toggle-password{:toggle => "#password-field"} Show/Hide
%input#pass_log_id{:type => "password"}/
i'm currently trying to solve the issue of JS not loading for dynamic modals.
The modals are called by using:
<a href="#" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"
id="<?php echo $row['id']; ?>" data-bs-toggle="modal" data-bs-
target="#kt_modal_new_target_<?php echo $sald_id; ?>">
The modal loads up, but all the functions, like SweetAlert2, FormValidation doesn't seem to be working. I've tried using wildcard for the querySelector but that did't seem to help, as the functions would only work on the first modal generated. Is there any way to call the js after every modal creation?
The .js file that contains the functions.
"use strict";
var KTModalNewCard = function () {
var submitButton;
var cancelButton;
var validator;
var form;
var handleForm = function() {
validator = FormValidation.formValidation(
form,
{
fields: {
'sald_nr': {
validators: {
notEmpty: {
message: 'Nurodykite Vardą ir Pavardę!'
}
}
},
'receiver_email': {
validators: {
emailAddress: {
message: 'Klaidingas el. pašto adreso formatas'
}
}
},
'coupon_value': {
validators: {
notEmpty: {
message: 'Nurodykite kupono vertę!'
}
}
},
'coupon_term': {
validators: {
notEmpty: {
message: 'Nurodykite kupono galiojimo terminą!'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
setTimeout(function() {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Kuponas sukurtas sėkmingai!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
}, 2000);
} else {
// Show error message.
Swal.fire({
text: "Kuriant kuponą rasta klaidų, bandykite dar kartą.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Ar tikrai norite atšaukti?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Taip, atšaukti",
cancelButtonText: "Grįžti",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Kupono kūrimas neatšauktas",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
init: function () {
modalEl = document.querySelector("[id^='kt_modal_new_target_']");
if (!modalEl) {
return;
}
modal = new bootstrap.Modal(modalEl);
form = document.querySelector("[id^='kt_modal_new_target_form_']");
submitButton = document.querySelector("[id^='kt_modal_new_target_submit_']");
cancelButton = document.querySelector("[id^='kt_modal_new_target_cancel_']");
initForm();
handleForm();
}
};
}();
KTUtil.onDOMContentLoaded(function () {
KTModalNewCard.init();
});
The form:
<form id="kt_modal_new_target_form_<?php echo $sald_id; ?>" class="form" name="kt_modal_new_target_form_<?php echo $nr; ?>">
<!--begin::Heading-->
<div class="mb-13 text-center">
<!--begin::Title-->
<h1 class="mb-3">Šaldytuvo Nr. <?php echo $nr; ?> nustatymai</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-gray-400 fw-bold fs-5">Jei kyla neaiškumų, papildomą informaciją rasite
čia.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row">
<label class="required fs-6 fw-bold mb-2">
Šaldytuvo numeris</label>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Nurodykite tik numerį"></i>
<input type="text" class="form-control form-control-solid" value="<?php echo $nr; ?>" id="sald_nr_input" name="sald_nr" required/>
<input type="hidden" id="sald_nr" name="sald_id" value="<?php echo $sald_id; ?>">
<input type="hidden" id="sald_nr_old" name="sald_nr_old" value="<?php echo $nr; ?>">
<!--end::Input-->
</div>
<br>
<div class="fv-row">
<label class="required fs-6 fw-bold mb-2">
Šaldytuvo zona</label>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Nurodykite zoną"></i>
<input type="text" class="form-control form-control-solid" value="<?php echo $zona; ?>" name="sald_zona" required/>
<!--end::Input-->
</div><br>
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-bold form-label">Ar rodyti šį šaldytuvą sąraše?</label>
<div class="fs-7 fw-bold text-gray-400">Jei šaldytuvas nebus rodomas, nebus galimybės pildyti jo temperatūrinių parodymų.</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<div class="fv-row">
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" name="checkbox" value="1" <?php if($sald_status == "1"){ ?>
checked="checked"
<?php } ?>/>
<span class="form-check-label fw-bold text-gray-400">Rodyti</span>
</label>
<!--end::Switch-->
</div>
</div><br>
<script>
</script>
<div class="text-center">
<button type="reset" id="kt_modal_new_target_cancel_<?php echo $sald_id; ?>" class="btn btn-white me-3">Atšaukti</button>
<button type="submit" id="kt_modal_new_target_submit_<?php echo $sald_id; ?>" class="btn btn-primary">
<span class="indicator-label">Išsaugoti</span>
<span class="indicator-progress">Prašome palaukti...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</form>
Any suggestion on how to make the dynamic modals use these functions? Thanks in advance.
Message in console
TypeError: document.getElementById(...) is null.
Blade (containing a button to delete)
<td>
<i class="fa fa-pencil"></i>
<button type="button" class="btn btn-danger btn-sm"
onclick="deleteSaleItem({{ $sale->id }})">
i class="fa fa-trash"></i>
</button>
<form id="delete-form-{{ $sale->id }}" action="{{ route('secretary.sales.destroy.item',$sale->id) }}" method="POST"
style="display:none;">
#csrf
#method('DELETE')
</form>
</td>
Javascript implementation
<script>
function deleteSaleItem(id){
const swalWithBootstrapButtons = swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.value) {
event.preventDefault();
document.getElementById('delete-form-'+id).submit();
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'Cancelled',
'Your data is safe :)',
'error'
)
}
})
}
</script>
I need to know what is wrong with this code which results in null. Thank You.
There is only one getElementById in your code.
document.getElementById('delete-form-'+id)
So, it might be the 'id' variable is empty or null and the element you retrieve become null.
Try debugging or console.log your 'id' variable just before document.getElementById code to see what happen to your variable.
I am trying to open a bootstrap modal on button click but it appears my code is not running. Here is my code snippet:
<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal(<?= $users['userid']; ?>); return false;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
function openViewUserModal(id) {
var data = {
"id": id
};
jQuery.ajax({
url: "includes/viewUser.php",
method: "POST",
data: data,
success: function(data) {
jQuery('body').append(data);
jQuery('#viewUserModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}
});
}
Clicking on the button does not elicit a response. What am I doing wrong?
this should work, mark the echo statement. i think its a typo.
<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal('<?php echo $users['userid']; ?>');">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
Assuming that the output of <?= $users['userid']; ?> is a string then you'll need to wrap it in quotes:
onclick="openViewUserModal('<?= $users['userid']; ?>'); return false;"
That being said, using inline event handlers is a very outdated method which should be avoided possible. Use unobtrusive event handlers instead. You can provide arguments to that event handler through data attributes, something like this:
$('.btn').click(function() {
$.ajax({
url: "includes/viewUser.php",
method: "POST",
data: {
"id": $(this).data('userid')
},
success: function(data) {
$('body').append(data);
$('#viewUserModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}
});
});
<button type="button" class="btn btn-xs btn-default" data-userid="<?= $users['userid']; ?>">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
I make button action on every data from table row. every row produces using foreach laravel blade template. the event will trigger a Javascript action to delete the data. but on my case the button only work on first row data.
here my Javascript and html code :
function hapusFaskes(kode){
var kodeStr = kode.toString();
var mes = confirm('Yakin Faskesnya mau di Hapus?');
alert(kode);
if (mes == true){
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url:'{{url('deleteFaskes')}}'+'/'+kode,
type:'get',
success: function (r){
console.log(r);
alert(r);
location.reload();
}
});
}
}
<tbody id="hasil-tabel">
#foreach ($faskes as $val)
<tr>
<td>{{$val->kode}}</td>
<td>{{$val->nama}}</td>
<td>{{$val->jenis}}</td>
<td>{{$val->alamat}}</td>
<td>{{$val->notelp}}</td>
<td>{{$val->jambuka}}</td>
<td>
<a href="{{url('editfaskes').'/'.$val->kode}}" class="btn btn-default" >Edit</a>
Hapus
</td>
</tr>
#endforeach
</tbody>
I don't know if there are something wrong on my code, if you know something wrong, please inform me and that will be a big help for me if you know something wrong on my code. thanks
Try using the below code with form action along with sweet alert for confirmation.
<form action="{{ url('deleteFaskes/'. kode) }}" method="POST" class="btn-inblock-laravel">
{!! method_field('delete') !!}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<a class="btn btn-danger btn-icon btn-xs tip" type="button" onclick="commonDelete(this)"><i class="icon-remove3"></i></a>
</form>
// include sweet alert js in assets folder
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script>
function commonDelete(element) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
element.parentElement.submit();
setTimeout(function () {
swal({
title: "Deleted!",
text: "",
type: "success",
showConfirmButton: false
});
}, 2000);
});
}
</script>