Learn Jquery with in 15 hrs


I have written the series of article on Jquery for beginner. You can learn very quickly with in few hours of time from the given below list of articles.

1. what is the Jquery (Part 1)

2. Different ways to write Jquery function (Part 2)

3. What is the Selector in Jquery ? (Part 3)

4. What is the Jquery Event ? (Part 4)

5. Effect methods in Jquery Library (Part 5)

6. what is the chaining in Jquery ?(Part 6)

7. How to read and write Value in Jquery (Part 7)

8. CSS manipulation in Jquery (part 8)

9. Add and remove element in Jquery (Part 9)

10. Jquery traversing (Part 10.0)

11. First and last Method of Jquery Traversing (Part 11)

12. each,eq and not method of Jquery Traversing (Part 12)

13. Parent,Parents and ParentUntil Method of Jquery Traversing (Part 13)

14. Filter and Find method in Jquery Traversing (Part 14

15. Ajax in Jquery (Part 15)

16. Jquery Ajax in Asp.net MVC (Part 16)

17. What is the use of . noConflict() Method In Jquery ?

18. How to implement jquery accordion in asp.net MVC

I hope it will help to beginner who are interested to learn the Jquery.

Advertisements
Posted in Jquery. Tags: . Leave a Comment »

Jquery Ajax in Asp.net MVC (Part 16)


In this post i will show you how to use Jquery Ajax method in Asp.net MVC. This topic is very vast but I will create very simple example to test this method in asp.net MVC.

calling_jquey_ajax

Step 1: Create one blank asp.net MVC application. I hope you are knowing the basic concept of asp.net MVC.

Step 2: Create Emp Class in Model folder and write the code like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxDemoInMVC.Models
{
    public class Emp
    {
        public int Id { get; set; }
        public string EmpName { get; set; }
        public string EmpAddress { get; set; }
    }
}

Step 3: Create the HomeController and the DisplayEmpDetail Method like this


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AjaxDemoInMVC.Models;

namespace AjaxDemoInMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult DisplayEmpDetail(int id)
        {
            Emp obj = new Emp
            {
                 Id=id,
                 EmpName="Chandradev",
                 EmpAddress="Bangalore"
            };
            return Json(obj);
        }
    }
}

Note: Here we are returning the values as Json format.

Step 4: Create the Index view and Write the code for calling the method using Jquery Ajax method as given below


@model AjaxDemoInMVC.Models.Emp

@{
    ViewBag.Title = "Index";
}

<fieldset>
    <legend>
        Sample code for Calling Jquery Ajax in asp.net MVC
    </legend>

    <br />

EmpId: <input type="text" id="txtId" />
<input type="button" id="btnAjax"  value="Click Here to Call Jquery Ajax" />
</fieldset>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        $("#btnAjax").click(function () {
            $.ajax({
                type: "POST",
                url: "Home/DisplayEmpDetail",
                data: '{Id: "' + $("#txtId").val() + '" }',
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    alert("EmpName: "+ response.EmpName + "   EmpAddress: " + response.EmpAddress);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }

            });

        });

    });
</script>

Note : In the above code we show that we are using jquery Ajax method on button Click event and Ajax method expect the type, URL,Data,ContentType,Success,Failure and error parameter.

Type: means Type of Request in Ajax method

URL: Means Method name which are using for Ajax functionality.

data: what are the input data being used in method

ContentType: What are the content type consuming in Ajax method. We are giving data in Json format in DisplayEmpDetail Method.

success: What will return the method on successfully execution.

failure: It will define what message should be display on failure of Ajax method
error: It will display the error message.

Summary: We show that how to use Jquery Ajax method in asp.net MVC application.

Ajax in Jquery (Part 15)


If you are the web developer and you are not using ajax functionalities in your web application then you are missing one of the cool features of web technology.

What is the ajax ?

Ajax is the asynchronous JavaScript with xml. which is used for doing the asynchronous communication between client and server. It will avoid unnecessary round trip between client and server so it will give good performance as compare to old technology.

Ajax is one of the important concept of jquery library. Using ajax in jquery we can create very interactive and light weight web web application.
Jquery library provide the 5 methods for doing the ajax functionalities. These as given below
1. Load
2. getjson
3. GET
4. POST
5. Ajax

In this post, i will include some of the important methods which are being used frequently

Load:

Load method is used to load the data from a server and put the data in the given selected area.

load_method

Step 1: Create one notepad text file and keep some dummy text data on it. I have created Test.txt and kept in the parent folder.

