Home » All posts

How to do Check box check event dynamically?

in , - on 07:21 - No comments

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
Labels: ,

Check box checked and unchecked using JQuery

in , - on 06:57 - No comments
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
Labels: ,

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

in , - on 22:31 - No comments

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
Labels: ,

Is DOM element has been hidden or shown using jQuery?

in , - on 05:02 - No comments
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
Labels: ,

Redirect one webpage to other using Javascript/JQuery

in , , , - on 02:58 - No comments
There are so many ways to redirect one javascript file to other. As per my knowledge i am showing below ways, If any one knows any other way they can tell in the comments section.



// it won't store information about previous page.
window.location.replace("http://aspnettutorialonline.blogspot.com/");

// best way to use
window.location.href = "http://aspnettutorialonline.blogspot.com/";

//using javascript only.
window.location = "http://aspnettutorialonline.blogspot.com/";


//Using JQuery way - 1
var url = "http://aspnettutorialonline.blogspot.com/";   
$(location).attr('href',url);


//Using JQuery way  - 2.
$jq(window).attr("location","http://aspnettutorialonline.blogspot.com/");

//redirecting to the home page.
window.location = window.location.host
Read more
Labels: , , ,

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

in , - on 06:07 - No comments
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
Labels: ,

How to implement validations on form controls using javascript before a postback occurs.

in , , , , - on 05:34 - No comments

If we are using submit button in the form, we have to validation data before sending to the server. For this on submit we will call the javascript method. from the method we will return true or false based on the validation result. 


<!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 Validate() {
            //Need to do validations here. 
            //If any thing fails we have to return false other wise request go to server
        }
    </script>
</head>
<body>
    <form onsubmit="return Validate()">
        ... all controls will go here with submit button...
    </form>
</body>
</html>

If you have any queries or suggestions, please feel free to ask in comments section.
Read more
Labels: , , , ,