Calling database using jQuery AJAX and ASP.NET

AJAX offers users a seamless way to work with your interface, no waiting for whole pages to load. jQuery has a set of tools to make it super simple to implement. We will walk you through how to use jQuery to communicate databse using jquery’s ajax method in asp.net.

Each example will feature the same requirement, and that is to obtain and display the Customer details relating to a specific CustomerID selected from a DropDownList on a page called Customer.aspx.

Continue reading

jQuery Cookie Example

In this article I will show you how to set, Get, delete and edit cookie with jQuery.
First of all we need jQuery library (jquery-1.3.2.min.js) or any latest version and jQuery Cookie plugin (jquery.cookie.js) which you can download from here
Set Cookie

Get value of Cookie

delete Cookie:

Additionally, to set a timeout of a certain number of days (10 here) on the cookie:

Note: If the expires option is omitted, then the cookie becomes a session cookie, and is deleted when the browser exits.

To cover all the options:

Demo

Code:

Thanks.

Display Notification Messages using jQuery

In this article, I am going to show you how to display notification messages in Webpage. Toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. It’s a quite nice way to report info or error or warning to the user.

Demo

Demo


The plugin is entirely customizable. So you can change the positioning, the required user action, the style and so on.

Installation
The plugin is download from here .

jquery.toastmessage.js        -- the plugin
css/jquery.toastmessage.css   -- the css file
images/error.png              -- image
images/close.gif              -- image
images/notice.png             -- image
images/success.png            -- image
images/warning.png            -- image

Types of messages
4 different types message you can use. Each type comes with its own icon and colored border. The types are:

  • notice
  • success
  • warning
  • error

Easy to use
The following methods will display a toast message:

$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', 'some message here');
$().toastmessage('showWarningToast', 'some message here');
$().toastmessage('showErrorToast', 'some message here');

You can alter the configuration to your special use case.

// user configuration of all toastmessages to come:
$().toastmessage({
    text     : 'Ashish Blog',     // content of the item
    sticky   : true,               // should the toast item sticky or not?
    position : 'top-right',       // top-left, top-center, top-right, middle-left, middle-center, middle-right
                                      // Position of the toast container holding different toast.
                                      // Position can be set only once at the very first call,
                                     // changing the position after the first call does nothing
    type     : 'success',        // notice, warning, error, success
    close    : function () {console.log('toast is closed ...');}
});

Here is example of all type of message code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ashish's Blog</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.toastmessage.js" type="text/javascript"></script>
    <link href="jquery.toastmessage.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        function showSuccessToast() {
            $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
        }
        function showStickySuccessToast() {
            $().toastmessage('showToast', {
                text: 'Success Dialog which is sticky',
                sticky: true,
                position: 'top-right',
                type: 'success',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });

        }
        function showNoticeToast() {
            $().toastmessage('showNoticeToast', "Notice  Dialog which is fading away ...");
        }
        function showStickyNoticeToast() {
            $().toastmessage('showToast', {
                text: 'Notice Dialog which is sticky',
                sticky: true,
                position: 'top-left',
                type: 'notice',
                closeText: '',
                close: function () { console.log("toast is closed ..."); }
            });
        }
        function showWarningToast() {
            $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
        }
        function showStickyWarningToast() {
            $().toastmessage('showToast', {
                text: 'Warning Dialog which is sticky',
                sticky: true,
                position: 'middle-right',
                type: 'warning',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });
        }
        function showErrorToast() {
            $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
        }
        function showStickyErrorToast() {
            $().toastmessage('showToast', {
                text: 'Error Dialog which is sticky',
                sticky: true,
                position: 'center',
                type: 'error',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });
        }
 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    <p>
            <span class="description">Show a success toast</span> <a href="javascript:showSuccessToast();">not
            sticky</a>|<a href="javascript:showStickySuccessToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a notice toast</span> <a href="javascript:showNoticeToast();">not sticky</a>|<a
                href="javascript:showStickyNoticeToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a warning toast</span> <a href="javascript:showWarningToast();">not
            sticky</a>|<a href="javascript:showStickyWarningToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a error toast</span> <a href="javascript:showErrorToast();">not sticky</a>|<a
                href="javascript:showStickyErrorToast();">sticky</a>
        </p>
 
    </div>
    </form>
</body>
</html>

Thanks.

Disable Cut, Copy and Paste function for textbox using jQuery

All you need is to bind cut, copy and paste function to Textbox and stop the current action. See below code.

$(document).ready(function(){
  $('#txtInput').live("cut copy paste",function(e) {
      e.preventDefault();
  });
});

You can also use bind function to bind these events. Read more about bind() method here.

$(document).ready(function(){
  $('#txtInput').bind("cut copy paste",function(e) {
      e.preventDefault();
  });
});

Thanks