Step 2: Write the code for calling the “Test.txt” file in given Div as given below


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color:silver;
        }
        
    </style>
    <script>
        $(function () {
            $("button").click(function () {

                $("#div1").load("Test.txt");
            });

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for calling load method in Jquery.
        </legend>
       <div id="div1"></div>
       <button>Click Here</button>
     </fieldset>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

Summary :

In the above example we show that Load method is used to load the notepad text document in the given div area in asynchronous way.

Posted in Jquery. 1 Comment »

Filter and Find method in Jquery Traversing (Part 14)


This is one of the very important question in interview. I have got this question each and every interview. So i decided to write one small article on this question.

Filter(Selector):

This method is used to search the element in entire DOM element.

filter

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color: silver;
        }
    </style>
    <script>
        $(function () {
            $("div").filter(".bckColor").css("background-color", "green");

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>Sample code for filter in Jquery
        </legend>
        <div class="bckColor">
            Parent Div
           <div class="bckColor">
               Child Div
           <p>
               This is the paragraph
           </p>
           </div>
        </div>
    </fieldset>
</body>
</html>

In the above example we saw that background of div element is being changed on basis of filter(selector). Filter(Selector) method is searching the element in entire DOM element.

Find(Selector):

Find method is used to search the element in only child DOM element.

find

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color:silver;
        }
        
    </style>
    <script>
        $(function () {
            $("div").find(".bckColor").css("background-color", "green");

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for find in Jquery
        </legend>
       <div class="bckColor"> Parent Div
           <div class="bckColor"> Child Div
           <p>
               This is the paragraph
           </p>
           </div>
       </div>
     </fieldset>
</body>
</html>

In the above example we saw that find(selector) is searching the element in only child DOM element.

Summary:

In the both example we saw that filter is used for searching the element in entire DOM element while Find method is used for searching element on child DOM element.

Posted in Jquery. 1 Comment »

Parent,Parents and ParentUntil Method of Jquery Traversing (Part 13)


In this post we wil see when to use the parent ,Parents and ParentUntil method of Jquery traversing . These all three methods look like similar but their functionality are completely different.

parent()
>> It is used for selecting the parent element of given selector element.

parent

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 1px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parent().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parent method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that parent div of span has been only highlighted by red color.

parents()

>> It is used for selecting the all parents element of given selector

parents


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parents().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parents method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of Span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that Parents method is used for selecting the all parents elements of given selector in DOM element.

ParentsUntil(Selector)

>> It is used for selecting the parents element of given selector on given condition.

parentuntil




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {

            $("p").parentsUntil("div").css({ "color": "red", "border": "2px solid green" });
        });
    </script>
</head>

<fieldset>
    <legend>This is the demo example of Parent method in Jquery</legend>
    <body class="ancestors">
        body (great-great-grandparent)
         <div style="width: 500px;">
             div (great-grandparent)
        <ul>
            ul (grandparent)
         <li>li (direct parent)
        <p>This is the paragraph</p>
         </li>
            
        </ul>
         </div>
    </body>
</fieldset>
</html>

In the above example we saw that parentuntil is used for selecting the DOM element from given selector element to given parent element.

Posted in Jquery. 1 Comment »

each,eq and not method of Jquery Traversing (Part 12)


In this post i will include some of the important methods of Traversing Which are very useful in daily life of web developer.

each: It is used to do looping in the dom element.

Sample code for .each method in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        p {
            color: red;
            text-align: center;
            cursor: pointer;
            font-weight: bolder;
            width: 300px;
        }
    </style>
    
</head>
<body>
    <fieldset>
       <legend>This is the sample code for each method in Jquery.</legend>
    
<p>This is the paragraph1</p>
<p>This is the paragraph2</p>
<p>This is the paragraph3</p>
    
    </fieldset>
    <script>
        $(document.body).click(function () {
            $("p").each(function () {
                if (this.style.color !== "blue") {
                    this.style.color = "blue";
                } else {
                    this.style.color = "";
                }
            });
        });
    </script>
</body>
</html>

Before Click Event

after_click_each

After Click Event

before_click_each

In the above example we saw that each method is doing looing in each paragraph and changing the color from red to blue.

.eq:
>> It is used to filter the DOM elemnts on basis of index id of dom element.

Sample code for .eq in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").eq(2).css("background-color", "silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for filter in Jquery
        </legend>
    

 <ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
        </fieldset>
</body>
</html>

eq

In the above example we saw that eq method is used for finding the index of list Item(li) then changing the background color to expected color.

Not(selector)

>> It is used to remove the elements from the set of matched elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").not(":even").css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for not in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

not

In the above example we saw that not(“:even”) selector is used for removing the even list item(li) from the DOM element.

Posted in Jquery. 1 Comment »

First and last Method of Jquery Traversing (Part 11)


Since Jquery traversing contains huge number of methods so i have decided to break the article in small small part , so it will easier to read it.

In this post we will see when to use First and Last method of Jquery traversing

First()
>> first method is used to loop in the given dom element and find out the first element.

first

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").first().css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for First method in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

In the above example we saw that we are using first method to find out the first element of List item(li) and changing the selected item color to silver.

Last()
>> Last method is used to select the last element of dom element.

last

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").last().css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for last in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

In the above example we saw that last method is used to select the last element of dom element.

Summary:

In the both example we saw that first method is used select the first element and Last method is used select the last element of dom element.

Posted in Jquery. 1 Comment »