I have a jQuery UI Dialog. I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function(e) {
e.preventDefault();
$.ajax({
url: $('form.addEdit').attr('action'),
type: $('form.addEdit').attr('method'),
data: $('form.addEdit').serialize(),
open: function(){
$('.ui-widget-overlay').bind('click', function(){
$('div.deleteImageDialog').dialog('close');
})
},
success: function(html) { }
});
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
Then you have to bind an event to the overlay.
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
// your code...
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('.overlay_sector').bind( 'click', function() {
$("div.deleteImageDialog").dialog('close');
$('.overlay_sector').unbind();
} )
});
I had a similar problem. Went with a simpler code solution based on this thread's answer:
Use jQuery to hide a DIV when the user clicks outside of it
$(document).mouseup(function (e)
{
var myDialog = $("#dialog-confirm");
var container = $(".ui-dialog");
if (myDialog.dialog( "isOpen" )===true)
{
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
myDialog.dialog( "close" );
}
}
});
Related
I am opening a dialog box on click and it has a div with textarea in it. On the same page I use an ajax call to load content in another div.
After I make the ajax call, the text field in the dialog box doesn't pass the value on submit but it works perfectly fine, before the ajax call.
Jquery
$(document).ready(function() {
$("#popup").dialog({
autoOpen: false,
title: "Popup",
show: {
effect: "fade",
duration: 150
},
hide: {
effect: "fade",
duration: 150
},
clickOutside: true,
clickOutsideTrigger: "#btn"
});
$("#btn").click(function() {
$("#popup").dialog("open");
});
});
$.widget("ui.dialog", $.ui.dialog, {
options: {
clickOutside: false,
clickOutsideTrigger: ""
},
open: function() {
var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
var that = this;
if (this.options.clickOutside) {
$(document).on("click.ui.dialogClickOutside" + that.eventNamespace, function(event) {
if ($(event.target).closest($(clickOutsideTriggerEl)).length == 0 && $(event.target).closest($(that.uiDialog)).length == 0) {
that.close();
}
});
}
this._super();
},
close: function() {
var that = this;
$(document).off("click.ui.dialogClickOutside" + that.eventNamespace);
this._super();
},
});
Html
<button type="button" id="btn>Open Popup</button>
<div id="popup" style="display:none;">
<textarea id="textID" style="resize:none"></textarea></div>
Ajax Call causing the problem
$('.link').on('click', function (e) {
var load= $(this).attr('href');
var $this = $(this);
if(load == "#open") {
$.ajax({
type: 'post',
url: "/page/view/" + $(this).parents("[data-id]").attr("data-id"),
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});
How to open the modal after a ajax call on success i need to trigger the modal window automatically
<a class="main_blue_button" href="#complete_application_modal" id="applicationBtn">SIGN UP</a>
<div id="complete_application_modal">adsfadsf</div>
how to open the modal after on success ajax call
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>users/signUp_business",
data: $('#signup_form').serialize(),
dataType: "json",
success: function(result){
//alert(result);
if(result.error==0){
$("#show_error").html("This email or phone is already registered!");
//$("#business_email").focus();
$("#busp_email").removeClass('field_validation_error hidden');
$("#busp_email").addClass('field_validation_error');
$("#bus_email").css("color","#f42156");
hasError = true;
}else if(result.success==1) {
$("#signup_form")[0].reset();
$("#applicationBtn").attr("href","#complete_application_modal");
//$("#applicationBtn").attr("href", "#complete_application_modal").trigger('click');
$("a").trigger("click");
}
I think if your primary goal is to display modal window on ajax success you can simply do it by
$('#complete_application_modal').show();
and can hide it by
$('#complete_application_modal').show();
Then why are you using link reference..?
here is the modification to allow this
(function ($) {
$.fn.animatedModal = function(options) {
var modal = $(this);
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
position:'fixed',
width:'100%',
height:'100%',
top:'0px',
left:'0px',
zIndexIn: '9999',
zIndexOut: '-9999',
color: '#39BEB9',
opacityIn:'1',
opacityOut:'0',
animatedIn:'zoomIn',
animatedOut:'zoomOut',
animationDuration:'.6s',
overflow:'auto',
// Callbacks
beforeOpen: function() {},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {},
override: false
}, options);
var closeBt = $('.close-'+settings.modalTarget);
//console.log(closeBt)
var href = $(modal).attr('href'),
id = $('body').find('#'+settings.modalTarget),
idConc = '#'+id.attr('id');
//console.log(idConc);
// Default Classes
id.addClass('animated');
id.addClass(settings.modalTarget+'-off');
//Init styles
var initStyles = {
'position':settings.position,
'width':settings.width,
'height':settings.height,
'top':settings.top,
'left':settings.left,
'background-color':settings.color,
'overflow-y':settings.overflow,
'z-index':settings.zIndexOut,
'opacity':settings.opacityOut,
'-webkit-animation-duration':settings.animationDuration
};
//Apply stles
id.css(initStyles);
if (!settings.override) {
modal.click(function(event) {
event.preventDefault();
open();
});
}
closeBt.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'auto'});
settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
});
function afterClose () {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(); //afterClose
}
function afterOpen () {
settings.afterOpen(); //afterOpen
}
function open() {
$('body, html').css({'overflow':'hidden'});
if (href == idConc) {
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}
if (id.hasClass(settings.modalTarget+'-on')) {
settings.beforeOpen();
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
};
}
}
return {
open: open
};
};
}(jQuery));
AND YOU CAN TRIGGER using
var service = $("#demo01").animatedModal({
override: true
});
service.open();
one of the options in animatedModal is beforeOpen, you can use this option to call ajax request.
like this:
$("#modal-btn").animatedModal({
modalTarget:'animatedModal',
beforeOpen: function() {
// ajax request call here
// fill modal by data
}
});
in success function trigger the click event manually.
eg success : function(response){ $("#your-id-name").trigger('click'); }
i have a custom php script that uses jQuery Dialog for confirmation diaglog boxes.
The js that initates the dialog looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#dialogDelete').dialog('open');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#dialogDelete").length > 0) {
$("#dialogDelete").dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}
});
})(jQuery);
I have done serval modifications for replacing it with Bootstrap modal, so at this moment it looks like this:
(function ($) {
$(function () {
if ($('#frmCreateUser').length > 0) {
$('#frmCreateUser').validate();
}
if ($('#frmUpdateUser').length > 0) {
$('#frmUpdateUser').validate();
}
$("a.icon-delete").live("click", function (e) {
e.preventDefault();
$('#record_id').text($(this).attr('rev'));
$('#myModal').modal('show');
});
if ($("#tabs").length > 0) {
$("#tabs").tabs({
select: function(event, ui){
$("#message_box").html("");
switch(ui.index){
case 0:
$("#info_list_box").css("display", "block");
$("#info_add_box").css("display", "none");
break;
case 1:
$("#info_list_box").css("display", "none");
$("#info_add_box").css("display", "block");
break;
}
}
});
}
$(".multiselect").multiselect({
minWidth: 400
});
if ($("#myModal").length > 0) {
$("#myModal").modal({
autoOpen: false,
resizable: false,
draggable: false,
height:220,
modal: true,
close: function(){
$('#record_id').text('');
},
buttons: {
'Delete': function() {
$.ajax({
type: "POST",
data: {
id: $('#record_id').text()
},
url: "index.php?controller=AdminUsers&action=delete",
success: function (res) {
$("#content").html(res);
$("#tabs").tabs();
}
});
$(this).modal('hide');
},
'Cancel': function() {
$(this).modal('hide');
}
}
});
}
});
})(jQuery);
It seems that it has helped, and the dialog is now a modal as desired, though my buttons is not working.. i have made sure that the buttons have the role of button, but the js is not using my buttons as in the Dialog box.. im pretty sure that the error is somewhere around the last time the #myModal id is used..
Thank you.
Using Bootstrap modals gives you a lot of flexibility in modal design and function. The "downside" to this is that you have to do a little more work yourself. If you look at the Bootstrap modal documentation you will see that, while you are calling the modal correctly, it takes a completely different set of options than the jQuery dialog. First and foremost, you cannot pass buttons and button-actions as options to the modal. What you can do instead is create the structure you need in HTML with the buttons in place, then add javascript to control their actions. This bootply should work as a basic framework for what you want.
I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.
You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle
<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog
So I created to Function
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
}
});
jQuery('#divPopup').dialog('open');
}
and
function createConfirmDialog(url,params)
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
show: "blind",
hide: "explode",
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
jQuery.ajax({
type: "POST",
url: url,
data: params
});
},
Cancel: function() {
jQuery( this ).dialog( "close" );
}
}
});
jQuery('#divPopup').dialog('open');
}
Problem here is when I give call to this function, It opens previously opened Dialog.
I guess previous instance is not get removed.It doesnt dynamically create Dialog
Any solution??
Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy
jquery: How to completely remove a dialog on close
http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1
Simply use a flag to check dialog state (close/open)
var Open = false;
$('button').click(function () {
if (!Open) {
Open = true;
$(newDiv).dialog({
close: function (event, ui) {
Open = false;
}
});
} else {
alert("Close opened dialog first");
}
});