jquiry

7/31/2019 jquiry

1/25

Jquery Post ExampleBy jigarnagar on March 22nd, 2011

This is very simple demo example for ajax call to server and get back to response in JSP UI. I havecreate this demo using the jquery and JSP .

Added Jquery js file into your head section in your JSP File

1

Jquery Ajax post Request :

It is having the following syntax to do a post request to server.

12

34

5

6

$.post( yourRequestURL, dataToPassToServer, callBackFunction, getAResponseType

);

Description:

yourRequestURL : It is String URL to which the request is sent.dataToPassToServer : Data sent to the server with the requestcallBackFunction : It will be executed if the request succeeds.getAResponseType : type of the request and response xml or json

12

3

4

56

7

8

function jqueryPostExample(){ $.post("yourJSPName.jsp", {name:"aoiblog"}, function(xml) { alert(xml); } );

}

Response JSP :

1

23

4

7/31/2019 jquiry

2/25

5

6

response.getWriter().write("Hello Ajax"); %>

It will print output in Console :

12

12:28:19,904 INFO [STDOUT] Hello Ajax call me 12:28:19,919 INFO [STDOUT] Hello Ajax call me aoiblog

If you have any query so please free feel to ask. Thanks to visiting my blog.

Share it with your friends:

val() in jquery By jigarnagar on January 12th, 2011

val() returns String

Get the current value of the first matched element.

Example :

1

2

3

45

67

8

910

11

12

1314

151617

18

$(document).ready(function(){ alert("Hello"); var test=$("input").val(); alert(test); })

val() Example in Jquery

Result:
http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/

7/31/2019 jquiry

3/25

1 "some text"

val(String)

val(String val) returns jQuery,Set the value of every matched element.

Example:

1 $("input").val("test");

HTML:

1

Result:

1

text() in Jquery By jigarnagar on January 11th, 2011

text() returns String

Get the text contents of all matched elements. The result is a string that contains the combined textcontents of all matched elements. This method works on both HTML and XML documents.

Example :

1

234

5

67

8

910

11

1213

$(document).ready(function(){

alert("Hello");

var test=$("p").text();

alert(test);

7/31/2019 jquiry

4/25

14

1516

17

18

1920

21

2223

24

2526

27

28

29

3031

32

3334

35

})

Text() Example in Jquery

Test Paragraph.

Paraparagraph

Example details:

Gets the concatenated text of all paragraphs

1 $("p").text();

HTML:

1

Test Paragraph.

Paraparagraph

Result:

1 Test Paragraph.Paraparagraph

2.text(String) :

text(String val) returns String

Set the text contents of all matched elements.Similar to html(), but escapes HTML (replace with their HTML entities).

Example:

7/31/2019 jquiry

5/25

Sets the text of all paragraphs.

1 $("p").text("Some new text.", true);

HTML:

1

Test Paragraph.

Result:

1

Some new text.

Access a HTML property in jquery By jigarnagar on January 6th, 2011

Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element.

Example:

Returns the src attribute from the first image in the document.

1 $("img").attr("src");

HTML:

1

Result:

1 test.jpg

Full Html Code Here

1

23

4

5

First Query Test Example

7/31/2019 jquiry

6/25

6

78

9

10

1112

13

1415

16

1718

19

$(document).ready(function() { alert("h1"); var attributeValue = $("img").attr("src"); alert("attributeValue "+attributeValue);

});

2) attr(Map)

attr(Map properties) returns jQuery Set a key/value object as properties to all matched elements.This serves as the best way to set a large number of properties on all matched elements.Example:

Sets src and alt attributes to all images.

1 $("img").attr({ src: "test.jpg", alt: "Test Image" });

HTML:

1

Result:

1

3. attr(String,Object) attr(String key, Object value) returns jQuery Set a single property to a value, on all matchedelements.Can compute values provided as ${formula}, see second example.

Note that you cant set the name property of input elements in IE. Use $(html) or.append(html) or.html(html) to create elements on the fly including the name property.Example:

Sets src attribute to all images.

7/31/2019 jquiry

7/25

1 $("img").attr("src","test.jpg");

HTML:

1

Result:

1

Example:

Sets title attribute from src attribute, a shortcut for attr(String,Function)

1 $("img").attr("title", "${this.src}");

HTML:

1

Result:

1

4.attr(String,Function)

attr(String key, Function value) returns jQuery Set a single property to a computed value, on allmatched elements.Instead of a value, a function is provided, that computes the value.Example:

Sets title attribute from src attribute.

1 $("img").attr("title", function() { return this.src });

HTML:

1

Result:

7/31/2019 jquiry

8/25

1

Example:Enumerate title attribute.

1 $("img").attr("title", function(index) { return this.title + (i + 1); });

HTML:

1

Result:

1

Access a property on the first matched element. This method makes it easy to retrieve aproperty value from the first matched element.

Example:

Returns the src attribute from the first image in the document.

