Refresh a region by onclick using backbone.js and marionette.js

Question

Below is my onclick event to refresh a region

'click div.tile-config ul.dropdown-menu li a.refresh': 'clickRefresh'

Below is my refresh code for a region

clickRefresh: _.bind(function(e){
    $(this).parents('.tile');
    this.blockUI(e);
    window.setTimeout(function(){
        alert("unblockUI");
        this.unblockUI(e);
    }, 1000);
    e.preventDefault();
},this),

blockUI: function(event){
    $(event).block({
        message: '<img src="res/lib/custom/img/loading.gif" align="absmiddle">',
        css: {
            border: 'none',
            padding: '2px',
            backgroundColor: 'none'
        },
            overlayCSS: {
            backgroundColor: '#000',
            opacity: 0.05,
            cursor: 'wait'
        }
    });
},

unblockUI: function(event){
    $(event).unblock({
        onUnblock: function () {
            $(event).removeAttr("style");
        }
    });
}

When i click on refresh link, it is not refreshing and getting "Type Error : this.blockUI(e) is not a function.". Please help me out.

Answer 1

It probably because you don't need to place the bind on the main function but on the callback on the time out

try this

clickRefresh: function(e){
    $(this).parents('.tile');
    this.blockUI(e);

    window.setTimeout(_.bind(function(){
        alert("unblockUI");
        this.unblockUI(e);
    },this), 1000);

    e.preventDefault();
},

Edit: so at the moment you are trying to place the block on the event which isn't a DOM element. If you want to place the blocker over the refresh button use event.currentTarget like so

    blockUI: function (event) {
        $(event.currentTarget ).block({
            message: '<img src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/loading.gif" align="absmiddle">',
            css: {
                border: 'none',
                padding: '2px',
                backgroundColor: 'none'
            },
            overlayCSS: {
                backgroundColor: '#000',
                opacity: 0.05,
                cursor: 'wait'
            }
        });
    },

    unblockUI: function (event) {
        $(event.currentTarget).unblock({
            onUnblock: function () {
                $(event.currentTarget).removeAttr("style");
            }
        });
    }

fiddle http://jsfiddle.net/leighking2/xn0yz33n/

or you could place it over the entire view with this.$el (which also means you wouldn't need to pass the event around) like so

    blockUI: function () {
        $(this.$el).block({
            message: '<img src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/loading.gif" align="absmiddle">',
            css: {
                border: 'none',
                padding: '2px',
                backgroundColor: 'none'
            },
            overlayCSS: {
                backgroundColor: '#000',
                opacity: 0.05,
                cursor: 'wait'
            }
        });
    },

    unblockUI: function () {
        $(this.$el).unblock({
            onUnblock: function () {
                $(this.$el).removeAttr("style");
            }
        });
    }

fiddle http://jsfiddle.net/leighking2/0osL8u6k/