jQuery Plugin to Register a Function to Run on UpdatePanel Request

Short post, long title. Here is a simple jQuery plugin that makes it a little easier to add an begin/end request handler to the PageRequestManager on an ASP.NET web form.

(function ($, undefined) {
    $.registerAsyncBegin = function(callback) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm) {
            prm.add_beginRequest(callback);
        }
        return callback;
    };
    $.registerAsyncEnd = function(callback) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm) {
            prm.add_endRequest(callback);
        }
        return callback;
    };
})(jQuery);

This example adds a function to be executed after ever Update Panel request and runs the function. This is useful if you have a function that needs to do some initial processing as well as after a request.

($.registerAsyncEnd(SomeCallbackFunction))();

Add Git Bash Option to Context Menu

I found a nice article, Adding “Open in Git Bash” to the Context Menu, which gives describes the process for adding the Git Bash command to the context menu. I am not a fan of requiring a batch file, we should be able to do it without the batch file.

This is set up for the 32-bit Git install. Here is the command that we can use to not use the batch files.

"cmd.exe /c \"cd \\\"%V\\\" && \"C:\\Program Files (x86)\\Git\\bin\\sh.exe\" --login -i\""

If you want to use a different icon, use regedit.exe and navigate to Directory\shell right-click and click "new" and then "expandable string value". Name the new string "Icon" and then set the value to be the location of the icon to use. Export that key and copy the "Icon" entry and past into the appropriate locations below, then delete the "Icon" string that was just created. For a good write-up on this, check out this tutorial http://www.sevenforums.com/tutorials/21878-context-menu-add-shortcuts-icons.html.

Here is my solution:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Classes\Directory]

[HKEY_CURRENT_USER\Software\Classes\Directory\Background]

[HKEY_CURRENT_USER\Software\Classes\Directory\Background\shell]

[HKEY_CURRENT_USER\Software\Classes\Directory\Background\shell\bash]
@="Open in Git &Bash"

[HKEY_CURRENT_USER\Software\Classes\Directory\Background\shell\bash\command]
@="cmd.exe /c \"cd \"%V\" && \"C:\\Program Files (x86)\\Git\\bin\\sh.exe\" --login -i\""
"Icon"=hex(2):43,00,3a,00,5c,00,50,00,72,00,6f,00,67,00,72,00,61,00,6d,00,20,\
  00,46,00,69,00,6c,00,65,00,73,00,20,00,28,00,78,00,38,00,36,00,29,00,5c,00,\
  47,00,69,00,74,00,5c,00,65,00,74,00,63,00,5c,00,67,00,69,00,74,00,2e,00,69,\
  00,63,00,6f,00,00,00

[HKEY_CURRENT_USER\Software\Classes\Directory\shell]

[HKEY_CURRENT_USER\Software\Classes\Directory\shell\bash]
@="Open in Git &Bash"

[HKEY_CURRENT_USER\Software\Classes\Directory\shell\bash\command]
@="cmd.exe /c \"cd \"%V\" && \"C:\\Program Files (x86)\\Git\\bin\\sh.exe\" --login -i\""
"Icon"=hex(2):43,00,3a,00,5c,00,50,00,72,00,6f,00,67,00,72,00,61,00,6d,00,20,\
  00,46,00,69,00,6c,00,65,00,73,00,20,00,28,00,78,00,38,00,36,00,29,00,5c,00,\
  47,00,69,00,74,00,5c,00,65,00,74,00,63,00,5c,00,67,00,69,00,74,00,2e,00,69,\
  00,63,00,6f,00,00,00

I have not figured out how to set the icon on the CMD window to the git icon instead of the basic CMD icon. It is not that important, it works without it. Perhaps one day.

Javascript Fix Up For Internet Explorer Select Options Truncation

OK, that is a long title, but the issue has real world implications. Since there are still requirements that require support for Internet Explorer 8, it would behoove me to have an elegant pattern that fixes the limitations of IE8 and enhances the user experience.

My initial pass is adapted from http://css-tricks.com/select-cuts-off-options-in-ie-fix/. I found it some what long winded and only solved part of the problem.

function dropDownListFixup(sender, args) {
    var el,
        ua = $.browser,
        up = (sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null,
        selects = $("select", up);
    if (ua.msie && Number(ua.version) < 9) {
        selects
            .each(function () {
                el = $(this);
                el.data("oWidth", el.outerWidth());
            })
            .mouseenter(function () {
                $(this).css("width", "auto");
            })
            .bind("blur change", function () {
                el = $(this);
                el.css("width", el.data("oWidth"));
            });
    }
    selects.each(function (e) {
        this.title = $(":selected", $(this)).text();
    });
}

$(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(dropDownListFixup);
    dropDownListFixup();
    $("body").delegate("select", "change", function (e) { 
        this.title = $(":selected", $(this)).text();
    });
});

After some refactoring and extending, I came up with a solution that is slightly more compact, but provides slightly more functionality and handles drop down lists in update panels. Since even if the drop downs are in modern browsers, the text may be truncated on the closed display if the width is set too small. To fix this issue, I set the title on the drop down so that if the user hovers over the control, the tool tip will display with the value.

// Adapted from: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
function dropDownListSetTitles(sender, args, e) {
    var selects = $("select", ((sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null));
    selects.each(function (e) {
        var el = $(this);
        el.data("oWidth", el.outerWidth());
        setDropDownListTitle.apply(this, [e]);
    });
}
function setDropDownListTitle(e) {
    this.title = $(":selected", $(this)).text();
}
$(function () { // dropDownListFixup
    dropDownListSetTitles();
    if ($.browser.msie && Number($.browser.version) < 9) { //// mouseenter  mouseleave
        $("body").delegate("select", "focus", function () {
            $(this).css("width", "auto");
        })
        .delegate("select", "blur change", function () {
            var el = $(this);
            el.css("width", el.data("oWidth"));
        });
    }
    $("body").delegate("select", "change", setDropDownListTitle);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dropDownListSetTitles);
});