Question

I have a jquery mobile dialog that confirms if the user wants to overwrite a file that they upload. If the user clicks yes, then the callback function to upload is called, and if they click no then the dialog closes and nothing happens.

The problem is that if they user clicks no, and then clicks to upload again and accepts the overwrite, it calls the callback function twice. It is building up the callbacks depending on how many time they enter the dialog state and I am not sure how to handle this.

This is the entry point everytime the user clicks “upload”

CheckOverwriteUpload: function (boxFolderId, fileName) {
            var matchFound = false;
            $.each(BoxManager.Entries, function (index, value) {
                var entry = value;
                if (entry.name == fileName) {
                    matchFound = true;//Found the matching file
                }
            })


            if (matchFound) {
                //Pop the dialog to ask if they want to overwrite the file
                areYouSure("Overwrite File?", "The file " + fileName + " Already exists, would you like to overwrite it?", "Yes", function (result) {
                    if (result == true) {
                        //The client wants to overwrite the file, so we upload it
                        BoxManager.UploadFile(boxFolderId, fileName, true);

                    } else {
                        //The client does not want to overwrite. Close the dialog
                        $("#sure").dialog('close');
                    }
                    //Placed here to close the dialog after the possible upload
                    $("#sure").dialog('close');

                });
            } else {
                //No matches, go ahead and upload
                BoxManager.UploadFile(boxFolderId, fileName, matchFound);
            }

        },

Here is the dialog function

function areYouSure(text1, text2, button, callback) {

        $("#sure .sure-1").text(text1);
        $("#sure .sure-2").text(text2);
        $("#sure .sure-do").text(button).on("click", function () {
            callback(true);
        });
        $("#sure .close-do").text("No").on("click", function () {
            callback(false);
        });
        $.mobile.changePage("#sure", 'none', false, true);
    }

And just in case it is needed, here is the upload code. It just calls a method on the server

UploadFile: function (boxFolderId, fileName, overWrite) {
            $.mobile.showPageLoadingMsg();
            var etag = "";
            var id = "";
            $.each(BoxManager.Entries, function (index, value) {
                var entry = value;
                if (entry.name == fileName) {
                    etag = entry.etag;//hash of file used to overwrite files on box.com
                    id = entry.id;//unique box id for file. needed to overwrite file
                }
            });
            DocumentVaultService.UploadFileToBox(
                                        "<%=RootFolderGuid %>",
                                        "<%=FolderGuid %>",
                                        "<%=FileGuid %>",
                                        boxFolderId,
                                        fileName,
                                        "<%=IsClientFolder%>",
                                        "<%=AuthToken %>",
                                        overWrite,
                                        etag,
                                        id,
                                        function (result) {
                                            //Success on the upload, refresh the document list and close loading symbol
                                            BoxManager.GetBoxFolderContent(boxFolderId, BoxManager.BreadCrumbList[length - 1].folderName);
                                            $.mobile.hidePageLoadingMsg();
                                        },
                                        function (result) {

                                            $.mobile.hidePageLoadingMsg();
                                            alert("File failed to upload");
                                        });


        }

CheckOverwriteUpload and UploadFile are both contained in Boxmanager like so

var BoxManager = {
    CheckOverwriteUpload:function(){},
    UploadFile:function(){}
}

How can I prevent this from calling multiple times? Is there a way to clear the javascript cache before I call the dialog? Is there a better structure that I am not seeing for the callbacks?

Answer 1

Every time you call areYouSure() it is binding the callbacks again. One way around this is to unbind, then bind:

$("#sure .close-do").text("No").unbind("click").on("click", function () {
    callback(false);
});

Notice the unbind("click"). This removes any previous bindings, so they won’t stack up.
Another way around this is to put the Yes/No button bindings somewhere else that only gets called once (like the pageinit).