3

I'm trying to implement a fancy Yes No confirm and I'm having problems getting the callback to work as needed. The example below is using Fancybox v2.

The problem with the code below is that the function "do_something" is being call when HREF "Test" is clicked and not being called when the user clicks #fancyConfirm_ok.

function fancyConfirm(msg,callback) {
    var ret;
    jQuery.fancybox({
        'modal' : true,
        'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
        'afterShow' : function() {
            jQuery("#fancyconfirm_cancel").click(function() {
                ret = false;
                //jQuery.fancybox.close();
                $.fancybox.close();
            })
            jQuery("#fancyConfirm_ok").click(function() {
                ret = true;
                jQuery.fancybox.close();
            })
        },
        'afterClose' : function() { 
            if (typeof callback == 'function'){ 
                callback.call(this, ret); 
            } else {
                var callback_type = typeof callback;
                alert(callback_type);
            }
        }
    });
}
<a href="#" onclick="fancyConfirm('Are you sure you want to delete?',  do_something('a', 'b') );return false;">Test</a>
1
  • 2
    could you please provide a jsfiddle?
    – Neysor
    Commented May 4, 2012 at 9:46

2 Answers 2

11

Your method "do_something('a', 'b')" will be executed whenever user clicks on the link and the returned result will be passed as the second parameter to the "fancyConfirm" method. This is why your parameter "callback" is always "undefined".

There is also a problem with fancyBox - "afterClose" callback gets called twice - before opening and after closing (this will be changed in the next release).

I would bind a click event on the link and call a callback when user clicks on one of the buttons, like - http://jsfiddle.net/xcJFY/1/

2
  • Thanks for your answer. Will test and revert back. Commented May 5, 2012 at 21:01
  • This is a bit misleading, the undefined is caused by the var ret line being defined in the function. When callback.call(this, ret) is called it is already out of scope. See working example below.
    – user692942
    Commented Oct 29, 2013 at 15:34
2

Not a big fan of the double callback method (Sorry Janis).

So while trying to find a solution to this myself played around with similar code and found that as long my return value wasn't defined inside the scope of the function it works fine, when my return value was defined inside the function I would get weird behaviour where it would work for a time then revert to undefined.

Effectively the return value needs to be outside the scope of the function, global, closure etc.

$(document).ready(function() {
    $(".fancybox").on("click", function(e){   
        e.preventDefault();
        confirm("Do you wish to continue?", true, function(resp) {
            alert("You clicked " + resp);
        });
    });
});

function confirm(msg, modal, callback) {
    $.fancybox("#confirm",{
        modal: modal,
        beforeShow: function() {
            $(".title").html(msg);
        },
        afterShow: function() {
            $(".confirm").on("click", function(event){
                if($(event.target).is(".yes")){
                    ret = true;
                } else if ($(event.target).is(".no")){
                    ret = false;
                }
                $.fancybox.close();
            });
        },
        afterClose: function() {
            callback.call(this, ret);
        }
    });  
}

Here is a jsfiddle example

Thanks to Francisco Diaz who's post on Google Groups FancyBox forum pointed me in the right direction.

UPDATE:

Have now extended my example to use dynamically built buttons and custom return values, so you are not just limited to true and false.

$(document).ready(function() {
    $(".fancybox").on("click", function(e){   
        e.preventDefault();
        confirm("Do you wish to continue?", {
                /* 
                Define your buttons here, can handle multiple buttons 
                with custom title and values
                */
                buttons: [
                    { class: "yes", type: "button", title: "Yes", value: "yes" },
                    { class: "no", type: "button", title: "No", value: "no" },
                    { class: "maybe", type: "button", title: "Maybe?", value: "maybe" }
                ],
                modal: true
            }, 
            function(resp) {
                alert("You clicked " + resp);
            }
        );
    });
});

function confirm(msg, options, callback) {
    $.fancybox("#confirm",{
        modal: options.modal,
        beforeShow: function() {
            this.content.prepend("<p class=\"title\"></p>");
            $(".title").html(msg);

            for (i = 0; i < options.buttons.length; i++) {
                this.content.append($("<input>", { 
                    type: "button", class: "confirm " + options.buttons[i].class, 
                    value: options.buttons[i].title
                  }).data("index", i));
            }
        },
        afterShow: function() {
            $(".confirm").on("click", function(event){
                ret = options.buttons[$(event.target).data("index")].value;
                $.fancybox.close();
            });
        },
        afterClose: function() {
            this.content.html("");
            callback.call(this, ret);
        }
    });
}

Added jsfiddle example

6
  • your first, basic, example is just what I'd like to do, thanks for posting! Using your working jsfiddle example for that one, I ran into trouble at least because it looks like you're using jQuery 1.7 (.on) and I guess fancybox 2 (modal:modal instead of modal:true, and apparently a selector "#confirm" as a first argument to fancybox that I don't know how to deal with). Our site is on jQuery 1.4.3 and fancybox 1.3.4, and I haven't been able to get it to work. Do you have any idea how to backfit, or is the functionality only available with the newer versions?
    – sootsnoot
    Commented Mar 25, 2014 at 3:44
  • 1
    @sootsnoot I've just had a go at adapting the script to fit your purpose but I've come to the conclusion that you would be best upgrading both your jquery version to at least 1.7 and using fancybox2. The reasons are 1. You can't pass a selector into the fancybox. I'm using "#confirm" which is the id of my div element in the example, because 1.3.4 relies on href to pass the containing element this will not work. 2. The required events are not available and the existing events in 1.3.4 don't work the same way.
    – user692942
    Commented Mar 25, 2014 at 9:34
  • Your first example works great. I have tried the same on a webpage. Nothing happening after clicking yes or no. Is jquery version putting any impact? Note: I am working on an old application with fancybox2 Commented Nov 16, 2020 at 8:21
  • 1
    @Jnanaranjan honestly, I’m not sure. I will have to try testing it myself (it’s a while since I’ve used this) and get back to you. Did you try the accompanying JSFiddle?
    – user692942
    Commented Nov 16, 2020 at 8:24
  • 1
    As I have mentioned the jsfiddle works great. Once I try the code on the website. This occurs. No warning or error. I just asked if you or anyone know if any other scripts make any conflicts. I will try to fix this and post if I get succeed. Commented Nov 17, 2020 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.