Confirm FancyBox, buttons not calling click functions.

[Mark Spritzler]

OK, so I am trying to make a few "Are You Sure" fancyBox. Well really one, but used in a few cases which each case a little bit different. I found some cool code and I just can't seem to get it to work. I get the popup, but when I click OK or Cancel buttons I added, their click functions aren't getting called at all, and the page refreshes. Here is my code.

This gets fired when one of the delete buttons in a list of items gets clicked for that particular item. I have this dataObject because in a list of guests the data that the confirmed function needs is different.
function removeItem(event) { var dataObject = new Object(); dataObject.eventId = event.data.eventId; dataObject.idOfItem = $(this).data("id"); dataObject.controllerUrl = event.data.path + dataObject.idOfItem + "/d";; dataObject.message = "Are you sure you want to remove this item?"; dataObject.confirmed = function() { $.post(controllerUrl, function() { userChangedItemInformation(eventId); }).error( function() { showAlert("Removing Item Failed"); } ); } fancyConfirm(dataObject); }

here is my fancyConfirm function, which pops up the fancybox, but the clicks aren't working.

function fancyConfirm(dataObject) { var makeSureText = ich['areYouSure'](dataObject); $.fancybox({ modal : true, content : makeSureText, onComplete : function() { $("#okConfirm").click(function(event, dataObject) { event.preventDefault(); dataObject.confirmed(); $.fancybox.close(); }) $("#cancelConfirm").click(function(event) { event.preventDefault(); $.fancybox.close(); }) }, onClosed : function() { return false; } }); return false; }

Here is the template "areYouSure"

<!--Are You sure confirmation contents--->
<script id="areYouSure" type="text/html">
    <div class="popupForm">
    <div class="line">
        <label>{{message}}</label>
    </div>
    <div class="line">
        <a id="okConfirm" class="button medium" href="">OK</a>
        <a id="cancelConfirm" class="button medium" href="">Cancel</a>
    </div>
    </div>
</script>

so
var makeSureText = ich['areYouSure'](dataObject);

is a String holding the generated html from the template. Now with a nice specific message.

Any ideas what I am missing?

Thanks

Mark

[Eric Pascarello]

Is everything being called correctly?

         onComplete : function() {  
            console.log("In onComplete");  ///Make sure we are called
            console.log("#okConfirm:\t" + $("#okConfirm").length); //Make sure the button is there
            console.log("#cancelConfirm:\t" + $("#cancelConfirm").length);  //Make sure the button is there
            $("#okConfirm").click(function(event, dataObject) {  <---AHHHHHHHHHHHH  
                event.preventDefault();  
                dataObject.confirmed();  
                $.fancybox.close();  
            })  
            $("#cancelConfirm").click(function(event) {  
                event.preventDefault();  
                $.fancybox.close();  
            })  
        }

Well I was showing you debugging and I see the problem with the AHH line.

Can you figure it out?

Eric

[Mark Spritzler]

If you are going to say I can't pass the dataObject, I will also say that I had a version where the dataObject wasn't being passed in and had the same issue that the function in onComplete never gets called.

Thanks

Mark

[Eric Pascarello]

What your code is saying is that the onclick event is passing in an argument into the function.

