Question

I know this is a weird question in words, so basically I am saying the following. I have this:

$("#dialog-areyousuremodal").dialog({
    resizable: false,
    height: 120,
    modal: true,
    buttons: {
        "Yes": function() {
            $(this).dialog("close");
            // more stuff coming soon
            },
        "No": function() {
            $(this).dialog("close");
        }
    }
}).end().centerFixed();

<div class="hidden" id="dialog-areyousuremodal" title="Delete Confirmation">
    <p>Are you sure you want to delete this row?</p>
</div>

And I have created a custom function that extends jquery like this:

(function($){
    $.fn.extend({
        centerFixed: function () {
            return this.each(function() {
            $(this).end();
            $(this).css({position:"fixed"});
            $(this).css("top", (($(window).height() - $(this).outerHeight()) / 2) + "px");
            $(this).css("left", (($(window).width() - $(this).outerWidth()) / 2) + "px");
            });
        }
    });
})(jQuery);

My goal is to replace .end().centerFixed(); with just .centerFixed();. As you can see I tried putting .end() inside the custom function but that does not work. I’m tried to avoid having to put .end() at the end of the dialog or .centerFixed() on a new line.

Any thoughts on the matter?

Answer 1

You simply can’t I’m afraid, when centerFixed() is called it has no concept of the chain of functions that it has been called at the end of. All it knows about is this, which is whatever object is returned from the function called in the previous chain method.

Since you’re chaining it at the end of a call to dialog(), inside centerFixed the variable this will be whatever object is the result of that call to dialog() (which I think is the UI dialog object).

If you want to ensure your code is only run when the dialog is created, the preferred way to do it would be using the plugin’s create event