Tuesday, April 29, 2014

jquery close navigation submenu when click away

$(document).ready(function () {
    $(".navbar-sub-opener").click(function (evt) {
        //close submenu when click away - part 2
        evt.stopPropagation();
        //hide all submenus
        $(".navbar-sub").hide();
        //only open the one that's immediate inside the clicked parent menu item
        $(this).next($(".navbar-sub")).show();
    });

    //close submenu when click away - part 1
    $('html').click(function () {
        $(".navbar-sub").hide();
    });
});

Thursday, April 10, 2014

jquery center div


jQuery.fn.center = function () {
    this.css("position", "fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

Wednesday, April 02, 2014

mvc partial view popup dialog form

required javascript:

$(document).ready(function () {
    $(".popupformContainer").dialog({
        height: 600,
        width: 300,
        autoOpen: false,
        modal: true,
        open: function (event, ui) {
            $(this).load("/controllername/actionname", { "parameter": $(this).data("parametervalue") }, function (html) {
            });
        },
        close: function (event, ui) {
            event.preventDefault();
            alert("closing");
        },
        buttons: {
            text: "提交", click: function (event) {
                event.preventDefault();
                $.validator.unobtrusive.parse("#PopupForm");
                $("#PopupForm").validate();
                if ($("#PopupForm").valid()) {
                    $("#PopupForm").submit();
                }
                else {
                    event.preventDefault();
                    alert("invalid");
                }
            }
        }
    });

    $(".btnOpenPopupForm").click(function () {
        $(".popupformContainer").data("parameter", $(this).attr("value")).dialog("open");
    });


});
in the parent view you need the button to open popup with class "btnOpenPopupForm" and an empty div with class "popupformContainer" for hosting the popup
in the partial view for the popup all you need is the form and all the form elements, the buttons are automatically generated unless you want some custom buttons