Utility function to make an array observable in knockoutjs

Suppose we have an array

var employees = [
    { EmployeeID: 1, EmployeeName: "Naveen" },
    { EmployeeID: 2, EmployeeName: "Shebin" }
];

We can make it an observable array by calling it like this

var observableEmployees = ko.observableArray( employees );

But as per knockoutjs documentation,

Simply putting an object into an observableArray doesn’t make all of that object’s properties themselves observable. Of course, you can make those properties observable if you wish, but that’s an independent choice. An observableArray just tracks which objects it holds, and notifies listeners when objects are added or removed.

 This means that any change in array will be remembered. ie, adding and removing elements in an array is observed. But changes to properties are not remembered. That is if employee[0].EmployeeName is changed to Noah, it wont be remembered. To do that we have to make each property ko.observable. Here is a small utility function to do so.

function MakeArrayKoObservableObjectArray(arr) {
    var observableArr = [];
    for (var i = 0; i < arr.length; i++) {
        var observableObj = {}, obj = arr[i];
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                observableObj[prop] = ko.observable(obj[prop]);
            }
        }
        observableArr.push(observableObj);
    }
    return observableArr;
}

Now we can call it like this.

employees = MakeArrayKoObservableObjectArray( employees  );
var observableEmployees = ko.observableArray( employees );

Happy Coding!

Read more...

Remote validation using jQuery Validate

This is how jQuery validate is done in ASP.NET MVC

Markup

<form id="manager-form" action="">
    <p>
        <label style="display:inline-block; width: 200px;">Manager Name</label>
        <input type="text" id="Manager" name="Manager" />
    </p>
    <p>
        <input type="submit" id="saveManager" class="btn btn-primary" value="Save Sales Person" />
    </p>
</form>

JavaScript

    function SetValidationRules(){
        $("#manager-form").validate({
            onkeyup: false,
            rules: {
                Manager: {
                    required: true,
                    minlength: 3,
                    remote: {
                        url: '/Manager/IsManagerNameTaken',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            managerName: function () {
                                return $('#Manager').val();
                            }
                        }
                    }
                }
            },
            messages: {
                Manager: {
                    required: "Manager name is required.",
                    minlength: "Manager name should be 3 atleast characters."
                }
            }
        });
    }

Controller

    public ActionResult IsManagerNameTaken(string managerName)
    {
        var result = ManagerRepository.IsManagerNameTaken(managerName) ?
            "Manager name is already taken. Try another!" : "";
        return Json(result);
    }

Thats all to it. Happy coding!

Read more...

Overriding jQuery ajaxStart and ajaxStop locally

While performing ajax calls, I use to provide provide visual indicators for better user experience.
My preferred method is showing a modal at jQuery.ajaxStart which gets hidden at jQuery.ajaxStop

The code goes like this

    $(document).on("ajaxStart", function () {
        $("#jQueryAjaxmodal").modal("show");
    }).on("ajaxStop", function () {
        $("#jQueryAjaxmodal").modal("hide");
    });

But this causes problem when one uses something like jQuery.autocomplete as ajaxStart fires on every keyup. To override this for a particular page, do this

1. Namespace the ajaxStart and ajaxStop like this

    $(document).on("ajaxStart.myblock", function () {
        $("#jQueryAjaxmodal").modal("show");
    }).on("ajaxStop.myblock", function () {
        $("#jQueryAjaxmodal").modal("hide");
    });

2. Now on the DOM Ready of the page on which you wanna override this behaviour, unbind it

    $(document).on("ready", function () {
        $(document).off(".myblock");
    });

Courtesy: jQuery should I use multiple ajaxStart/ajaxStop handling

Read more...