sweetalert2: use as preloader of content - sweetalert

I would like to use the sweetalert2 this way:
$('.preloaderContent').click(function(e) {
e.preventDefault();
swal({
title: "Data collecting....",
text: "Please Wait!",
type: "info",
showLoaderOnConfirm: true,
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
type: "get",
url: '/reports/test',
success: function(response){
$('.page-content').html(response);
}
})
});
}
});
});
How can I use 'swal.clickConfirm()' to start the loading without the need of letting the user hit the 'OK' Button?
And how can I close the swal window after all content is loaded?
Thanks so much!
!!! UPDATE:
This way it is working for me:
$('.preloadData').click(function(e) {
e.preventDefault();
swal({
title: "Collecting data....",
text: "Please wait just one moment",
type: "info",
showLoaderOnConfirm: true,
onOpen: function(){
swal.clickConfirm();
},
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
type: "get",
url: '/x/xx/',
success: function(response){
$('.page-content').html(response);
swal.closeModal();
}
})
});
},allowOutsideClick: false
});
});

Related

Vue-Tables-2 Side Server Get Error " Cannot read property 'data' of undefined" Why?

I am using vue-tables-2 for manage data. I wanna implement server side. But I got a problem. I can get the data as well. But I dont know why I got that error message. This is my code:
HTML
<v-server-table :columns="columns" :options="options"></v-server-table>
Vue Js
<script>
var config = {
"PMI-API-KEY": "erpepsimprpimaiy"
};
export default {
name: "user-profile",
data() {
return {
columns: ["golongan_name"],
options: {
requestFunction: function(data) {
return this.$http({
url: "api/v1/golongan_darah/get_all_data",
method: "post",
headers: config
}).then(res => {
this.data = res.data.data;
console.log(res);
});
},
filterable: ["golongan_name"],
sortable: ["golongan_name"],
filterByColumn: true,
perPage: 3,
pagination: { chunk: 10, dropdown: false },
responseAdapter: function(resp) {
return {
data: resp.data,
count: resp.total
};
}
}
};
}
};
</script>
This is the error:
enter image description here

SweetAlert2 Cancel button not working properly

I have a Yes and No button in my SweetAlert2. When I click on No it does a post to a method but I just want it to close the SweetAlert.
Here is the code I have written:
$('.js-update-details-click').click(function () {
var Id = Number($(this).data('result-id'));
swal({
title: 'Are you sure you want to ask the User to update their details?',
type: 'warning',
showCancelButton: true,
closeOnConfirm: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
confirmButtonClass: 'btn btn-success btn-full-width mar-bot-5',
cancelButtonClass: 'btn btn-danger btn-full-width mar-bot-5',
buttonsStyling: false
})
.then(function (isconfirm) {
if (isconfirm) {
$.ajax({
type: "POST",
url: '/Common/ComposeUpdateDetailsEmail',
data: { ReplyType: 'CleanUpdateDetails', Id: Id },
success: function (data) {
swal('User has been sent an email to Update their Details.')
}
});
}
});
}
);
Most probably you updated the sweetalert2 dependency to ^7.0.0 and didn't read the release notes with breaking changes: https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0
Starting from v7.0.0, SweetAlert2 will fulfill the promise for both confirm and cancel buttons and you need to handle the response from it this way:
Swal.fire({
...
}).then(function (result) {
if (result.value) {
// handle confirm
} else {
// handle cancel
}
})
Reference:
https://jsfiddle.net/ad3quksn/199/
`
swal({
title: 'Input something',
type: 'question',
input: 'text',
showCancelButton: true
}).then(
result => {
if (result.value) {
swal({
type: 'success',
html: 'You entered: <strong>' + result.value + '</strong>'
})
} else {
console.log(`dialog was dismissed by ${result.dismiss}`)
}
}
);
`
It shows with an output example of how to handle the promise as of v7.0.0: it helped me understand better!
Maybe help you :
swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })
ref : https://github.com/t4t5/sweetalert/issues/763

Vue2 update parent scope from modal component

