How to do Encryption and Decryption using JQuery Plugin?

Introduction: 

Most of the times, we have give encrypt and decrypt our security in the browser operation.

Description: 

In the privous example, we have seen how to create anchor tag dynamically.  

In this JQuery example i am going to explain how to do encrypt and decrypt our security data and how to disable and enable button using JQuery.

Here we using third party plug-in for doing encryption and decryption operations.

Code: 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

<script>
$(document).ready(function(){
 $('#btnDecryption').attr('disabled','disabled');
 
 $('#btnEncryption').click(function(){
  var encryptionText=$('#txtEncryption').val();
  $('#EncryptionText').text(CryptoJS.AES.encrypt(encryptionText, "/"));
  $('#btnDecryption').removeAttr('disabled');
 });
 
 $('#btnDecryption').click(function(){
  var decryptionText=$('span#EncryptionText').text();
  $('#DecryptionText').text((CryptoJS.AES.decrypt(decryptionText, "/")).toString(CryptoJS.enc.Utf8));
  
 });
});
</script>
</head>
<body>
<b>Welcome to JQueryExampleCode.blogspot.com</b>
<br /><br />
<input type="text" id="txtEncryption" />
<br />
<input type="button" id="btnEncryption" value="Encrypt" />
<br />
<b>Encryption Text:</b> <span id="EncryptionText"> </span> <br />
<input type="button" id="btnDecryption" value="Decrypt" />
<br />
<b>Decryption Text:</b><span id="DecryptionText" style="background-color:yellow"> </span> <br>
</body>
</html>

Video Tutorial: 

Output: 

Read more

How to do Check box check event dynamically?

Some times we may have some values are attaching to the checkbox ids, like example below. Using $("[Id*='isAccommadation']") code we can get selected checkbox value and we can do the event operations.

This is not limited to check box. This will applicable for all HTML elements.

<!DOCTYPE html>

<html>

<head>

    <title></title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script language="javascript">

        $(document).ready(function() {



            $("[Id*='isAccommadation']").bind("click", function () {

                alert(this.value);

            });



        });

    </script>

</head>

    <body>

        <div id="hai">



        <input type='checkbox' name="1" id='isAccommadation_1' value="JQuery" />JQuery<br/>

        <input type='checkbox' name="2" id='isAccommadation_2' value="Example" />Example<br/>

        <input  type='checkbox' name="3" id='isAccommadation_3' value="Code" />Code<br/>

            </div>

    </body>

</html>

Read more

Check box checked and unchecked using JQuery

By using below code, if we check on one check box, all other check boxes will checked, if we un check all other check boxes will unchecked.

<!DOCTYPE html>

<html>

<head>

    <title></title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script language="javascript">

        $('document').ready(function() {

            $('#requestAccommodication').bind("click", doOperations);



        });

        var doOperations = (function () {

            debugger;

            if ($('#hai #requestAccommodication').is(':checked')) {

                $("#hai input[type=checkbox]").each(function () {

                    $(this).prop("checked", true);

                });

            } else {

                $("#hai input[type=checkbox]").each(function () {

                    $(this).prop("checked", false);

                });

            }

        });

    </script>

</head>

    <body>

        <div id="hai">

        <input type="checkbox" id="requestAccommodication" /><br />

        <input type='checkbox' name="1" id='isAccommadation_1' />JQuery

        <input type='checkbox' name="2" id='isAccommadation_2' />Example

        <input  type='checkbox' name="3" id='isAccommadation_3' />Code

            </div>

    </body>

</html>

Read more

How to remove tag using JQuery but without tag inner content?

Remove tag using JQuery

We can remove HTML tag using jquery by different scenarios.

1. $('a').contents().unwrap();

This will remove the anchor tag but keep the anchor inner HTML.

2. Come to performance view below code is useful.

var b = document.getElementsByTagName('a');
while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
    }
     parent.removeChild( b[ 0 ] );
}

3. We can also use replaceWith JQuery function. Please check below example.

$("a").replaceWith(function() { return $(this).contents(); });

If any other ways, please share in the comments section.

Read more

Is DOM element has been hidden or shown using jQuery?

Below JQuery samples will show you, how to find out hidden DOM element.


// Checks for display:[none|block], ignores visible:[true|false]
$(DOMElement).is(":visible")

//some more complete information
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
var isHidden = $('DOMElement').is(':hidden');

// Matches all elements that are hidden
$('DOMElement:hidden')

// Matches all elements that are visible.
$('DOMElement:visible')

//Functions don't work with the visibility attribute.
$(DOMElement).css('display') == 'none'

 

Read more

JQuery mouseenter(), hover(), mouseleave() Examples

Using below example we can do the mouse enter and mouse leave events using jquery.

