I have a JavaScript function that I'm passing an argument to, that opens a jQueryUI Dialog. I want the dialog to have either one or two buttons, based on the value of the argument. How should I do this?
So far I've tried:
function foo(hasFile) {
$('#dialog').dialog({
buttons: {
Close: function() { $(this).dialog('close'); },
if (hasFile)
"Download": // do something
}
});
}
and
function foo(hasFile) {
$('#dialog').dialog({
buttons:
if (hasFile)
{
"Download": // do something
Close: function() { $(this).dialog('close'); }
}
else
{
Close: function() { $(this).dialog('close'); }
}
});
}
both of which have thoroughly broken my page.
buttons is a JavaScript literal object. You could do something like this:
function foo(hasFile) {
var buttons = {
Close: function() { $(this).dialog('close'); }
};
if (hasFile) {
buttons.Download = function(){
// Do something.
};
}
$('#dialog').dialog({
buttons: buttons
});
}
A general way to do that is like this:
foo.dialog({
// ...
buttons: (function() {
function CloseHandler() {
// close ...
};
function DownloadHandler() {
// download ...
};
return condition ?
{ "Download": DownloadHandler, "Close": CloseHandler } :
{ "Close": CloseHandler };
})(),
// ...
});
The idea is that you create a function where you can make decisions, and then return the result you decide upon.
Related
I have a modal Window which pops up and wait for 5 seconds and then closes.
The code is as follows
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
}
});
alert("Some Text");
}
callMe() function is called on load of the HTML file. Here I want to show the alert message "Some Text" after the modal window closes in 5 second. But every time when I run this it shows both the modal window and alert box together. I want the modal window to display first , wait for 5 sec and then show the alert box.I tried using sleep but its still coming the same way.
You have 2 options
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
},
close: function(){
alert("Some Text");
}
});
$('#dialog').on('dialogclose', function(event) {
alert('Some Text');
});
}
USE "close" method
use on dialogueClose event both examples are given in code above
It would be nicer if you can tell us what plugin you use for the dialog. I'm guessing the dialog has a close option that accepts a function. So try this:
...
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
close: function() {
alert("Some Text");
},
...
You can put the alert inside the setTimeout, just after you close the window.
JAVASCRIPT
open: function (event, ui)
{
setTimeout(function () {
$("#dialog").dialog("close");
alert("Some Text");
}, 5000);
},
I have the following HTML:
<div id="referenceResolverDialog" title="Resolve IDs">
<p>Please fill in a comma separated list of IDs.</p>
<form>
<fieldset>
<textarea name="referenceResolverTextArea" id="referenceResolverTextArea" rows="6" cols="54"></textarea>
</fieldset>
</form>
</div>
I created the jQuery dialog as follow:
var configParams = {
// some config properties
textAreaSelector: '#referenceResolverTextArea',
// some other config properties
}
var form, dialog;
dialog = $(configParams.dialogSelector).dialog({
autoOpen: false,
height: 220,
width: 350,
modal: true,
buttons: {
"Resolve": ResolveDialogData,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
dialog.dialog("close");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
ResolveDialogData(configParams);
});
The problem is that configParams is passed as a new object, not the object I have already. In the ResolveDialogData() method I have as follow:
function ResolveDialogData(configParams) {
alert(configParams); // returns [object Object]
alert(configParams.textAreaSelector); // returns undefined
}
What am I doing wrong?
If you're hitting that callback from your "Resolve" button, your configParams parameter will represent the Event object passed by your dialog.
Change
buttons: {
"Resolve": ResolveDialogData,
Cancel: function () {
dialog.dialog("close");
}
},
to
buttons: {
"Resolve": function(e) { // e is the object you were ending up with before
ResolveDialogData(configParams);
},
Cancel: function () {
dialog.dialog("close");
}
},
In the following code I want to create the functionality of a like button when the svg symbol is clicked. I am having trouble getting the value of sPaper, sPolyFill and sPolyEmpty.
So far as is they return undefined.
I need to integrate the symbolAnim function into the like and unlike function. How can I do this?
var LikeButtonView = BaseButtonView.extend({
template: _.template($('#like-button-test').html()),
sPaper: null,
sPolyFill: null,
sPolyEmpty: null,
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.sPaper = Snap(heartIcon.get(0));
this.sPolyFill = sPaper.select('.symbol-solid');
this.sPolyEmpty = sPaper.select('.symbol-empty');
},
like: function () {
console.log("Like clicked");
if (this.butn.hasClass("isLiked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")){
this.butn.removeClass("unLiked");
this.butn.addClass("isLiked");
this.addBlur();
}
},
unlike: function () {
this.butn.removeClass('isLiked');
this.butn.addClass("unLiked");
this.addBlur();
},
symbolAnim: function(heartIcon, isLiked) {
if (isLiked === false) {
sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
} else {
sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
}
}
});
Ok so I got the object by targeting this.butn
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.svgNode = this.butn.find("svg").get(0);
this.sPaper = Snap(this.svgNode);
this.sPolyFill = this.sPaper.select('.symbol-solid');
this.sPolyEmpty = this.sPaper.select('.symbol-empty');
console.log(this.sPaper);
Now I need to implement the functionality of symbolAnim in the like and unlike funcitons
For my like button function, which is triggered in the event has as "click selector": "like", I have come up with the following. However this only works once. So when I click the button the first time it adds the class liked and removes the class unliked, which is the default for the html element. Then when it is clicked again, it removes the liked class and adds the unliked class. So far it works as desired.
The problem is when I try to click it again, to like it again, and nothing happens. It doesn't call the like function anymore and the class remains the unliked.
What is causing this problem and how can I fix it?
like: function () {
if (this.butn.hasClass("liked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")) {
this.controller();
console.log("Like clicked");
}
},
controller: function () {
this.butn.removeClass("unliked");
this.butn.addClass("liked");
this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
},
unlike: function () {
this.butn.removeClass('liked');
this.butn.addClass("unLiked");
this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
console.log("Unliked");
}
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");
});
},