Question

I’m trying this:

$(document).ready( function() {

    var myLayout = $('#layoutContainer').layout({
        west__size:         450
    ,   east__size:         250
    });

    function toggleFullView() {
        myLayout.toggle('west');
    }

    $('#mapFooter').prepend('<a href="#" onClick="toggleFullView();" title="Toggle full view of map">Full View</a>');

}); // end document.ready

I keep getting an error ‘toggleFullView is not defined’ when I click the link created by the .prepend(). I’ve tried all sorts of messsing about. If I put the line from the toggleFullView function in the onClick i get the error – ‘myLayout is not defined’.

what to do? Thank you for your help.

Answer 1

This is because toggleFullView exists in the scope of the .ready() callback, not the global scope of the script.

var MyModule = (function($) {
    // $ is now jQuery

    // This is only accessible from within MyModule
    var privateRyan = 'fubar';

    // Globally accessible with MyModule.toggleFullView
    this.toggleFullView = function() {
        myLayout.toggle('west');
    }

    $(document).ready( function() {
        // Do init stuff here
        var myLayout = $('#layoutContainer').layout({
                west__size:         450,
                east__size:         250});
        $('#mapFooter').prepend('<a href="#" onclick="MyModule.toggleFullView();" title="Toggle full view of map">Full View</a>');
    }); // end document.ready

})(jQuery); // () will execute this function immediately​​​​​​​​​​​​​​​​​​​​​​​​​​​

You could also create the link and then attach an event handler with onclick and provide a callback.