Currently I am working on a page with Bootstrap tables. These tables are autofilled. On the first page there are no problems to eliminate an element, because there is a confirmation message to eliminate.
When I go to the next page, and I want to eliminate the click on the "x" to eliminate it makes the action of deleting, but no confirmation message appears.
Here is the code
can('delete', $unit)
<form id="{{ $unit->id }}" style="display: inline-block;" method="post" action="{{ url("estates/$estate->uid/units/$unit->uid") }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="delete">
<button id="deleteUnit-{{ $unit->id }}" class="btn btn-simple btn-danger eliminar" rel="tooltip" data-placement="left" title="Eliminar" name="eliminar" data-id="{{ $unit->id }}">
<i class="fa fa-times"></i>
</button>
</form>
#endcan
and
$().ready(function(){
window.operateEvents = {
'click .edit': function (e, value, row, index) {
info = JSON.stringify(row);
// swal('You click edit icon, row: ', info);
console.log(row.actions);
},
'click .remove': function (e, value, row, index) {
console.log(row);
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: false,
search: true,
showToggle: false,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 10,
clickToSelect: false,
pageList: [10, 15, 20],
formatShowingRows: function(pageFrom, pageTo, totalRows){
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
//activate the tooltips after the data table is initialized
$('[rel="tooltip"]').tooltip();
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
$('[id^="deleteUnit-"]').on('click', function (e) {
event.preventDefault();
var id = $(this)[0].getAttribute('data-id');
swal({
title: '¿Estás seguro?',
text: "No es posible deshacer esta acción!",
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancelar",
confirmButtonClass: "btn btn-info btn-fill",
confirmButtonText: "Si, eliminar",
cancelButtonClass: "btn btn-danger btn-fill",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm){
document.getElementById(id).submit();
}
});
});
});
Here is an imageScreenshoot
Related
here’s my problem:
I’m making a client system in javascript and php.
I would like to be able to delete the account of a customer who has a unique identifier (id=x) by clicking on a “Delete Customer” button.
<div class="menu-item px-5">
<a id="kt_account_delete_account_btn" class="menu-link text-danger px-5"> Delete Customer</a>
</div>
The problem is that to bring a little dynamism, I treat the request in javascript in this way:
submitButton.addEventListener('click', function (e) {
e.preventDefault();
swal.fire({
text: "Êtes vous sûr de vouloir supprimer ce compte ?",
icon: "warning",
buttonsStyling: false,
showDenyButton: true,
confirmButtonText: "Oui",
denyButtonText: 'Non',
customClass: {
confirmButton: "btn btn-light-primary",
denyButton: "btn btn-danger"
}
}).then((result) => {
if (result.isConfirmed) {
$.post("details.php?id="+$("#admin_id_two").val()+"&client="+$("#client_idbis").val(), $("#delete_form").serialize()) // Code I usually use in a form
.done(function(data) {
if (data.erreur)
{
Swal.fire({
text: data.erreur,
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, je recommence!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
else if (data.link)
{
Swal.fire({
text: "Le compte utilisateur a correctement été supprimé !",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, je continue!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
window.location.href = data.link;
}
});
}
})
.fail(function() {
Swal.fire({
text: "Une erreur est survenue lors de la requête. Veuillez ré-essayer.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, je recommence!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
} else if (result.isDenied) {
Swal.fire({
text: "Vous n'avez pas supprimer le compte de l'utilisateur.",
icon: 'info',
confirmButtonText: "Ok",
buttonsStyling: false,
customClass: {
confirmButton: "btn btn-light-primary"
}
})
}
});
});
My request is as follows:
I would like to recover the customer id ($clientinfo[‘id’] in php) and the administrator id ($login[‘id’] in php) in javascript to execute the request.
Could you help me?
add attribute data-id your a tag
like this:
<a id="kt_account_delete_account_btn" data-id="12" class="menu-link text-danger px-5"> Delete Customer</a>
remember: 12 is example, you should load id dynamically by php
and get in your Listener . like this:
submitButton.addEventListener('click', function (e) {
e.preventDefault();
let id = this.getAttribute('data-id');
Assuming variable $userID contains the ID of the user, you can append user id to data-id attribute using php as shown then use Javascript to get the data-id attribute as pointed out by Ali SSN. See using Jquery in snippet
<a id="kt_account_delete_account_btn" data-id="<?php echo $userID;?>" class="menu-link text-danger px-5"> Delete Customer</a>
$(document).on('click','.menu-link',function(e){
e.preventDefault();
var userID=$(this).attr('data-id');
alert(userID);
})
a{
color:blue;
text-decoration:underline;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item px-5">
<a id="kt_account_delete_account_btn" class="menu-link text-danger px-5"data-id="5"> Delete Customer</a>
</div>
I am not fluent in javascript and I cannot understand very well because the .then (result) does not work for me. That is, it is never confirmed,
so, it never enters the if conditional. The code is the same as that offered in the SweetAlert api. Where does that variable result come from?
All the code of my script. Try to use Sweet alert for confirmation a delete form... No works the button confirmation in this way:
#extends('adminlte::page')
#section('title', 'Borradores')
#section('content_header')
<h1 class="text-center">Listado de borradores</h1>
#stop
#section('content')
{{-- {{ route('admin.create') }} --}}
<div class="card">
<div class="card-header">
<a class="btn btn-primary btn-block" href=""><i class="fas fa-table mr-2"></i> Crear nuevo Articulo</a>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="tablaArticulos" class="table table-bordered table-striped dt-responsive tablas">
<thead>
<tr class="text-center">
<th>Categoria</th>
<th>Titulo</th>
<th>Entradilla</th>
<th>¿Publicar?</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{{-- {{ route('admin.destroy', $post ) }} --}}
#foreach ($posts as $post)
<tr class="text-center">
<td>{{ $post->category->name }}</td>
<td>{{ $post->name}}</td>
<td>{{ $post->extract}}</td>
<td><a class="btn btn-success" href="{{ route('admin.edit', $post) }}"><i class="fas fa-cross"></i></a></td>
<td>
{{-- {{ route('admin.edit', $post ) }} --}}
<form action="{{ route('admin.destroy', $post->id) }}" method="post" class="delete-form">
#csrf
#method('delete')
<div class="btn-group">
<a class="btn btn-warning" href="{{route('admin.edit', $post)}}"><i class="fas fa-pen"></i></a>
<button type="submit" class="btn btn-danger"><i class='fas fa-trash'></i></button>
</div>
</form>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr class="text-center">
<th>Categoria</th>
<th>Titulo</th>
<th>Entradilla</th>
<th>¿Publicar?</th>
<th>Acciones</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
#stop
#section('css')
<style>
.fotoTabla{
width: 60px;
}
</style>
<link rel="stylesheet" href="/css/admin_custom.css">
#stop
#section('adminlte_js')
#stack('js')
#yield('js')
<script src="{{ asset('js/app.js') }}"></script>
{{-- Datatables responsive --}}
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
{{-- id Databales --}}
<script>
$(function () {
$(".tablas").DataTable({
responsive: true,
autoWidth:false
});
});
</script>
#if (session('crear'))
<script>
Swal.fire({
title: '{{ session("crear") }}',
icon: 'success',
showConfirmButton: false,
timer: 2500,
timerProgressBar: true
})
</script>
#endif
#if (session('message'))
<script>
Swal.fire({
title: '{{ session("message") }}',
icon: 'success',
showConfirmButton: false,
timer: 2500,
timerProgressBar: true
})
</script>
#endif
#if (session('alert'))
<script>
Swal.fire({
title: 'ATENCIÓN',
text: '{{ session("alert") }}',
icon: 'warning',
showConfirmButton: false,
timer: 3500,
timerProgressBar: true
})
</script>
#endif
<script>
// Mensaje de alerta al pulsar el Botón de borrar en las tablas
$('.delete-form').submit(function(e){
e.preventDefault();
let nombreElemento = e.target.parentElement.parentElement.children[1].innerText;
console.log(nombreElemento);
Swal.fire({
title: `¿Estás seguro de borrar ${nombreElemento}?`,
text: "Recuerda que esta acción es irreversible",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#50f8ac',
cancelButtonColor: '#d33',
focusCancel: true,
confirmButtonText: 'Ok, borralo',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.isConfirmed) {
this.submit();
}
});
});
</script>
#stop
I have placed two console.log () before the .then and a else in the conditional
<script>
// Mensaje de alerta al pulsar el Botón de borrar en las tablas
$('.delete-form').submit(function(e){
e.preventDefault();
let nombreElemento = e.target.parentElement.parentElement.children[1].innerText;
Swal.fire({
title: `¿Estás seguro de borrar ${nombreElemento}?`,
text: 'Recuerda que esta acción es irreversible',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#50f8ac',
cancelButtonColor: '#d33',
focusCancel: true,
confirmButtonText: 'Ok, Bórralo',
cancelButtonText: 'Cancelar'
}).then((result) => {
console.log('Inside.. ');
if (result.isConfirmed) {
this.submit();
} else {
console.log('No confirmed!! ');
}
});
});
</script>
And selecting both buttons, I get the same result.
I make a Video with this strange behaviour
Video in drive
It comes from the dialog it pops up... If you confirm the 'Are you sure?' then it will fire next dialog 'Deleted!'.
In the end, after many days I found the solution.
I changed the version in the Adminlte configuration of the installed sweetalert. I had version eight sweetalert2#8
which comes by default and I have passed it to ten. This has fixed the strange behavior.
'Sweetalert2' => [
'active' => true,
'files' => [
[
'type' => 'js',
'asset' => false,
'location' => '//cdn.jsdelivr.net/npm/sweetalert2#10',
],
],
],
In simplest form variable result - is the result of button click... that is passed down from the Swal() to .then()
This is the simplest form of explanation I could give you, if you wish to understand this in detail you should learn more about the Promises and Asyncronise code in JS
The Code you have given in the question is working fine here is the jsfiddle link for the same Link
if you add ! before the result then the 2nd pop-up will fire when you click the cancel button and nothing will happen if you click yes button
====Update====
Change the single quotes of .fas.fa-trash to double quotes
<button type="submit" class="btn btn-danger"><i class='fas fa-trash'></i></button>
to
<button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i></button>
all Swal.fire() functions are missing ;
also there is a lot of inconsistency while using a double quote, single quotes & Template literals
Please formate the script tag.. there could be one misplaced quote that might be causing this weird behaviour...
Also in the .then() block before you call the if() console log to see what you have inside of the result.
The rest of the code is looking good there should is no issue with the syntax/code while calling Swal.fire()
When I place a dynamically populated multiselect in a dropdown overlay, the multiselect's dropdown does not display when clicked. The exact same multiselect works just fine when it's not in a dropdown. See a fiddle that reproduces the issue here http://jsfiddle.net/yhnukfsz/6/ (started with the answer to this question).
The broken multiselect in question:
<div class="btn-group">
<button type="button" id="dropBtn" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select class="form-control" id="mult2" multiple="multiple">
</select>
<button>
foobar
</button>
</form>
</li>
</ul>
</div>
And the JS:
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('.selectpicker').selectpicker({
container: 'body'
});
$('body').on('click', function(event) {
var target = $(event.target);
if (target.parents('.bootstrap-select').length) {
event.stopPropagation();
$('.bootstrap-select.open').removeClass('open');
}
});
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
function setUpMultiselect(id) {
$(id).multiselect({
enableFiltering: true,
includeFilterClearBtn:false,
enableCaseInsensitiveFiltering: true,
selectAllJustVisible : true,
includeSelectAllOption : true,
nonSelectedText:"Filter ...",
numberDisplayed : 1
});
const options = [
{
title: 'title1', label: 'label1', id: 'id1', selected: true,
},{
title: 'title2', label: 'label2', id: 'id2', selected: true,
},{
title: 'title3', label: 'label3', id: 'id3', selected: true,
}]
$(id).multiselect('dataprovider', options);
$(id).multiselect('rebuild');
}
$('#dropBtn').click(() => {
setTimeout(() => {
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
}, 500)
})
Additional things I've tried that haven't fixed the issue include rebuilding/reinitializing the multiselect on the dropdown click event with and without a delay.
I use DataTables in my project with Metronic v6 admin panel template. But DataTables dropdown export button styling doesn´t seem correct. I haven´t anything in DataTables stylesheet or DataTables js.
My dom code
dom: '<"row"<"col-8"B><"col-3 float-right"f><"col-1 float-right"l>>rtip',
buttons: [
{
extend: 'collection',
text: '<i class="fa fa-ellipsis-v"></i>',
className: 'btn btn-primary btn-elevate btn-icon btn-sm btn-square',
buttons: [
{ text: 1 },
{ text: 2 },
{ text: 3 },
{ text: 4 },
{ text: 5 }
],
dropup: true
},
{ extend: 'copy', className: 'btn btn-warning btn-elevate btn-icon btn-sm btn-square', titleAttr:'Copy', text:'<i class="fa fa-file-alt"></i>' },
{ extend: 'excel', className: 'btn btn-success btn-elevate btn-icon btn-sm btn-square', titleAttr:'Excel', text:'<i class="fa fa-file-excel"></i>'},
{ extend: 'pdf', className: 'btn btn-google btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-file-pdf"></i>' },
{ extend: 'colvis', className: 'btn btn-info btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-eye"></i>' },
],
It looks like this:
But after I clicked the dropdown button it seems like this:
I use DataTables released version : https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js
Version: DataTables 1.10.20
In my UI Grid here are the Column Defs in my myController.js file:
{ field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
{ field: 'trans_stat', displayName: 'Transaction Status' },
{ field: 'sub_trans_actn_typ', displayName: 'Sub Transaction Action Type', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' , visible : false },
{ field: 'case_key', displayName: 'Case Key', visible: true, celltemplate: '<a class="text-center" ng-href="#" ng-click="grid.appScope.setAssociateCaseModal(row)">{{COL_FIELD}}</a>' },
{ field: 'approved_by', displayName: 'Approved By', visible: false }
Here on clicking the case_key link a UI Bootstrap modal should pop up .
How to do that ?
I know in a html file using a button click it is something like :
<h3>Search Transaction</h3>
<div style="float: right; margin-top: -35px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#recentSearchesModal">Recent Searches</button></div>
</div>
<div class="modal fade" id="recentSearchesModal" 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">Recent Searches</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="menu_simple" ng-repeat="obj in CaseRecentSearches" style="padding:8px;">
<ul>
<li>
{{obj | placeholderfunc}}
</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But here the click event is my controller.js file then how to get the modal opened ?
You need to modify the field's cellTemplate and then call grid.appScope.openModal(). openModal should live in your main controller under $scope.openModal. Do it like this:
Your template:
var myTemplate = "<a href='#' ng-click='grid.appScope.openModal($event, row)'>{{ row.entity.myFieldName }}</a>";
Use the template in gridOptions.
$scope.gridOptions = {
columnDefs: [{
field: 'myFieldName',
displayName: 'My Field Name',
cellTemplate: myTemplate;
}]
};
Function to call modal:
$scope.openModal = function (e, row) {
//in here, you can access the event object and row object
var myEvent = e;
var myRow = row;
//this is how you open a modal
var modalInstance = $uibModal.open({
templateUrl: '/path/to/modalTemplate.html',
controller: MyModalCtrl,
backdrop: 'static'
//disable the keyboard
//keyboard: false,
resolve {
//pass variables to the MyModalCtrl here
event: function() { return myEvent; },
row: function() { return myRow; }
}
});
//call the modal to open, then decide what to do with the promise
modalInstance.result.then(function() {
//blah blah the user clicked okay
},function(){
//blah blah the user clicked cancel
})
}