Thursday, 6 February 2014

How to do partial page updates using Jquery and Ajax?

Description:
In this article, I will explain how to do partial page refresh using Jquery.

It’s very easy to update a particular part of the webpage using jquery.

In some situation, for every minute webpage needs to be updated means, refreshing the whole page for every minute will be irritated for the users.

For this scenario, we can use Ajax.

Using Ajax, the page will not refresh while updating content.

Ajax allows you to load data in the background and updates on the webpage without refreshing the page.

The user can continue to interact with the web page while the page requests information from the server with Ajax in the background.

 Ajax used to create fast and dynamic web pages.

Example Program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
                $.ajax({
                    type: "POST",
                    url: "PartialRefresh.aspx/GetRndomData",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function successcall(response) {
                        $('#txtRandom').val(response.d);
                    }
                });
            }, 3000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MainDiv">
        <img alt="Content" src="Winter.jpg" style="height: 140px; width: 433px" />
        <div id="PartialLoadDiv" style="background-color:Gray";>
            <table style="height: 117px; width: 241px">
                <tr>
                    <h3>
                        This div will partialy update</h3>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblRandom" runat="server" Text="Random Data is:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtRandom" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Code Behind:

[System.Web.Services.WebMethod]
public static string GetRndomData()
{
Random obj = new Random();
      int rndValues = obj.Next(0, 25);
       return rndValues.ToString();
}


In the above example, the page will updates particular part for every three seconds. The page will not refresh while updating content.
at No comments:

How to add multiple version of jquery on the same page?

Introduction:

In this article, I will explain how to add multiple version of jquery on the same page.

If you are working on a website that already used an older version of jquery and now you want to use newer version. This time upgrading is not an option here. For this scenario use $.conflict() method.

In jQuery, the ‘$’ sign is just an alias to jquery ()

$.fn.jquery – it will return the jquery file version.

Here, I am using two version of jquery(version 1.3.0 and version 1.10.2).
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

Before we using conflict() method,

$ - it will have the version of last included jquery file. (Version 1.10.2)

$('#btnBrowserVersion').click(function () {
    alert($.fn.jquery);
});

The above code will return version 1.10.2. Because last included ‘js’ file will be assign for the alias name ‘$’

After we using conflict() method, $ sign will be replaced with first included js file.

$('#btnAfterConflict').click(function () {
    jq = $.noConflict();
    alert($.fn.jquery);
});

The above code will return version 1.3.0.  Because, After using conflict() method, first included js file will replace with the alias name ‘$’.

After conflict, if we want to use other version use the alias name ‘jq’ from the above coding.
   
Example Program:

<html>
<head>
    <title>Multiple Version of Jquery on Same Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnBeforeConflict').click(function () {
                alert($.browser.version);
                return false;
            });
            $('#btnAfterConflict').click(function () {
                jq = $.noConflict();
                alert($.browser.version);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="DivArea">
        <asp:Button ID="btnBeforeConflict" runat="server" Text="Before Conflict()" />
        <asp:Button ID="btnAfterConflict" runat="server" Text="After Conflict()" />
    </div>
    </form>
</body>
</html>

$.browser property is removed in version Jquery 1.10.2. But we can use the property in jquery 1.3.0.

In our scenario, we are updating our webpage with latest jquery version. We need an old version also. For this, we are using conflict() method.


In the above example, first click event will not work. It will throw an error. Because, $.browser property is removed in version 1.10.2. Next click event will work with conflict() method. Because, $.browser property called from the version 1.3.0.
at No comments:

Wednesday, 5 February 2014

How to go back to previous page using Jquery?

Description:

In this article, I will explain how to go back to previous page using Jquery. 

History object is used to contain the Url visited by the user.

History.back() method is used to navigate to the previous Url from the browser history.

History.forward() method is used to navigate to the next page from the browser history.

Example Program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnPrevPage').click(function () {
                history.back();
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnPrevPage" runat="server" Text="Go back" />
    </div>
    </form>
</body>
</html>

In the above example, I am navigating to previous url on click event.


Back to previous page with jquery, Return to previous page using Jquery, History.back method using Jquery, back to the previous page using Jquery, Jquery return to previous page, Browser back button navigation, How to get previous page using Jquery
at No comments:

How to scroll smoothly to specific position using Jquery?

In this article, I will explain how to scroll to particular position using Jquery. 

Description:

Jquery introduced the concept of smooth scrolling and it became very popular day by day that lot of websites is using it.

Scrolling creates better effects to the visitors.

If we click on a link, the page smoothly scrolls down to a specific section of content.

Smooth scrolling reduces efforts of visitors to scroll up to a specific area of page, rather than doing this if we just click on a link jquery will take care where the user wants to land.

The Jquery function scrollTop() used to animate the page and scroll up or down to the specific location.

If we want to scroll to the top of the page, we can use the following code

$("html, body").animate({ scrollTop: 0 }, 4000);

If we want to scroll to the bottom of the page, we can use the following code

$("html, body").animate({ scrollTop: $(document).height() }, 4000);

If we want to scroll to the particular section of the page, we can use the following code

$('html, body').animate({scrollTop: $(divID).offset().top }, 3000);

Example Program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Smooth Scrolling Div using Jquery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#DivOne').click(function () {
                var divID = '#FirstDiv';
                $('html, body').animate({
                    scrollTop: $(divID).offset().top
                }, 3000);
            });
            $('#DivTwo').click(function () {
                var divID = '#SecondDiv';
                $('html, body').animate({
                    scrollTop: $(divID).offset().top
                }, 3000);
            });
            $('#DivThree').click(function () {
                var divID = '#ThirdDiv';
                $('html, body').animate({
                    scrollTop: $(divID).offset().top
                }, 3000);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#" id="DivOne">Go to Div One</a> 
        <a href="#" id="DivTwo">Go to Div Two</a>
        <a href="#" id="DivThree">Go to Div Three</a>
        <div id="FirstDiv">
            <h1>
                First Div</h1>
            Add some Sample Paragraph here
            <br />
        </div>
        <div id="SecondDiv">
            <h1>
                Second Div</h1>
            Add some Sample Paragraph here
            <br />
        </div>
        <div id="ThirdDiv">
            <h1>
                Third Div</h1>
            Add some Sample Paragraph here
            <br />
        </div>
    </div>
    </form>
</body>
</html>


From the above example, we can smoothly scroll to particular div based on the link click event.
at No comments: