1

This code creates an endless loop for the second call of the dialog if line 99 is uncommented. I do not get exactly why. Obviously it is because in line 95 "myCallback" gets "save.callback" below and so is called from itself. But why is it not overwritten with what comes actually from the options?

How do I fix this code?

Here a working example on jsfiddle: http://jsfiddle.net/JvcnG/

Here the code:

function Sandbox() {
    // turning arguments into an array
    var args = Array.prototype.slice.call(arguments),
        // the last argument is the callback
        callback = args.pop(),
        // modules can be passed as an array or as individual parameters
        modules = (args[0] && "string" === typeof args[0]) ? args : args[0],
        i;

    // make sure the function is called
    // as a constructor
    if (!(this instanceof Sandbox)) {
        return new Sandbox(modules, callback);
    }

    // add properties to 'this' as needed:
    this.a = 1;
    this.b = 2;

    // now add modules to the core 'this' object
    // no modules or "*" both mean "use all modules"
    if (!modules || '*' === modules) {
        modules = [];
        for (i in Sandbox.modules) {
            if (Sandbox.modules.hasOwnProperty(i)) {
                modules.push(i);
            }
        }
    }

    // initialize the required modules
    for (i = 0; i < modules.length; i += 1) {
        Sandbox.modules[modules[i]](this);
    }

    // call the callback
    callback(this);

    // any prototype properties as needed
    Sandbox.prototype = {
        name: "Sandbox",
        version: "1.0",
        getName: function () {
            return this.name;
        }
    }
};

var box = {};

Sandbox.modules = {};

Sandbox.modules.news = function (box) {
    var box = box || {},
    dialog = null;

    box.removeDialog = function (object) {
        var dialog = object || box.dialog;
        dialog.remove();
    };

    box.getEntries = function (options) {
        var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        $('#main').css('color', color);
    };

    box.editEntry = function (options) {
        var triggerElement = options.triggerElement
        save = options.save;

        triggerElement.live('click', function () {
            box.displayDialog({
                save: save
            });
        });
    };

    box.displayDialog = function (options) {
        var save = options.save || null,
            dialog = $('<div id="dialog-modal">loading</div>');

        box.dialog = dialog;

        dialog.html('<button id="save" class="save">Save</button>')
            .dialog({
            modal: true,
            autoOpen: false,
            height: 'auto',
            position: 'top'
        }).dialog('open');

        // do we have a save function?
        if (null != save) {
            var buttonSave = $('button.save', dialog);
            myCallback = save.callback;
            save.callback = function () {
                box.removeDialog(dialog);
                if (myCallback != undefined && typeof myCallback == 'function') {
                    //myCallback(); // creates an endless loop
                }
            };

            buttonSave.on('click', function () {
                box.updateData(save);
            });
        }
    };

    box.updateData = function (options) {
        var callback = options.callback;
        $('#footer').append('<p>ok</p>');
        if (callback != undefined && typeof callback == 'function') {
            callback();
        }
    }
}

// page ready
$.ready(
Sandbox(['news'], function (box) {
    var getEntries = function () {
        box.getEntries();
    };
    box.getEntries();

    box.editEntry({
        triggerElement: $('#main'),
        save: {
            callback: getEntries
        }
    });
}));
3
  • I've uncommented the code on line 99 and am able to open the dialogs multiple times, at least in Chrome. Is there some additional info you could give us to help replicate the problem? Apr 29, 2013 at 13:46
  • I have this problem in Firefox 20.0 either Windows & Ubuntu and also in Internet Explorer. If do "console.log(myCallback)" before line 99, it outputs a function [endless times]. I can click that in firebug and land in line 98.
    – steros
    Apr 29, 2013 at 13:49
  • In Chrome the save action is very slow after the second call. But it still works, obviously Chrome prevents endless loops and just cancels the requests silently.
    – steros
    Apr 29, 2013 at 13:54

1 Answer 1

0

I found the problem! It is just a simple typo. Instead of a "," I wrote a ";" letting "myCallback" get into global scope...

This:

// do we have a save function?
if (null != save) {
    var buttonSave = $('button.save', dialog);
    myCallback = save.callback;
    save.callback = function () {
        box.removeDialog(dialog);
        if (myCallback != undefined && typeof myCallback == 'function') {
            //myCallback(); // creates an endless loop
        }
    };

    buttonSave.on('click', function () {
        box.updateData(save);
    });
}

Must be replaced with this:

// do we have a save function?
if (null != save) {
    var buttonSave = $('button.save', dialog),
    myCallback = save.callback;
    save.callback = function () {
        box.removeDialog(dialog);
        if (myCallback != undefined && typeof myCallback == 'function') {
            //myCallback(); // creates an endless loop
        }
    };

    buttonSave.on('click', function () {
        box.updateData(save);
    });
}

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.