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);
}
Related
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>
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;
}
},
Okay, what I have here is a Ajax delete record. I've tried to add jquery dialog-confirm instead of using javascript confirm. The delete function works but the problem is the animation of deleting row was not working.
Here's what I have right now. http://jsfiddle.net/altaire/YJC44/
Any help will appreciate. Thanks!
Php
while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></td>
<tr>;
Jquery/Ajax
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".records").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow", function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
You have to add a js as "//code.jquery.com/ui/1.11.0/jquery-ui.js". see below demo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);
});
</script>
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Try this
$('a[name="'+del_id+'"]').parents(".records")...
instead of $(this).parents(".records")...
You are trying to animate the $("#dialog") if you use $(this).
DEMO : http://jsfiddle.net/yeyene/YJC44/1/
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {
// $(this).parents(".records")
$('a[name="'+del_id+'"]').parents(".records")
.css({'background': '#fbc7c7'})
.animate({
opacity: 0
}, 1000, function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
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'm having a problem with my jquery modal its not closing correctly in internet explorer but works fine in chrome.
JS is not my strong subject so cant work it out. Here the code I'm using to open the modal and the close script
jQuery(function ($) {
var login = {
message: null,
init: function () {
$('#login').click(function (e) {
e.preventDefault();
// load the contact form using ajax
$.get("../_Includes/login.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'login-overlay',
containerId: 'login-container',
onOpen: login.open,
onShow: login.show,
onClose: login.close
});
});
});
},
open: function (dialog) {
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#login-container').animate({
height: h
}, function () {
$('#login-container form').fadeIn(200, function () {
});
});
});
});
});
},
show: function (dialog) {
$('#loginForm').on('submit', function (e) {
e.preventDefault();$('input[type=submit]', this).attr('disabled', 'disabled');
var username = $("#username").val();
var password = $("#password").val();
var url = "../_Scripts/login.php";
if (!username) {
$('input[type=submit]', this).removeAttr('disabled');
$("#loginReply").html('<img src="../_Images/round_error.png" alt="Error" width="31" height="30" /> Please enter your Username.').show().fadeOut(6000);
return false;
}
else if (!password) {
$('input[type=submit]', this).removeAttr('disabled');
$("#loginReply").html('<img src="../_Images/round_error.png" alt="Error" width="31" height="30" /> Please enter your Password.').show().fadeOut(6000);
return false;
}
else {
$('input[type=submit]', this).removeAttr('disabled');
$.post(url, $('#loginForm').serialize(), function (data) {
if(data.status == true){
window.location = data.action;
} else{
$("#loginReply").html(data.action).show().fadeOut(10000);
$("#username").val('');
$("#password").val('');
$("#loginProcessGif").hide();
}
});
}
});
},
close: function (dialog) {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
},
};
login.init();
});
Can anyone shed some light on this????
Thanks