1 $("img").attr("src");

HTML:

1

Result:

1 test.jpg

Full Html Code Here

1

2

34

5

67

8

9

10

First Query Test Example $(document).ready(function() { alert("h1"); var attributeValue = $("img").attr("src"); alert("attributeValue "+attributeValue);

7/31/2019 jquiry

9/25

11

1213

14

15

1617

18

19

});

2)attr(Map)attr(Map properties) returns jQuery Set a key/value object as properties to all matched elements.This serves as the best way to set a large number of properties on all matched elements.Example:Sets src and alt attributes to all images.

1 $("img").attr({ src: "test.jpg", alt: "Test Image" });

HTML:

1

Result:

1

attr(String,Object)attr(String key, Object value) returns jQuery Set a single property to a value, on all matched elements.Can compute values provided as ${formula}, see second example.Note that you cant set the name property of inp ut elements in IE. Use $(html) or.append(html) or .html(html) to create elements on the fly including the name property.Example:Sets src attribute to all images.

1 $("img").attr("src","test.jpg");

HTML:

1

7/31/2019 jquiry

10/25

7/31/2019 jquiry

11/25

Result:

1

Parse xml file using jquery By jigarnagar on December 31st, 2010

Parse XML file using Jquery:

There are the following steps to parse the xml file by jquery.

1. You have to include the jquery lib, u can download the js from the below URL.

1 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

2. Now download the xml file from the below URL.

1 http://www.w3schools.com/xsl/cdcatalog.xml

3. Now create the HTML file and give the name to HTML as you wish. my jsp name isxmlParsingUsingJquery.html.

Format of the HTML file may be like this :

1

2

34

5

67

8

My JSP 'test.jsp' starting page This is my HTML page.

Please note that your JS (jquery.min.js) , XML(cdcatalog) and HTML should be in same folder.if u want to put it on different folder so u should set the particular path in script source.

4. Now add the JS inside the HTML tag.

1
http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jshttp://www.w3schools.com/xsl/cdcatalog.xmlhttp://www.w3schools.com/xsl/cdcatalog.xmlhttp://www.w3schools.com/xsl/cdcatalog.xmlhttp://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jshttp://www.aoiblog.com/author/jigarnagar/

7/31/2019 jquiry

12/25

For example :

1

2

3

45

6

78

9

My JSP 'test.jsp' starting page This is my HTML page.

5.Next put your jquery and parsing logic code inside the HTML head tag.

1

2

34

5

67

8

9

1011

12

13

1415

16

1718

$(document).ready(function () {

$.ajax({ type: "GET", url: "cdcatalog.xml", dataType: "xml", success: parseXml }); });

