get selected dropdown value using jquery

                Please Select One                Semi-Weekly                Monthly                Quarterly            

$('#ddlSDIDepositSchedule').change(function () {
    alert($("#ddlSDIDepositSchedule").val());
});

http://jsfiddle.net/rahularyansharma/KSwcd/ 

how to make collapsable region in js file

http://blog.devarchive.net/2008/04/using-region-directive-with-javascript.html


http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed?SRC=VSIDE



http://visualstudiogallery.msdn.microsoft.com/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06

nesting of computed properties in knockoutjs

I am trying to use one computed properties into another computed properties which use toUpperCase function to show string in UPPERCASE .


so here is my HTML

<p><input data-bind="value: firstName"></p>

<p><input data-bind="value: lastName"></p>

<p><input data-bind="value: fullName"></p>

<p> <span data-bind="text: upperFullName"> </span> </p>

And ViewModel is as follow : 

 function AppViewModel() {

    var self = this; 
    self.firstName = ko.observable('rahul');
    self.lastName = ko.observable('sharma');
    self.fullName = ko.computed(function() {
      return self.firstName() +' ' + self.lastName();
    });
    self.upperFullName = ko.computed(function() {
      return self.fullName().toUpperCase();
    });  
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

JS FIDDLE LINK 

simple example of computed properties in knockoutjs

Here is html for binding of computed properties 

<p><input data-bind="value: firstValue"></p>

<p><input data-bind="value: secondValue"></p>

<p><input data-bind="value: addValue"></p>

 and out model , we are using here in our model computed properties of knockout js which will be always reacts to change in the properties on the basis of this property is computed. so any change in firstValue or secondValue will also change the result of addValue computed properties. 

function AppViewModel() {
    var self = this; 
    self.firstValue = ko.observable(6);
    self.secondValue = ko.observable(5);
    self.addValue = ko.computed(function() {
      return parseInt(self.firstValue()) + parseInt (self.secondValue());
    });
}

// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

and here is js fiddle link 

simple example of how can you use observable to bind html text

Here is code for your html part

First name:

Last name:

this is for your ViewModel which you can use . The noticeable part here is i have used observable instead of using just plain JavaScript strings . so now when any changes made to those properties , changes will also refelect in your model . 

function AppViewModel() {
    this.firstName = ko.observable("Rahul");
    this.lastName = ko.observable("Sharma");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

Here is output window screen and link of js fiddle 

simple example of knockoutjs of data binding

   

This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

function AppViewModel() {
    this.firstName = "Rahul";
    this.lastName = "Sharma";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

and here is your output screen and link of js fiddle 

Show nice css jquery notification when data is saved using ajax

 showNotification("Success!", "Deduction Detail Saved !", "notice", "br");

// displays Growl notifications
function showNotification(title, msg, type, location) {
    switch (type) {
        case "error":
            $.growl.error({ title: title, message: msg, location: location });
            break;
        case "notice":
            $.growl.notice({ title: title, message: msg, location: location });
            break;
        case "warning":
            $.growl.warning({ title: title, message: msg, location: location });
            break;
        default:
            $.growl.notice({ title: title, message: msg, location: location });
            break;
    }
} 

You also need to reference jQuery Growl jQuery and Growl CSS in your js section .

You can in your ajax call as following  :

$.ajax("yourpagename.aspx/webmethodname", {
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ objDeduction: deductionPageState }),
            dataType: 'json'
        })
        .done(function(data) {
            if (data.d) {
                clearDeductionPage();
                hideLoader();
                showNotification("Success!", "Deduction Detail Saved !", "notice", "br");
                callback(data);
            } else {
                    getRecentErrors(function(data) {
                    hideLoader();
                    showNotification("Error!", "Error in Saving Deduction Details !\n" + data.d.Message, "error", "br");
                });
            }
        })
        .fail(function(xhr, err, msg) {
            hideLoader();
            handleError(xhr, err, msg);
        });