JavaScript closure explained

Closures are a way to let a function have persistent, private variables – that is, variables that only one function knows about, where it can keep track of info from previous times.It is an inner function that has access to outer function variables and parameters in addition to its own variables in its scope. In simple words, it is a function inside another function. These functions could be named functions or Anonymous.
Here is a sample closure:
Think about a scenario where we need to keep track of the mouse click happened in a session on a page:

<script type="text/javascript">
    var incrementClickCount = (function () {
        var clickCount = 0;
        return function () {
            return ++clickCount;
        }
    })()
</script>
<input type="button" value="Click Me" onclick="alert(incrementClickCount());" />
Advertisements

Ajax with JQuery: 200 ok, but not “success”

Scenario: Ajax request always return 200 OK but error event is fired instead of success. In this scenario We have a code that returns exception from controller/code behind and UI Ajax call has to handles those exception.When you specify: dataType: ‘json’, jQuery will fire the error event if the response cannot be parsed as JSON, even if server returns 200 OK. Check the data returned from the server and make sure it is valid JSON (try JSONLint service).If the returned data is not JSON or it has syntax errors then fix them in your server side code. You can just return {} from the server side script. The best shot will be wrap the response object with the status and error code/message and handle it at UI layer for example duplicate record or invalid file type etc.

var URL = 'https://ajax.googleapis.com/ReviewUploadfiles;
$.ajax({
    type: 'GET',
    url: URL,
    dataType: 'json',
    success: function( data, status ){
      if (data.responseData != null && data.responseData.Success) {
      alert(' File Uploaded!' );
}
else{
     alert(data.result.Errormessage);
}
    },
    error: function() {
        alert( 'Something goes wrong!' );
    }
});

Load local JSON data in jQgrid

$(document).ready(function () {
    'use strict';
    var data = {
            "page": "1",
            "records": "3",
            "rows": [
                { "id": "NY001", Name: "Jijo", "Email": "vg@gmail.com" },
                { "id": "NY001", Name: "Raj", "Email": "raj@gmail.com" },
                { "id": "NY003", Name: "Ginsha", "Email": "gin@gmail.com" }
            ]
        },
        grid = $("#grdEmail");

    grid.jqGrid({
        colModel: [
            { name: 'Name', index: 'Name', width: "110" },
            { name: 'Email', index: 'Email', width: "300" }
        ],
        pager: '#grdEmail',
        datatype: "jsonstring",
        datastr: data,
        jsonReader: { repeatitems: false },
        rowNum: 2,
        viewrecords: true,
        caption: "Packages",
        height: "auto",
        ignoreCase: true
    });
});

jQuery dialog resize event

The dialog is a special type of window, which can has a toolbar on top and a button bar on bottom. The dialog has only one close tool display on top right of header by default. Users can configure dialog behaviors to display other tools such as collapsible, minimizable, maximizable tool, etc.
I have a requiremnt in my project to providethe resizing option for the dialogbox. Pasting the code here
Dialogs Extend from $.fn.window.defaults. Override defaults with $.fn.dialog.defaults.

    function LoadIDTMeetingSummariesPopup() {
        $('#MeetingsSummariesDlg').dialog(
                            {
                                title: "Meeting Summaries",
                                resizable: true,
                                modal: false,
                                draggable: true,
                                height: 'auto',
                                width: 'auto',

                            });
    } 
    $('#MeetingsSummariesDlg').bind("dialogresize", function(event, ui) {
        $('#MeetingsSummariesDlg #resizeToParent').css('height',  ($('#MeetingsSummariesDlg').height() - 40) + 'px');
        $("#gridIdtMeetingsSummaries").setGridWidth($('#MeetingsSummariesDlg').width() - 40);
        $("#gridIdtMeetingsSummaries").setGridHeight($('#MeetingsSummariesDlg').height() - 120);//div has a JQGrid and I am resizing them
    });