function parseXml(xml) { $(xml).find("cd").each(function() { $(".tiles").append(": " + $(this).find("title").text() + " _ " +$(this).find("artist"});

}

For Example :

1

2

34

56

7

89

10

My JSP 'test.jsp' starting page

$(document).ready(function () {


7/31/2019 jquiry

13/25

11

1213

14

15

1617

18

1920

21

2223

24

25

26

2728

function parseXml(xml) { $(xml).find("cd").each(function() { $(".tiles").append(": " + $(this).find("title").text() + " _ " +$(this).find("artist"

});

}

This is my HTML page.

6. Now our next job is to show the result on the web page .

1

2

Now the Overall code is :

1

23

4

5

67

8

910

11

12

1314

15

1617

18

19

20

My JSP 'test.jsp' starting page $(document).ready(function () {


function parseXml(xml) { $(xml).find("cd").each(function() { $(".tiles").append(": " + $(this).find("title").text() + " _ " +$(this).find("artist"});

}

7/31/2019 jquiry

14/25

21

2223

24

25

2627

28

29


Simple Jquery ExampleBy jigarnagar on December 26th, 2010

Hello Friends ,

Today i m sharing a multiple jquery simple example that can be help you to understand, how to startlearn and using the jquery.

Basically you have to basic understanding for HTML and also basic aware about the java script.

you have to download the jqeury js file (jquery -1.4.4.js) from the net.

Example 1 : When page will loaded the alert message will show up in web page.

1

23

4

56

7

89

10

11

1213

14

15

1617

18

First Query Test Example $(document).ready(function() { alert("My First Jquery Example"); });

7/31/2019 jquiry

15/25

Example 2: Finds all p elements that are children of a div element.

1

2

3

45

6

78

9

10

1112

13

14

1516

17

18

First Query Test Example $(document).ready(function() { alert("Finds all p elements that are children of a div element."); $("div > p").css("border", "1px solid gray"); });

one

two

three

Example 3 : Appending text to body

12

3

4

56

7

89

10

1112

13

14

15

1617

1819

20

First Query Test Example $(document).ready(function() { alert("appending text to body by jquery"); $("

Hello I am appending text value
").appendTo("body");
});

Example 4 :insertAfter in Jquery

7/31/2019 jquiry

16/25

1

23

4

5

67

8

910

11

1213

14

15

16

Jquery Example By Jigar Nagar $(function(){ alert("Now i will add the text after ur Click"); $("

Hi there!
").insertAfter("#followMe"); });
Follow me!

Example 5 : Show/Hide in Jquery

12

3

4

56

7

8

91011

1213

14

1516

17

18

19

2021

22

2324

25

2627

First Query Test Example

$(document).ready(function() { alert("Hide the division"); $("#hideMe").hide();

$("#submit").click(function() { alert("My Function is call"); $("#hideMe").show(); }); });

Hello

7/31/2019 jquiry

17/25

Example 6 : Background Color Change in Jquery

1

2

3

45

6

78

9

10

1112

13

14

1516

17

18

Background Color Changed $(document).ready(function() { alert("Background Color Changed"); $("#body").css("background-color","black"); });

Example 7 : Call the function in Jquery

12

3

4

56

7

89

10

1112

13

14

15

1617

1819

20

2122

23

First Query Test Example $(document).ready(function() { $("#submit").click(function() { alert("My Function is call"); var firstName = $("#firstName").val(); var lastName = $("#lastName").val(); alert("firstName "+firstName+" lastName "+lastName); }); });

7/31/2019 jquiry

18/25

7/31/2019 jquiry

19/25

for example:

1

2

3

45

6

78

9

10

Jquery Context Menu Example Jquery Context Menu Demo

3. We have to download the following file for context menu demo.

1

23

4

1.jqcontextmenu.js 2.jquery.min.js 3.jqcontextmenu.css 4.any image ( As upto on you

7/31/2019 jquiry

20/25

1

23

4

5

6

JaStruts2

7/31/2019 jquiry

21/25

5

67

8

9

1011

12

1314

15

1617

18

19

20

2122

23

2425

26

27

3.1a 3.2a 3.3a 3.4a

Four

Five 5.1a 5.2a 5.2.1a 5.2.2a 5.2.3a 5.2.4a

Six

3.Finally call the context menu object from java script (add below code to head section )

12

3

4

jQuery(document).ready(function($){ $('a.mylinks').addcontextmenu('treeviewContextMenu') //apply context menu to links with

Ifrule in jquery validation By jigarnagar on November 1st, 2010

I am not so much expert in jquery and i am just beginner in Jquery.I am going to sharing my Jquery form validationexample by this forum.

Jquery is the advance version of java script.jQuery is a fast and concise JavaScript Library thatsimplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
http://jigarnagar.wordpress.com/http://jigarnagar.wordpress.com/http://jigarnagar.wordpress.com/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://www.aoiblog.com/author/jigarnagar/http://jigarnagar.wordpress.com/http://jigarnagar.wordpress.com/http://jigarnagar.wordpress.com/

7/31/2019 jquiry

22/25

first you have to download the Jquery validation plugin.we need two libaray for our example.1. jquery.js2. jquery.validate.js

now create the basic html form like :

1

2

34

5

6

7

89

10

Jigar Nagar Jquery Example This is basic HTML document

Now i am going include the form ,submit button and input text for validation.

1

23

4

5

67

8

910

11

1213

14

1516


Now i will start to do this form validation by jquery.so i have to add jquery code within html page.

First i will include the jquery libaray in section of HTML.

1

2

34

5

Jigar Nagar Jquery Example

7/31/2019 jquiry

23/25

6

78

9

10

11

.... .... ....

now i will set the rules and message for the validation.

12

3

4

56

7

89

10

1112

13

14

1516

17

18

192021

......... $().ready(function() { $("#signupForm").validate({ rules: {

firstname: {

required: true } }, messages: { firstname: "Please enter your firstname1" } }); }); ...... .....

Jquery : The Basic ExampleBy jigarnagar on November 1st, 2010

I am not so much expert in jquery and i am just beginner in Jquery.I am going to sharing my Jquery

form validationexample by this forum.

Jquery is the advance version of java script.jQuery is a fast and concise JavaScript Library thatsimplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

7/31/2019 jquiry

24/25

first you have to download the Jquery validation plugin.we need two libaray for our example.1. jquery.js2. jquery.validate.js

now create the basic html form like :

1

2

34

5

6

7

89

10


Now i am going include the form ,submit button and input text for validation.

1

23

4

5

67

8

910

11

1213

14

1516


Now i will start to do this form validation by jquery.so i have to add jquery code within html page.

First i will include the jquery libaray in section of HTML.

1

2

34

5

Jigar Nagar Jquery Example

7/31/2019 jquiry

25/25

6

78

9

10

11

.... .... ....

now i will set the rules and message for the validation.

12

3

4

56

7

89

10

1112

13

14

1516

17

18

19

......... $().ready(function() { $("#signupForm").validate({ rules: { firstname: { required: true } }, messages: { firstname: "Please enter your firstname1" } }); }); ...... .....


Documents

jquiry