function fancyConfirm(dataObject) {  <-- Pass in an object Gives a local scope
    var makeSureText = ich['areYouSure'](dataObject);  
    $.fancybox({  
        modal : true,  
        content : makeSureText,  
        onComplete : function() {  
            $("#okConfirm").click(function(event, dataObject) {  <--Overrides the previous scope of 'dataObject'
                event.preventDefault();  
                dataObject.confirmed();  <-- Uses the dataObject which is Undefined since nothing passes that value there.
                $.fancybox.close();  
            })  

Solution is delete the variable from the the arguments of the click!

[Mark Spritzler]

OK, but I still have the same problem that the code isn't getting called.

My version before, did not have the parameter, and it still didn't work.

That code isn't getting called. I am stepping through the code with Safari's JavaScript debugger and I have break points in those functions and they aren't being called. ;(

Thanks

Mark

[Mark Spritzler]

Yeah, doing a bit more testing, nothing inside the onComplete or onClosed is getting called.

And now that part is solved I have onComplete being called, or should I say afterLoad. onComplete is in version 1.3 of fancyBox, but not in 2.x, which is what I am using. That's what you get when you Google and copy code from someone else. ;)

It still isn't 100% working, but I got a bit further. Now to figure out how to get that callback function in dataObject to get called. I am still getting the entire page refreshed, which in my case means they lose wha tthey were looking at and go back to the main page.

Mark

[Mark Spritzler]

OK, so here is my confirm function now.

function fancyConfirm(dataObject) {
    var makeSureText = ich['areYouSure'](dataObject);
    $.fancybox({
        content: makeSureText,
        'afterLoad' : function() {
            $("#okConfirm").click(function() {
                dataObject.confirmed();
                $.fancybox.close();
            });
            $("#cancelConfirm").click(function() {
                $.fancybox.close();
            });
        }
    });
    return false;
}

afterLoad is running, but if I click okConfirm or cancelConfirm, the click code still doesn't run. Maybe I should change it to .on()?

Thanks

Mark

[Eric Pascarello]

So what does the code look like with afterLoad?

[EDIT] LOL....You got it in right before I posted it. [/EDIT]

Eric

[Eric Pascarello]

If you add console.log($("#okConfirm").length) in the afterLoad are you getting one?

Eric

[Mark Spritzler]

Eric Pascarello wrote:If you add console.log($("#okConfirm").length) in the afterLoad are you getting one?

Eric

hmmm. I am getting 0 displayed when adding the logging. But I do see it in the elements.

<div class="fancybox-wrap fancybox-default fancybox-opened" style="display: block; overflow-x: visible; overflow-y: visible; height: auto; width: 488px; position: fixed; top: 107px; left: 447px; "><div class="fancybox-outer" style="padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; width: auto; height: auto; "><div class="fancybox-inner" style="overflow-x: auto; overflow-y: auto; width: 458px; height: 170px; "><div class="popupForm">
    <div class="line">
        <label>Are you sure you want to remove this item?</label>
    </div>
    <div class="line">
        <a id="okConfirm" class="button medium"  rel="nofollow">OK</a>
        <a id="cancelConfirm" class="button medium"  rel="nofollow">Cancel</a>
    </div>
    </div></div></div><div title="Close" class="fancybox-item fancybox-close"></div></div>

I could change my selector to "a#okConfirm" or something.

Mark

Mark

[Mark Spritzler]

OK getting even more closer. The buttons on the confirm dialog in fancybox click code is running. But now I callback to my dataObject's confirm function, and that is getting called, but not working correctly. It seems to be called twice. And it doesn't have access to my eventId in my dataObject.

Here is the code I am at now.

function removeItem(event) {
    event.preventDefault();

    // Set up the dataObject with data and confirmed function
    var dataObject = new Object();
    dataObject.eventId = event.data.eventId;
    dataObject.idOfItem = $(this).data("id");
    dataObject.controllerUrl = event.data.path + dataObject.idOfItem + "/d";
    dataObject.message = "Are you sure you want to remove this item?";
    dataObject.confirmed = function() {
        var eventId = this.eventId;
        $.post(this.controllerUrl, function(event) {
            event.preventDefault();
            userChangedItemInformation(eventId);
        }).error(
            function() {
                showAlert("Removing Item Failed");
            }
        );
    }

    // call to display the dialog
    fancyConfirm(dataObject);
}

And final fancyConfirm function

function fancyConfirm(dataObject) {
    var makeSureText = ich['areYouSure'](dataObject);
    $.fancybox({
        content: makeSureText,
        fitToView	: true,
        openEffect	: 'fade2',
        closeEffect	: 'fade'
    });
    $("#confirmDialog").on("click", "#okConfirm", {dataObject: dataObject}, function(event) {
        event.preventDefault();
        event.data.dataObject.confirmed();
        $.fancybox.close();
    });
    $("#confirmDialog").on("click", "#cancelConfirm", function(event) {
        event.preventDefault();
        $.fancybox.close();
    });
}

Yeah, I decided to forget about afterLoad. I would have only needed that if I made the fancyBox be modal, but it really doesn't have to be modal. If they click the X or outside the fancyBox that means the same as clicking cancel, in which I just dismiss/close the fancyBox anyway.

Thanks, so right now this is running twice and the eventId is not known

 $.post(this.controllerUrl, function(event) {
            event.preventDefault();
            userChangedItemInformation(eventId);

Mark

[Mark Spritzler]

OK, I think this should be the last problem. I think.

function removeItem(event) {
    event.preventDefault();
    var dataObject = new Object();
    dataObject.eventId = event.data.eventId;
    dataObject.idOfItem = $(this).data("id");
    dataObject.controllerUrl = event.data.path + dataObject.idOfItem + "/d";
    dataObject.message = "Are you sure you want to remove this item?";
    dataObject.confirmed = function() {
        $.post(this.controllerUrl, {eventId: this.eventId}, function() {
            var yetAnotherId = this.data.eventId;
            var yetAnotheId = this.eventId;
            var andYet = this.data;
            var andYetti = this.data['eventId'];
            userChangedItemInformation(this.data);
        }).error(
            function() {
                showAlert("Removing Item Failed");
            }
        );
    }
    fancyConfirm(dataObject);
}

See in my call to .post() I am trying to get the eventId that I passed in as data. Of the 4 vars, only one shows data (andYet) and it is not what I would expect. And I don't think I want to do String parsing just to get my id. But andYet is set to "eventId=309". I only want the 309 part. How do I get that? I tried different ways as you see in the other variables, but I can't find a combination that works.

Funny how you can spend 10+ hours on 20 lines of code to get a simple Confirmation dialog. And I know JavaScript has confirm(); but no one likes the ugly way it looks, so we have to hack.

Thanks

Mark

[Mark Spritzler]

OK finally resolved. Everything is working. Had to change the way I got my eventId in the .post method again.

function removeItem(event) {
    event.preventDefault();
    var dataObject = new Object();
    dataObject.eventId = event.data.eventId;
    dataObject.idOfItem = $(this).data("id");
    dataObject.controllerUrl = event.data.path + dataObject.idOfItem + "/d";
    if (event.data.path.equals("items/itemSignedUp/")) {
        dataObject.message = "Are you sure you can't bring this item?";
    } else {
        dataObject.message = "Are you sure you want to remove this item?";
    }
    dataObject.confirmed = function() {
        $.post(this.controllerUrl, function() {
            var eventId = document.getElementById('event').getAttribute("data-id");
            userChangedItemInformation(eventId);
        }).error(
            function() {
                showAlert("Removing Item Failed");
            }
        );
    }
    fancyConfirm(dataObject);
}

I also forgot that this function gets called when the event owner deletes items needed for the event as well as for guests that signed up to bring that item, can unsign themselves up. And so each would need a different message. Which I could push the message string up to those calls. Which I think I will now that I am talking about it. Hate having if statements like that.

And the Confirm function is still the same as my last post of it.

Thanks Eric for your help.

Mark