Difference Between document.ready and window.load in Jquery

In this article, we will discuss what is the difference between document.ready and window.load in Jquery. 

$(document).ready(function() {

 // executes when HTML-Document is loaded and DOM is ready

 alert("document is ready");

});

$(window).load(function() {

 // executes when complete page is fully loaded, including all frames, objects and images

 alert("window is loaded");

});

So if we Use both $(document).ready and as well as $(window).load in a page then First $(document).ready will load and after that $(window).load will load.

So based on the requirement of the page if we want to load anything after page is fully loaded then at that time we should use $(window).load otherwise will use $(document).ready.

Read More

Get Browser Name and OS Name using Jquery.

This article tells about whenever we browse any kind of page then in the page itself we can find out Browser name and OS name of Users using Jquery.

Well to get the Browser Name and OS Name we will use some plugin which is already present in GitHub and for more information you can follow this link: https://github.com/Pagawa/PgwBrowser

At First take a page, and include Jquery in head section of that page because as we are using Jquery so compulsory we need to include Jquery as a reference otherwise it will show you an error like, "Uncaught ReferenceError: $ is not defined".

After that download pgwbrowser.min.js or pgwbrowser.js file from this github link : https://github.com/Pagawa/PgwBrowser and also you need to add pgwbrowser.min.js or pgwbrowser.js file in your Page as a reference.

After that we will write some code in Jquery which is as follows,

 <script type="text/javascript">
        $(document).ready(function () {            
            var pgwBrowser = $.pgwBrowser();
            var browsername = pgwBrowser.browser.name;
            var osname=pgwBrowser.os.name;
        });
 </script>

Here you can get the BrowserName and OSName but if you want more information of browser like version etc then please see the below image and you can implement the same in your code also.

Read More

Jquery DataTable With Example

In my programming life, i went through many Grid like asp:GridView,telerik radGrid etc but when i see this Jquery Datatable i really liked a lot. In this article i will explain about Jquery DataTable With Simple example.

For more Information about Jquery DataTable you can reach to this link:- https://datatables.net/

To implement this DataTable we don't need to write much code as compared to other Grid like asp:Gridview and telerik radgrid.

First of all take a aspx page and include these changes in your page.

Before we start we need to include some js and css files which is as below in your head section,

    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />

Here i added the bootstarp.css from my Content Folder and in place of that you can use cdn also.

Now, After that Create a WebMethod and Write your code means Business logic where we can retrieve some data from database which is like this,

        [WebMethod]
        public static string GetAllPositions()
        {
            DataTable dt=jobs.GetAll();
            return Newtonsoft.Json.JsonConvert.SerializeObject(dt);
        }

Here you can use any service or any api to retrieve the data. The above method i wrote inside my .aspx.cs page.

After that goto your aspx page and in the body tag create a table like this,

   <table id="positionsTable" class="table table-responsive table-hover">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Company</th>
                    </tr>
                </thead>
            </table>

Here i used only two th as Title and Company because i want to display only 2 columns in my Grid. If someone need some more columns then they can add easily.

After that we need to add some jquery code and after that the grid will load and the code is like as below,

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "dtTest.aspx/GetAllPositions",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var jsdata = JSON.parse(data.d);
                    var datatableVariable = $('#positionsTable').DataTable({
                        data: jsdata,
                        "bProcessing": true,
                        columns: [
                            { 'data': 'Title' },
                            { 'data': 'Company' }
                        ]
                    });
                },
                error: function (data) {
                    alert("Error");
                }
            });

        });
    </script>

Here in the above code i am using ajax call to get all the data in my success function and after that i converted into json format and binded all the json data to DataTable and there also we need to bind the columns and after that my grid will show.

One more thing i want to mention here is that by using jquery.dataTables we can Search,Sort and Paging will work fine. But one more thing i want to highlight here is that by using jquery.dataTables we can perform each and every operation without PostBack to Server where as if we use asp:GridView or telrik:radgrid the compulsory postback will occur.

Read More