I'm using Metronic bootstrap admin them, which comes with sweetalert - which is an alert library
What I'm trying to do is to do a confirm alert on attempting to delete a record from the table , each row has a delete button
now Metronic has gone and did a little bit of extension on it, so you can now use html 5 "data" attributed to declaratively to declare title, button types etc.
in my MVC app, the following Razor code iterates and adds the button, note that I'm adding the data-id attribute to it - the idea being that I can extract it when the button is clicked to get the id to delete it
e.g.
<button data-id="#u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
<i class="fa fa-times"></i>
</button>
the following is the Metronic JS extension file - I have added a few lines of code to it, so it calls a custom function on clicking the confirm option.
the idea being that I can leave the additions by Metronic Theme intact and call a custom function on the page where I need it
note that I'm also passing in the $(this) context to my custom function
var SweetAlert = function () {
return {
//main function to initiate the module
init: function () {
$('.mt-sweetalert').each(function(){
var sa_title = $(this).data('title');
var sa_message = $(this).data('message');
var sa_type = $(this).data('type');
var sa_allowOutsideClick = $(this).data('allow-outside-click');
var sa_showConfirmButton = $(this).data('show-confirm-button');
var sa_showCancelButton = $(this).data('show-cancel-button');
var sa_closeOnConfirm = $(this).data('close-on-confirm');
var sa_closeOnCancel = $(this).data('close-on-cancel');
var sa_confirmButtonText = $(this).data('confirm-button-text');
var sa_cancelButtonText = $(this).data('cancel-button-text');
var sa_popupTitleSuccess = $(this).data('popup-title-success');
var sa_popupMessageSuccess = $(this).data('popup-message-success');
var sa_popupTitleCancel = $(this).data('popup-title-cancel');
var sa_popupMessageCancel = $(this).data('popup-message-cancel');
var sa_confirmButtonClass = $(this).data('confirm-button-class');
var sa_cancelButtonClass = $(this).data('cancel-button-class');
$(this).click(function(){
//console.log(sa_btnClass);
swal({
title: sa_title,
text: sa_message,
type: sa_type,
allowOutsideClick: sa_allowOutsideClick,
showConfirmButton: sa_showConfirmButton,
showCancelButton: sa_showCancelButton,
confirmButtonClass: sa_confirmButtonClass,
cancelButtonClass: sa_cancelButtonClass,
closeOnConfirm: sa_closeOnConfirm,
closeOnCancel: sa_closeOnCancel,
confirmButtonText: sa_confirmButtonText,
cancelButtonText: sa_cancelButtonText,
},
function(isConfirm){
//action function on click
if (isConfirm){
swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");
//custom function call added by me
//------------------------------------------
if(typeof onConfirmClick === "function")
onConfirmClick.call(this);
//------------------------------------------
} else {
swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
}
});
});
});
}
}
}();
jQuery(document).ready(function() {
SweetAlert.init();
});
The function in my page:
<script type="text/javascript">
function onConfirmClick() {
alert($(this).data('id'));
//make Ajax call here
}
</script>
Now the problem is, I'm getting the ($this) but not able to get the id or any attribute from the button for that matter
if I print $(this) in console
and just "this"
The question here is:
how can I get the data-id attribute in my function ? if I try $(this).data('id') - I get undefined
Is this the correct approach design wise ? I want to be able to call a custom function on confirm but not disrupt Metronic extensions on sweetalert ?
To pass the id from the button's data-id to the onConfirmClick() function...
I would try to make it transit via a variable.
So on click of a .mt-sweetalert, a SweetAlert is triggered.
Nothing stops you to have another click handler to store the id in a variable accessible by the function.
var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
sweetAlertId = $(this).data("id");
});
Then in the function:
function onConfirmClick() {
alert(sweetAlertId);
//make Ajax request using sweetAlertId here!
}
In short, the id is not forced to transit via SweetAlert!
;)
Related
I'm using https://sweetalert2.github.io/
I tried using one single sweet dialog, but due to the others I couldn't make it work, and i've seen examples with fetch, but I'm using ajax, I saw a example with nested dialogs but once again, with fetch. In the code I put there are 2 comments where I would like to handle the loading dialog.
This is my script:
$(document).on("submit", "#formNuevoEstudiante", function (event) {
event.preventDefault();
$("#btnSubmit").prop("disabled", true);
let ap_paterno = $("#ap_paterno").val();
let ap_materno = $("#ap_materno").val();
let nombre = $("#nombre").val();
let sexo = $("#sexo option:selected").val();
let no_control = $("#no_control").val();
let carrera = $("#carrera option:selected").val();
let semestre = $("#semestre option:selected").val();
let sexo2 = sexo == "F" ? "Femenino" : "Masculino";
let mensaje = `x`;
let mensaje2 = `x`;
//Here is where I wan't to integrate the loading dialog
$.ajax({
url: "utils/ajax/nuevo_estudiante.php",
method: "POST",
data: {
ap_paterno: ap_paterno,
ap_materno: ap_materno,
nombre: nombre,
sexo: sexo,
no_control: no_control,
carrera: carrera,
semestre: semestre,
},
success: function (resp) {
if (resp == "existe") {
Swal.fire({
title: "Ya se encuentra registrado",
text: "x",
icon: "warning",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
}).then(function () {
window.location.href = "index2.php";
});
} else if (resp == "error") {
Swal.fire({
title: "Error",
text: "x",
icon: "error",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
});
} else if (resp == "ok") {
//Here is where I wan't to close the loading dialog
Swal.fire({
title: "Registro exitoso",
html: "<pre>" + mensaje + "</pre>" + mensaje2,
icon: "success",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
}).then(function () {
window.location.href = "index2.php";
});
}
},
});
});
The example given in the SWAL2 website isn't very suited for your use as it creates an input form itself while you already have an HTML form that gets input from the user. A basic easy-to-implement solution would be to use the showLoading and hideLoading methods with what you already have. From the documentation :
Swal.showLoading(): Shows loader (spinner), this is useful with AJAX
requests.
By default the loader be shown instead of the "Confirm" button, but if
you want another button to be replaced with a loader, just pass it
like this: Swal.showLoading(Swal.getDenyButton())
Swal.hideLoading(): Hides loader and shows back the button which was
hidden by .showLoading()
Just after the event.preventDefault(); line, you can add a loading dialog that will just display a loading message:
Swal.fire({
title: "Loading...",
html: "Please wait a moment"
})
Swal.showLoading()
Then, at the beginning of the success callback of your ajax request, just before entering the if condition, simply add a Swal.hideLoading() to stop displaying the loading animation.
Why does hideLoading and showLoading work on an already displayed popup?
The reason is because SweetAlert2 kind of (it seems to work like that but I didn't confirm it) works using static methods which takes their execution to a "global" scope, meaning that when you call one of SweetAlert2 methods, it runs and stores data in the same place: the Swal class which is shared everywhere. (If you want to know more about static class, there are several articles you can read on the internet)
Disclaimer! Now, I didn't take a look at how Swal stores data, or how it handles everything, but for the sake of argument, let's say it stores inside static properties like currentTitle, isLoading (which dictates whether or not a loading animation should be added to the popup), and more. That is effectively one reason why there's only one popup displayed at a given time (although by definition, there should be only one displayed).
So, when you call Swal.fire(), it essentially updates the Swal class properties (setting the currentTitle to Hello for example). When you call it again, it updates it again and effectively overwrites the values set by the previous call of fire(), replacing them with new ones.
But, unlike fire() which completely overwrites every property for the currently displayed popup, hideLoading and showLoading methods only overwrite ONE property: isLoading (reminder: this is how we've postulated SweetAlert works, the implementation could be made otherwise but for simplicity's sake, we assume it's like that) and let the others as is. That is why, when you use fire(), a new popup is displayed, but when using hideLoading and showLoading, the current popup displayed is changed.
So here is the problem:
I have two click event in one page. The first when you click on a thumbnail picture it's open a modal which shows a bigger image like Instagram on PC (I make an Instagram clone for practicing btw). The other button is for show more image.
The problem is, I use ajax for both click to get some variable and pass to the php. When the page loaded it's shows only 3 image and when I clicked one of them It's shows the right image in the modal but when I click show more it shows 3 more and after when I clicked on the thumbnail it's stucked. I mean its shows only one picture doesn't matter which thumbnail i clicked so the ajax request not runs again. I hope you can understand the problem and can help me. (sorry for my English).
So here is the code:
This is the ajax calling function:
function ajaxShow(urls,datas,element){
$.ajax({
url: urls,
data: {datas: datas},
cache:true,
}).always(function(result){
console.log("done");
element.html(result);
});
}
And these are the click events:
$(document).ready(function(){
//Open picture in modal
var pic = $(".pics");
var modalCont = $(".modal-content");
pic.on('click',function(event){
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
//Load more
var smbt = $(".smbt");
var limit = $(smbt).data('loaded');
smbt.on('click',function(event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
});
In a nutshell: After I clicked on load more the modal open ajax request not run again.
Use overloaded version of .on() on document node.
$(document).on(events, selector, data, handler );
So your code should be rewritten as this:
$(document).on('click', '.pics', null, function (event) {
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
and
$(document).on('click', '.smbt', null, function (event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
I have developed the gridview application using the widget (from this code)
https://github.com/pablorr18/TiDynamicGrid
i have modified the code as per my client requirements. Now if i like to click the view cart button on the list item it will alert the message like "Am clicked". But i tried in various ways.but i can't find the solutions. Can anyone please explain me how we are write the code for this.
I have follows below code in my application:
var items = [];
var showGridItemInfo = function(e){
alert("Onclick the row");
};
var delay = (OS_ANDROID) ? 1000:500;
$.tdg.init({
columns:3,
space:5,
delayTime:delay,
gridBackgroundColor:'#e1e1e1',
itemBackgroundColor:'#fff',
itemBorderColor:'transparent',
itemBorderWidth:0,
itemBorderRadius:5,
onItemClick: showGridItemInfo
});
function createSampleData(){
var sendit = Ti.Network.createHTTPClient({
onerror: function(e){
Ti.API.debug(e.error);
alert('There was an error during the connection');
},
timeout:10000,
});
sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&categoryid='+subcategorylist_category_id+'&productmin=0&productmax=50');
sendit.send();
sendit.onload = function(){
var response = JSON.parse(this.responseText);
if(response[0].success == 0){
alert("No Products Found");
}
else {
items = [];
for (var x=0;x<response[0].data.length;x++){
var view = Alloy.createController('item_layout',{
image:imageurl+response[0].data[x].thumb_image,
product:response[0].data[x].product,
productprice:"$"+" "+response[0].data[x].price,
onItemClick: addcart,
}).getView();
var values = {
product: response[0].data[x].product,
image: response[0].data[x].thumb_image,
productid : response[0].data[x].productid,
};
items.push({
view: view,
data: values
});
};
$.tdg.addGridItems(items);
reateSampleData();
$.tdg.clearGrid();
$.tdg.init({
columns:nColumn,
space:nSpace,
delayTime:delay,
gridBackgroundColor:'#e1e1e1',
itemHeightDelta: 0,
itemBackgroundColor:'#fff',
itemBorderColor:'transparent',
itemBorderWidth:0,
itemBorderRadius:5,
onItemClick: showGridItemInfo
});
createSampleData();
});
$.win.open();
The item_layout.xml code is looking like :
<Alloy>
<View id="mainView">
<ImageView id="thumb"/>
<Label id="product"></Label>
<Label id="productprice"></Label>
<Button id="addcart" onClick="additemtocart"/>
</View>
</Alloy>
EDIT:
now am getting the view and the button id from that specified view. But if am trying to click the button means can't able to do. can you check my code and give a solution.
i have added the below code :
var view = Alloy.createController('item_layout',{
image:imageurl+response[0].data[x].thumb_image,
product:response[0].data[x].product,
productprice:"$"+" "+response[0].data[x].price
}).getView();
var controller = Alloy.createController('item_layout');
var button = controller.getView('addcart');
button.addEventListener('click', function (e){
alert("click");
Ti.API.info('click');
});
First switch the ids to classes because they're non-unique. Only use ID's if you must. Second, try something like this:
Try something like this:
$('.addCart').click(function() {
var item = $(this).silblings('.product').text;
addItemToCart(item);
});
Even better, add a data-productId attribute to the shopping cart button and you could do something like this:
$('.addCart').click(function() {
var itemId = $(this).attr('data-productId');
addItemToCart(itemId);
});
This is better since you're only requiring the shopping cart button to be on the screen.
All this said, you also probably need to include a fallback that adds the item to the cart when javascript isn't available on the page.
I want to show Confirmation Dialog when user saves any document from EDITForm.aspx. So I have written following JavaScript code.
function PreSaveAction() {
var _html = document.createElement();
_html.innerHTML = " <input type=\"button\" value=\"Submit\" onclick ='javascript:SubmitDlg();' /> <input type=\"button\" value=\"Cancel\" onclick =\"javascript:CloseDlg();\" /> </td> </tr> </tbody> </table>";
var options = {
title: "Confirm",
width: 400,
height: 200,
showClose: false,
allowMaximize: false,
autoSize: false,
html: _html
};
SP.UI.ModalDialog.showModalDialog(options);
}
function SubmitDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
}
Now I have following queries.
SubmitDlg and CloseDlg is not fired when clicking on Submit or
Cancel.
Is this right way to Submit form (SubmitDlg method ) and Cancel dialog (CloseDlg method) from modal dialog ?
Also this modal dialog-box should be only appeared if no validation errors while saving record, means if any field-value is required and we have not put any value then it should display in-built red colored messages.
Thanks
in the options for the modal dialog you need to pass a reference to your call back function like this:
var opt = SP.UI.$create_DialogOptions();
opt.width = 500;
opt.height = 200;
opt.url = url;
opt.dialogReturnValueCallback = MyDialogClosed;
SP.UI.ModalDialog.showModalDialog(opt);
Then in your callback function you can check the status:
function MyDialogClosed(result, value) {
if (result == SP.UI.DialogResult.Cancel) {
//Cancel. Do whatever
}
else { //SP.UI.DialogResult.OK
//User clicked OK. You can pickup whatever was sent back in 'value' }
}
If you need to send stuff back from your dialog you can use this:
function okClicked()
{
SP.UI.ModalDialog.commonModalDialogClose(1, someobject);
}
To make this work you'd need to hook-up a function to the OK button in your server side code using something like this:
protected override void OnLoad(EventArgs e)
{
if (Master is DialogMaster)
{
var dm = Master as DialogMaster;
if(dm != null) dm.OkButton.Attributes.Add(#"onclick", #"return okClicked();");
}
base.OnLoad(e);
}
add class "CloseSPPopUp" to the btn u want to click to close
Add This Script to Page which has "CloseSPPopUp" btn
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
Now on Main Page where u are calling popup
function CloseSPUIPopoup{
$(".ms-dlgContent").hide();
}
Reason:
ms-dlgContent class is in Parent Page & CloseSPPopUp is in Iframe which is created at runtime
I have a problem trying to show loading icon when collapsible block is opening. I have a collapsible block with a listview inside which is populated dynamically via ajax/php. They list might have up to 500 elements, so I would like to show loading animation while it is loading.
I have tried
$('div.century').live('expand', function(){
var idval = $(this).attr('id');
console.log('expanded'+idval);
$.mobile.showPageLoadingMsg ();
$.get("helpers/getByCentury.php", { id: idval},
function(data){
$("#"+idval+" ul.ulist").html(data);
$("#"+idval+" ul.ulist").listview('refresh');
});
$.mobile.hidePageLoadingMsg ();
});
I have also tried
$('div.century').live('expand', function(){
var idval = $(this).attr('id');
console.log('expanded'+idval);
$.mobile.pageLoading();
$.get("helpers/getByCentury.php", { id: idval},
function(data){
$("#"+idval+" ul.ulist").html(data);
$("#"+idval+" ul.ulist").listview('refresh');
});
$.mobile.pageLoading(true);
});
without any luck.
Can anyone tell me how to fix this?
Thanks in advance.
You want to call $.mobile.hidePageLoadingMsg() in the callback function for your ajax call:
$('div.century').live('expand', function(){
var idval = $(this).attr('id');
console.log('expanded'+idval);
$.mobile.showPageLoadingMsg ();
$.get("helpers/getByCentury.php", { id: idval},
function(data){
$("#"+idval+" ul.ulist").html(data);
$("#"+idval+" ul.ulist").listview('refresh');
$.mobile.hidePageLoadingMsg ();//NOTICE: this has been moved inside the callback function for your $.get() call
});
});
Also a couple pointers.
You are using the $("#"+idval+" ul.ulist") selector twice in a row, you can make that more efficient by chaining function calls together like so:
$("#"+idval+" ul.ulist").html(data).listview('refresh');
If other people view your webpage in a browser that does not have the console.log function they will get an error and your JS will stop running, it is normally a good idea to put calls to the console.log function inside a conditional that checks for the existance of that function:
if (typeof(console.log) == 'function') {
console.log('expanded'+idval);
}