Home » jquery

Category Archives: jquery

Jquery html method

html() is used to get or set the html content in matched selector.
Getting content using html()

Html() get contents with html tags of specified selector

If more then one elements are there with same selector then only first matched elements content are get using html().

for setting html content we pass string argument in html()

setting html content using html()

we can set more then one selector value by html().

using function in html()

Please follow and like us:
error

Jquery toggle an element

toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element.
If element is not hidden on toggle it will hide the element.

Output

We can also specify the toggle time and function to perform task of toggle done

Output

Please follow and like us:
error

Hide and show html elements using jquery

Hide and show function are used to show and hide any html element.
Here on button click we are showing and hiding the div.

Output

We can also provide how long this hide or show will take place be specifying the time
like

$(“.description”).hide(2000);
or $(“.description”).show(2000);

to perform specific task after hide or show we can use

Output

Please follow and like us:
error

Getting parent id based on class value

If we have nested divs one inside another and we want to get id of parent div for this we use parents().

suppose following div structure

as above we have seen how to get id for top parent and similar we can get id or class value for any level of parent.
for getting class value we can use following which will give second level divs class based on its id value.

Output

Please follow and like us:
error

Getting id and class value of a html element

We have a div and we want to get its id value based on its class value.

Suppose a div is given as below and we want to fetch div id based on a button click.
for getting attribute id we use attr() method.

Example

Output

Please follow and like us:
error

Changing text on mouse over event

Change text of html element on mouseover and on mouseleave event it should show original message.

Example

Output:

Please follow and like us:
error

Replacing content of div using .replaceWith()

To replace the content of a div span or any other block elements content with html element a jquery method .replaceWith() is used.
Syntax:

or

A selector can be id class or tag selector of element to replace with newContent passed in .replaceWith() method. a newContent can be html string, DOM element, Array or object.
Another syntax uses any function that evaluates and replace the selector with new function return value.

There is a div with id value a with content Hi how are you. Here id a will replaced with div id with value b and content I am fine when ever user click on button.

Example:
Html page is

We want to replace <div id=”a”> with following content

To achive above with jquery we will use following code

Output:

Here new content will be

Lets use function in replaceWith method

Jquery code


.replaceWith() does not clone the object it replace the content on DOM.

Please follow and like us:
error

Showing Arraylist values using Struts2 Json and JQuery

I am having comment class, I want to show its property values to jsp page using json

Comments.java

ListJson assigning values for comments.java. Here we fetch value of commentList and totalcomments value in our jsp page.

Struts.xml

In Jsp page

Please follow and like us:
error

Struts2 Json and Jquery Example

Here we will fetch a action variable’s value in jsp page using JSON and jquery
Here I am using struts 2.3.4 for that we have to include struts-2-json-plugin-2.3.4.jar in class path or include it to your lib folder if you are using any IDE.

Action class

In struts.xml we have to extend json-default and result type shold be json. No need to specify path inside <result &rt;</result<

struts.xml

Jsp page

Here we are using $.getJSON(‘test’, { name: name1}, function(data) method to fetch json data.

Please follow and like us:
error