Below example will show the inside list span tag text on mouse over.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style type="text/css">
        ul
        {
            margin-left: 20px;
            color: blue;
        }

        li
        {
            cursor: default;
        }

        span
        {
            color: green;
            display: none;
        }
    </style>

    <script type="text/javascript">
        //first way to do one mouse over and mouse leave -- using toggle 
        $(function () {
            $(".category").hover(function () {
                $(this).find("span").toggle();
            });
        });

        //Second way to do mouseenter and mouse leave event. 
        $(function () {
            $(".category1").mouseenter(function () {
                $this = $(this);
                $this.find("span").css("display", "block");
            }).mouseleave(function () {
                $this = $(this);
                $this.find("span").hide();

            });
        });
    </script>

</head>
<body>
    <ul>
        <li class='category'>
            <span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category'><span>aspnettutorialonline.blogspot.com</span>

        </li>
        <li class='category'><span>aspnettutorialonline.blogspot.com</span>

        </li>
    </ul>

    <ul>
        <li class='category1'>
            <span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category1'><span>aspnettutorialonline.blogspot.com</span>
        </li>
        <li class='category1'><span>aspnettutorialonline.blogspot.com</span>
        </li>
    </ul>
</body>
</html>

Output:

 

Read more

Getting inside ul (list) hyper link id and name using JQuery

By using below example we can get the id and anchor tag name using JQuery.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            debugger;
            var id = $('#links #active1').attr('id');
            var linkName = $('#links #active1 a').text();
            $('body').html('Id Name--------' + id + '<br />' + 'Name--------' + linkName);
            
        });
    </script>
</head>
<body>
    <ul id="links">
        <li id="active1"><a href="google.com" id="3">aspnettutorialonline.blogspot.com </a></li>
        <li id="active2"><a href="yahoo.com" id="2">Yahoo </a></li>
        <li id="Li1"><a href="facebook.com" id="A1">Facebook </a></li>
    </ul>
</body>
</html>

Output:


Getting inside ul hyper link id and name using JQuery

 

Read more

Applying css background property to inner div inside table using root class name

Using below code we can apply css into table div by using root class name.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $('.rootClass table div').css('background', 'green');
        });
    </script>
</head>
<body>
    <div class="rootClass">
  <h3>Header</h3>
  <div>
     <p>this is para</p>
     <div>second para</div>
     <div>
         <table border="1">
           <tbody><tr><td><div>aspnettutorialonline.blogspot.com</div></td><td>THis is second column</td></tr></tbody>
         </table>
     </div>
   </div>
</div>
</body>
</html>

Output:



Applying css background property to inner div inside table using root class name

 

Read more

Access the objects inside another objects In the JSON Response Object using JQuery

Most of the AJAX response, we will get the JSON Resonse. Some times we may require to get the object details, inside other object. For this requirement, below code is useful.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">
        var dataContainer = {
            metaData: {
                Paints: [{
                    id: 1,
                    color: { id: 123456 }
                },
                {
                    id: 2,
                    color: { id: 789 }
                }]
            }
        };

        $(function () {
            debugger;
            $.each(dataContainer.metaData.Paints,function(key,value){
                $('body').append($('<div>').html('<b>Id:</b>' + value.id + '----- <b> Color Code:</b>' + value.color.id));
            });
        });

    </script>
</head>
<body>

</body>
</html>

Output:

Read more

How to add text to div or division using jquery

In the previous example, we have seen how to add anchor tag to body using JQuery AppendTo Keyword. In the example we are going to see, how to append text to existing division.

Main Code:

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');

Complete Code:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');
</script>
</body>
</html>

 

Output:

How to add text to div using jquery

Read more

JQuery Ready() function syntax and usage

JQuery fires the custom event called ready(), whenever DOM is loaded and ready for manipulation.

If you want to execute any kind of events, what should work from this ready() handler only.

There are different ways are there for using ready function in the JQuery. Here i am discussing three ways.

Way 1

        // Standard.
        jQuery(document).ready(function () { alert('DOM Ready!'); });

Way 2

        jQuery(function () { alert('Using this syntax also DOM is ready'); });

Way 3

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });

Output:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        // Standard.
        jQuery(document).ready(function () { alert('jqueryexamplecode.blogspot.com'); });

        jQuery(function () { alert('Using this syntax also DOM is ready'); });

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });
    </script>
</head>
<body>
</body>
</html>

Output:

JQuery Ready() function syntax and usage

If you know any other ways, you can write in the comments section. 

Read more

How to append Anchor tag to HTML Body Dynamically using jquery

Using JQuery we can add anchor tag to body very easily. This can be possible by the AppendTo JQuery Method.

In the below example, i am appending anchor tag to body using jquery. We can also append div to any class or div using this Jquery AppendTo Keyword.

MainCode:

$('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');

Complete Code:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">
    $('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');

   
</script>
</body>
</html>

Output:

How to append Anchor tag to HTML Body Dynamically using jquery

Read more