I am calling up a confirm box using jQuery UI Dialog like so:
function tps_show_confirm(cTitle, cContent, noClose = true, dwidth = 300, callback=null) {
if (noClose == true) {
var dClass = 'no-close';
} else {
var dClass = '';
}
var confirmDiv = '<div class="tps-confirm-modal">'+cContent+'</div>';
var maxHeight = window.innerHeight * .80;
$( confirmDiv ).dialog({
title: cTitle,
dialogClass: dClass,
modal: true,
width: dwidth,
maxHeight: maxHeight,
draggable: false,
resizable: false,
create: function(event, ui) {
$('body').css({ overflow: 'hidden' })
},
beforeClose: function(event, ui) {
$('body').css({ overflow: 'inherit' })
},
buttons: {
Ok: function() {
if (typeof callback === 'function') {
callback();
}
$( this ).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
}
I am trying to figure out how to delay the .dialog('close') action when the OK button is clicked until the callback() function is finished. I've tried various combinations of .done() an/or .finish() and .when() but I don't quite understand those and they don't seem to be for this case.
Any ideas how to achieve this?
Hopefully jquery.when will be useful
Ok: function() {
if (typeof callback === 'function') {
$.when(callback()).then(function() {
$(this).dialog('close');
}.bind(this));
}else{
$( this ).dialog('close');
}
}
This snippet can be useful. I am passing a callback back function.Inside a callback function there is an asynchronous call.Now when you will click on ok button the callback function will start executing but the dialog will be closed only when there is a response from async operation
function tps_show_confirm(callback = null) {
var confirmDiv = '<div class="tps-confirm-modal">Hello Test</div>';
var maxHeight = window.innerHeight * .80;
$(confirmDiv).dialog({
title: 'test',
dialogClass: 'dClass',
modal: true,
width: 300,
maxHeight: 300,
draggable: false,
resizable: false,
create: function(event, ui) {
$('body').css({
overflow: 'hidden'
})
},
beforeClose: function(event, ui) {
$('body').css({
overflow: 'inherit'
})
},
buttons: {
Ok: function() {
if (typeof callback === 'function') {
$.when(callback()).then(function(data) {
console.log(data)
$(this).dialog('close');
}.bind(this));
} else {
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
}
});
}
function test() {
var root = 'https://jsonplaceholder.typicode.com';
return $.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
return data;
});
}
tps_show_confirm(test)
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Related
Here is my code:
$(function () {
$(document).on('click', '.fa-times', function(e){
e.stopPropagation();
var result = ConfirmDialog('Are you sure?');
if (result) {return false}
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
})
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>'+message+'?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
})
But my code run that ajax request without waiting for the response of ConfirmDialog(message) function. How can I force it to wait?
You have 2 functions which get triggered depending on which confirm button is selected. Handle your ajax code from there.
I liked how Abhijit's answer abstracted out the code, but I think he missed something.
$(function() {
$(document).on('click', '.fa-times', function(e) {
e.stopPropagation();
function getConfirmHandler(element){
return function handleConfirm(result) {
if (result) {
return false
}
var row = element.closest('tr');
row.css('opacity', '0.3');
var word = element.closest('td').siblings('.word').text();
$.ajax({
url: '../../te_addStopWord',
type: 'GET',
data: {
word: word
},
dataType: 'JSON',
success: function() {
row.remove();
}, // success
error: function($a, $b, $c) {
alert($b);
row.css('opacity', '1');
}
}); // ajax
}
}
ConfirmDialog('Are you sure?', getConfirmHandler($(this)))
});
function ConfirmDialog(message, callback) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).remove();
callback(true);
},
No: function() {
$(this).remove();
callback(false);
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
})
Try move ajax into your ConfirmDialog:yesfunction. Or Try to use promise.
buttons: {
Yes: function () {
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},
On my page i have bootstrap owl carousel and contact form. Problem is either contact form is working or carousel slider sliding pictures - one from both. I found out where the problem is but have no idea how to solve that. Below find my JS code. First is for owl carousel and rest two for my contact form.
<script>
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
});
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
};
</script>
When i use as above - my contact form is working i mean mail i send and message is shown to user - but my carousel is not sliding pictures - it's stack.
If i want my carouse works i have to cut markers at the end like within below:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
this one was cutted from the end:
});
and now carousel works but not contact form. I belive i still have some marker typo within my JS, can you take a look?
FURTHER DISCUSSION:
If i split carousel JS to separate bracket - but without correctly enclosed mark - then everything seems to be working.. ;/ see below:
<script>
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
}
</script>
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
};
</script>
Try below code:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 6000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
}
</script>
Try to remove the comment inside the json:
$(document).ready(function() {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false,
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
});
});
It is not syntactically correct.
Never used jquery modals before and I can't quite get this to work. Any suggestions?
I'm getting "undefined is not a function" for "$('#dialog').dialog({"
Here's my HTML:
<div id="dialog" title="Enter your Email Address">Please enter your email address</div>
Here's my JS:
$(".input").click(function() {
console.log("Notify Me");
var emailAdd = $(".form").val();
if (emailAdd.length <5) {
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}
});
$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});
});
} else {
Some function
}
Try like
$(function(){
$(".input").click(function() {
console.log("Notify Me");
var emailAdd = $(".form").val();
if (emailAdd.length <5) {
$( "#dialog" ).dialog();
}
});
});
Working Fiddle
DEMO
$(document).ready(function ()
{
$("#btnShowSimple").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnShowModal").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
My view I want to check file if it bigger than 500 kb give for example alert()
<img src="#Model.Value" width="95" height="80" id="down-load" data-id="#Model.Key" data upload="#Url.Action("AddPreview", "Images")" />
(function ($) {
$("[data-id]").each(function () {
var $this = $(this);
$($this).upload({
name: 'attachments',
action: $this.data("upload"),
enctype: 'multipart/form-data',
params: {},
autoSubmit: true,
onSubmit: function () { },
onSelect: function () {
var size = $('#down-load')[0].files[0].size;//do not work
},
onComplete: function (e) {
if (e.charAt(0) != '[') {
$.fn.showUserActionNotification(e, true);
return;
}
var data = JSON.parse(e);
if (data[0].Error) {
$.fn.showUserActionNotification(data[0].Error, true);
}
else if (data[0].Preview) {
$this.attr("src", data[0].Preview);
}
}
});
$this.parent().find("input").css("cursor", "pointer");
});
})(jQuery);
I want to get size on function onSelect to check it on big
Is any body can help me?
I have done function
var imageSize = function (e) {
return $.map(e.files, function (file) {
var name = file.name;
var size = file.size;
if (size > 512000) {
var alert = $(".valid-size-goods").text(name + ": " + (size / 1024).toFixed(2) + " kb");
alert.dialog({
title: alert.attr("dlgTitle"),
modal: true,
resizable: false,
buttons: [{ text: alert.attr("btn"), click: function () { $(this).dialog("close"); } }]
}); return false;
}
return true;
});
};
and put it to onSelect:imageSize(e)
I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});
Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}
I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}