I have a button that opens a dialog and when I close the dialog it stops working. When I save on the dialog screen it continues to work fine.
This is the button that opens the dialog:
<button class="actionbutton" type="button" onclick="addLitigant();">Add Litigant To Case(s)</button>
The code it calls:
function addLitigant(){
console.log("Calling addLitigant()");
editDialog.extendedDialog('loadUrl','CRFilingLitigantDialog.do?action=addLitigant', 'Add Litigant');
}
The close code on the dialog screen:
param['buttons'].push(
{
id: "closeButton",
text: "(C)lose",
accessKey: "c",
click: function () {
jQuery(this).extendedDialog('close');
jQuery(this).html('');
}
}
);
The save button code:
function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
We are using jquery 1.6.2. I have tried adding console.log statements to the addLitigant() function but when I come back from the close it doesn't call anything in the console. If I refresh the page it does begin to work again until we close from the dialog.
This is the immediate function that is on the page that opens the dialog
jQuery(function(){
console.log("function");
verificationDialog = jQuery('<div id="verificationDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:800,
title: "Compare Eflex and Icis"
});
compareDialog = jQuery('<div id="comparisonDialog"></div>').clerkReviewDialogTemplate({
height:400,
width:500,
title: "Imported Person"
});
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});
jQuery('.saveOnChange').bind('change', function(){
updateLitigants();
});
jQuery('.pin').icisAutocomplete({
mustMatch: true,
source: function(request, response){
getQuickAccess(request, response);
},
change: function(event, ui){
updateLitigants();
}}).each(function(index){
var data = jQuery(this).data('staging-json');
jQuery(this).bind('keydown', function(event){
return f5_handler({
event: event,
onf5key: function(){
var popup = people_popup({elem: this, event: event, data: data, success: function(data){
if(data['pin'] != 'null'){
jQuery(event.currentTarget).val(data['pin']);
}
if(data['masterPin'] != 'null'){
jQuery('#'+jQuery(event.currentTarget).attr('masterPinField')).val(data['masterPin']);
}
compareDialog.extendedDialog('close');
updateLitigants();
}});
compareImportedLitigant(data['id'], popup);
}
});
});
});
});
Thanks,
Tom
looks like a post back issue that makes you lose you bind events - this is the only thing that could cause losing button event - try to replace your immediate function with
function pageLoad() {}
see this $(document).ready() and pageLoad() are not the same!
might help
I compared this code to an older version. I noticed that it worked in an older version and I compared the two. The older version had a change in the edit dialog code, I added the close code to it and it now works.
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
close: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy').remove();
},
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});
Related
I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the dialog
$('#theDialog').dialog({
width: 400,
height: "auto",
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#theDialog').remove();
$('body').find('#theDialog').destroy();
},
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
},
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
});
return false;
}
And here's a snippet showing how I'm calling it:
if(CheckFormDataChanged() {
var changeTitle = "Data has been changed";
var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
var changeContinue = "Yes, continue without saving";
var changeCancel = "No, let me save";
if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
if (obj) obj.click();
return true;
}
}
What's wrong with my function (or the call)?
UPDATE: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
var def = new $.Deferred();
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the button array for the dialog
var buttonArray = [];
buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
if (!suppressCancel) {
buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
}
//create the dialog
$('#theDialog').dialog({
... dialog options ...
close: function (event, ui) { $('body').find('#theDialog').remove(); },
buttons: buttonArray
});
return def.promise();
}
And the usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
.done(function () { if (obj) obj.click(); return true; })
.fail(function () { return false; });
Just to give you some context, obj is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the fail() function.
Your curly braces are off:
[{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
}
}, {
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
As you have it, you only have one object in your buttons array.
I can't tell yet why the button doesn't display EDIT, ah, yes I can, there's a missing curly brace.
What I can tell you that your return lines simply won't work.
The dialog box gets displayed, your function returns immediately, and processing continues, so the click callback return values are completely ignored.
What you can do instead is return a promise:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
var def = $.Deferred();
...
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
def.resolve();
}
},
{ // ah - here's your button bug - a missing brace
text: cancelText,
click: function () {
$(this).dialog('close');
def.reject();
}
}
...
return def.promise();
}
with usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
.done(function() {
// continue was clicked
}).fail(function() {
// cancel was clicked
});
I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});
It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.
this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},
I have a modal dialog. I need to close the dialog on a different key combination than the Easape key. How can I do that.
I have the following code, but that never is executed. Any clues why ?
var agreeDialog = $j('#termsOfAgreementConfirm').dialog({
modal: true,
autoOpen:false,
resizable:false,
width : 1000,
height :400,
stack:false,
title:"Terms of Usage",
open: function(event, ui) { $j('.ui-dialog-titlebar-close').hide(); },
buttons: {
Disagree: function() {
disagree.dialog('open');
disagree.dialog('moveToTop');
},
Agree: function() {
$j(this).dialog('close');
$j.cookie("agree","Y");
new Ajax.Request('/test/user/ajaxUpdateAgreementForUser',
{
onSuccess:function(resp){
},
onError: function(resp) {
alert("Error:" + resp.toJSON());
return;
},
asynchronous:true,
evalScripts:true
});
$j(this).dialog('close');
}
}
});
if (result == "false" && $j.cookie("agree")== null) {
agreeDialog.dialog('open')
agreeDialog.keyup(function e() {
alert(e.keyCode);
});
}
You will need to catch the key events on the body and then trigger the close event. See this exmaple. Pressing any key will close the dialog box. You have to do it outside your declaration.
http://jsfiddle.net/yu8Sg/
$('body').keyup( function(e) {
$('#dialog').dialog('close');
});
I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?
I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)
I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?
This is what I'm trying now:
$(document).ready(function(){
//top-menu highlight link
$(".photos").removeClass().addClass("active");
$("a.fancybox").fancybox({
'overlayShow' : true,
'0opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){ $("body").css('overflow','hidden');},
'onComplete': function(){ $("body").css('overflow','auto');}
});
});
I was also trying to get onStart working...
I got fancybox v2.1.5, but when I do a search on 'onStart' in the javascript file it's not found. When I searched for '.trigger' I found: 'beforeLoad'
Maybe this could help someone out, in my case this is what I needed :)
I also saw there was an 'onReady' triggered somewhere which can be used instead of the 'onComplete' I guess!
P.S. I used it like this
$("a.popup").fancybox({
beforeLoad: function() {
return window.confirm('Continue?');
}
});
FancyBox < version 2
FROM EXAMPLE (fancybox.net):
$("#various7").fancybox({
onStart: function() {
return window.confirm('Continue?');
},
onCancel: function() {
alert('Canceled!');
},
onComplete: function() {
alert('Completed!');
},
onCleanup: function() {
return window.confirm('Close?');
},
onClosed: function() {
alert('Closed!');
}
});
EDIT: 06-2015
FancyBox >= version 2
FROM EXAMPLE (fancyapps.com):
$("#various7").fancybox({
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
Notice that the callback methods are different in fancybox2. It uses beforeLoad, afterShow, etc. Please consult fancybox2's documentation here.
Try this:
$(document).ready(function(){
$("a.fancybox").fancybox({
'overlayShow' : true,
'opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){
$("body").css('overflow','hidden');
},
'onCleanup': function(){
$("body").css('overflow','auto');
}
});
});
fancybox onStart onComplete status not working working with jquery 1.9.1 try jquery 1.6.4.