I have a modal component that takes some input, creates a record on the backend and then as part of the success response I would like to push data to an object on the parent scope.
I have tried emitting an event from the child on success with the data I would like to append but I can't seem to get it to fire.
When addNote() successfully completes what would be the best approach to update the "notes" array object on the parent scope with the data I get back in my component?
Vue.component('modal', {
template: '#modal-template',
data: function() {
return {correctiveAction: this.correctiveAction}
},
props: ['notes'],
methods: {
addNote: function () {
axios.get('/quality/ajax/add-note/', {
params: {
action: this.correctiveAction
}
}).then(function (response) {
// append new corrective action
app = this;
this.$emit('addingNote', response.data.data.success[0].data);
//app.notes.push(response.data.data.success[0].data);
swal({
title: "Boom!",
type: "success",
text: "Corrective Action Successfully Added",
});
}).catch()
}
}
});
var app = new Vue({
el: '#app',
data: {
segment: "",
customer: "",
product: "",
startDate: "",
endDate: "",
notes: "",
showModal: false,
correctiveAction: ""
},
delimiters: ["<%","%>"],
methods: {
refresh: function () {
location.reload();
},
getNotes: function () {
app = this
axios.get('/quality/ajax/get-notes/').then(function (response) {
// populate notes
app.notes = response.data.data.success[0].notes
}).catch()
},
removeNote: function (id, index) {
app = this
axios.get('/quality/ajax/remove-note/', {
params: {
id: id
}
}).then(function () {
// remove note from list
app.notes.splice(index, 1);
swal({
title: "",
type: "success",
text: "Corrective Action Successfully Removed",
});
}).catch(function (err) {
console.log(err)
swal({
title: "",
type: "warning",
text: "Error Deleting Corrective Action",
});
return;
});
},
generateReport: function () {
$('#loading').show();
}).catch()
}
}
});
// get all active corrective actions
app.getNotes();
Well for one, you are setting a global variable app as a result of new Vue() and then you are blowing that variable away in your addNote method by setting app = this. That changes the variable to a completely different thing.
Also, you don't show anything listening to the addingNote event.
Don't use app everywhere. Use a scoped variable.
getNotes: function () {
const self = this
axios.get('/quality/ajax/get-notes/').then(function (response) {
// populate notes
self.notes = response.data.data.success[0].notes
}).catch()
},
And change addNote.
addNote: function () {
const self = this
axios.get('/quality/ajax/add-note/', {
params: { action: this.correctiveAction}
}).then(function (response) {
// append new corrective action
self.$emit('addingNote', response.data.data.success[0].data);
swal({
title: "Boom!",
type: "success",
text: "Corrective Action Successfully Added",
});
}).catch()
}
Looks like you should also fix removeNote.

Event that is taking place after inline edit

I have jqgrid, which sends row's data to another view (MVC4) when row is selected. But when I edit row's info (I'm using inline edit) this view doesn't changed. And I can't find event that is taking place after inline edit. This is js, what should I change to change my view after row editing
$(function () {
$("#GridTable").jqGrid({
url: "/Goods/GoodsList",
editurl: "/Goods/Edit",
datatype: 'json',
mtype: 'Get',
colNames: ['GoodId', 'Имя', 'Цена'],
colModel: [
{ key: true, hidden: true, name: 'GoodId', index: 'GoodId', editable: true },
{
key: false, name: 'GoodName', index: 'GoodName', editable: true, sortable: true,
editrules: {
required: true, custom: true, custom_func: notATag
}
},
{
key: false, name: 'Price', index: 'Price', editable: true, sortable: true, formatter: numFormat,
unformat: numUnformat,
//sorttype: 'float',
editrules: { required: true, custom: true, custom_func: figureValid}
}, ],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
height: '100%',
viewrecords: true,
caption: 'Список товаров',
sortable: true,
emptyrecords: 'No records to display',
cellsubmit : 'remote',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
//to get good's full view when row is selected
onSelectRow:
function () {
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
//to change good's full view after row deleting
loadComplete: function(data){
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{
// edit options
zIndex: 100,
url: '/Goods/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
{
// add options
zIndex: 100,
url: "/Goods/Create",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// delete options
zIndex: 100,
url: "/Goods/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
$('#GridTable').inlineNav('#pager', {
edit: true,
add: false,
del: false,
cancel: true,
editParams: {
keys: true,
afterSubmit: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
});
});
The properties and callback function of editParams parameter of inlineNav can be found here. What you need is probably aftersavefunc or successfunc instead of afterSubmit, which exist only in form editing method (see here). The parameters of aftersavefunc or successfunc callbacks are described here (as parameters of saveRow), but the parameters depend on the version of jqGrid, which you use and from the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid fork and I would recommend you to use the current (4.13.3) version of free jqGrid.

How to display Extjs.Ajax response in Grid

I have posted the form data using Ext.Ajax.request and I get the JSON in response. Now I want to display this JSON in grid. How can I do this? Please help me out in this.
Following is my code:
var simple = new Ext.FormPanel({
labelWidth: 85,
frame:true,
title: 'Test on Demand',
bodyStyle:'padding:10px 10px;',
width: 280,
defaults: {width: 250},
defaultType: 'textfield',
items: [ combo, myText],
buttons: [{
text: 'Start',
handler: function() {
var rtu_id = combo.getValue();
var testplanid = myText.getValue();
Ext.Ajax.request({
url : 'http://localhost/rtu_ems_extjs/lib/action',
method: 'POST',
headers: { 'Content-Type': 'application/json'}, params : { "action" : "rtu_request" },
jsonData: {
"rtu_id" : rtu_id,
"testplanid" : testplanid
},
success: function (response) {
var jsonResp = Ext.decode(response.responseText);
Ext.Msg.alert("Info",jsonResp.Type);
},
failure: function (response) {
var jsonResp = Ext.decode(response.responseText);
Ext.Msg.alert("Error",jsonResp.error);
}
});
}
}, {
text: 'Reset',
handler: function() {
simple.getForm().reset();
}
}]
});
simple.render(document.body);
I want to display 'jsonResp' in grid.