Thursday, January 27, 2011

How to make enter key to cause postback in asp.net webform textbox by JQuery

How to make enter key to cause postback in asp.net webform textbox by JQuery

Need call doPostBack in asp.net webforms.
$('#<%=TextBox.ClientID %>').keypress(function (event) {
if (event.which == '13') {
__doPostBack('<%= TextBox.ClientID%>', '');
}
});

How to implement timer event handler in Javascript?

window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }

How to implement TextChanged event handler in JQuery

There is no TextChanged Textbox event handler in Javascript.
Following event handler can handle: Keyup, Copy, Paste and Cut


(function (a) {
    a.event.special.textchange = {
        setup: function () {
            a(this).data("lastValue", this.contentEditable === "true" ? a(this).html() : a(this).val());
            a(this).bind("keyup.textchange", a.event.special.textchange.handler);
            a(this).bind("cut.textchange paste.textchange input.textchange", a.event.special.textchange.delayedHandler)
        },
        teardown: function () {
            a(this).unbind(".textchange")
        },
        handler: function () {
            a.event.special.textchange.triggerIfChanged(a(this))
        },
        delayedHandler: function () {
            var b = a(this);
            setTimeout(function () {
                a.event.special.textchange.triggerIfChanged(b)
            },
            25)
        },
        triggerIfChanged: function (b) {
            var c = b[0].contentEditable === "true" ? b.html() : b.val();
            if (c !== b.data("lastValue")) {
                b.trigger("textchange", b.data("lastValue"));
                b.data("lastValue", c)
            }
        }
    };
    a.event.special.hastext = {
        setup: function () {
            a(this).bind("textchange", a.event.special.hastext.handler)
        },
        teardown: function () {
            a(this).unbind("textchange", a.event.special.hastext.handler)
        },
        handler: function (b, c) {
            c === "" && c !== a(this).val() && a(this).trigger("hastext")
        }
    };
    a.event.special.notext = {
        setup: function () {
            a(this).bind("textchange",
            a.event.special.notext.handler)
        },
        teardown: function () {
            a(this).unbind("textchange", a.event.special.notext.handler)
        },
        handler: function (b, c) {
            a(this).val() === "" && a(this).val() !== c && a(this).trigger("notext")
        }
    }
})(jQuery);
  



Usage:




    $("#textboxid").bind('textchange', function (event, previousText) {

        var textboxContent = $("#textboxid").val();

        if (textboxContent == "" || textboxContent == "default value") {

            $("#buttonid").addClass('disabled').attr('disabled', true);

        } else {

            $("#buttonid").addClass('disabled').attr('disabled', false);

        }

    });





Reference:


http://www.zurb.com/playground/jquery-text-change-custom-event

Wednesday, January 26, 2011

A forum open source project by asp.net MVC3, POP forum

Source code:
http://popforums.codeplex.com/

Article:
http://weblogs.asp.net/jeff/archive/2011/01/24/the-mvc3-special-sauce-in-pop-forums.aspx

How to get and set coordinate for html element by JQuery offset()

How to get and set coordinate for html element by JQuery offset()
Codes example:
Get
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>


Set:
<script>$("p:last").offset({ top: 10, left: 30 });</script>


Reference: