jquery Archives - Ebhor.com

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()

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.

<div class="description">
    <h1>Photography</h1>
    <p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>
</div>
<input type="submit" value="Toggle" id="toggle" />

<h1>Photography</h1>

<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>

</div>

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle();
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle();

});

Output

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

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle(2000,function (event) {
            alert("toggle done");
        });
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle(2000,function (event) {

alert("toggle done");

});

Output

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.

<div class="description">
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
</div>
 <input type="submit" value="Hide" id="hide" />
 <input type="submit" value="Show" id="show" />

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

</div>

$(document).ready(function () {
    $(document).on('click', '#hide', function (event) {
       $(".description").hide();
    });
     $(document).on('click', '#show', function (event) {
       $(".description").show();
    });
});

$(document).ready(function () {

$(document).on('click', '#hide', function (event) {

$(".description").hide();

});

$(document).on('click', '#show', function (event) {

$(".description").show();

});

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

$(document).ready(function () {
    $(document).on('click', '#hide', function (event) {
        $(".description").hide("slow", function () {
            alert("Hiding Completed.");
        });
    });
    $(document).on('click', '#show', function (event) {
        $(".description").show(100, function () {
            alert("Showing Completed.");
        });
    });
});

$(document).ready(function () {

$(document).on('click', '#hide', function (event) {

$(".description").hide("slow", function () {

alert("Hiding Completed.");

});

$(document).on('click', '#show', function (event) {

$(".description").show(100, function () {

alert("Showing Completed.");

});

Output

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

<div class="level1" id="level1_123">
    <div class="level2" id="level2_324">
        <div class="level3" id="level3_567">
            <div class="level4" id="level4_985">
                <input type="submit" value="Get Parent Id" id="submit" />
            </div>
        </div>
    </div>
</div>

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
        var parentId = $(this).parents(".level1").attr("id");
        alert(parentId);
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

var parentId = $(this).parents(".level1").attr("id");

alert(parentId);

});

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.

var parentClass = $(this).parents("#level2_324").attr("class");

1	var parentClass = $(this).parents("#level2_324").attr("class");

Output

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

<div class="select" id="select_25">
This is a ball
</div>
<input type="submit" value="Get Id" id="submit">

This is a ball

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
         alert("id is "+$(".select").attr('id'));
         alert("class is "+$("#select_25").attr('class'));
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

alert("id is "+$(".select").attr('id'));

alert("class is "+$("#select_25").attr('class'));

});

Output

Changing text on mouse over event

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

Example

<div id="message">
 Hi How are you
</div>

Hi How are you

</div>

$(document).ready(function() {
      $(document).on('mouseover', '#message', function(event) {
        event.preventDefault();
        $("#message").text("I am fine");
    }).on('mouseleave', '#message', function(event) {
        event.preventDefault();
        $("#message").text("Hi How are you");
    });
});

$(document).ready(function() {

$(document).on('mouseover', '#message', function(event) {

event.preventDefault();

$("#message").text("I am fine");

}).on('mouseleave', '#message', function(event) {

event.preventDefault();

$("#message").text("Hi How are you");

});

Output:

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:

  $(selector).replaceWith(newContent);

1	$(selector).replaceWith(newContent);

  $(selector).replaceWith(function);

1	$(selector).replaceWith(function);

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

<div class="one">
  <div id="a">
    Hi How are you
  </div>
  <button id="replace">
    Replace Content
  </button>
</div>

Hi How are you

</div>

Replace Content

</button>

</div>

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

    <div id="b">
          I am fine.
    </div>

I am fine.

</div>

To achive above with jquery we will use following code

$(document).ready(function() {
      $(document).on('click', '#replace', function(event) {
        event.preventDefault();
              $("#a").replaceWith("<div id=\"b\">I am fine.</div>");
      
    });
});

$(document).ready(function() {

$(document).on('click', '#replace', function(event) {

event.preventDefault();

$("#a").replaceWith("<div id=\"b\">I am fine.</div>");

});

Output:

Here new content will be

<div class="one">
  <div id="b">
        I am fine.
    </div>
  <button id="replace">
    Replace Content
  </button>
</div>

I am fine.

</div>

Replace Content

</button>

</div>

Lets use function in replaceWith method

<h1 class="test">
<div id="a">Good to read this</div>
</h1>
<div id="b">Better to practice now</div>
<button id="replace">
    Replace Content
  </button>

</h1>

<div id="b">Better to practice now</div>

Replace Content

</button>

Jquery code

$(document).ready(function() {
      $(document).on('click', '#replace', function(event) {
        event.preventDefault();
              $("#a").replaceWith($('#b");
      
    });
});

$(document).ready(function() {

$(document).on('click', '#replace', function(event) {

event.preventDefault();

$("#a").replaceWith($('#b");

});

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

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

package example;

import java.sql.Timestamp;

public class Comments {

    private int id;
    private String name;
    private String pic;
    private String comment;
    private Timestamp commentDate;

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public Timestamp getCommentDate() {
        return commentDate;
    }

    public void setCommentDate(Timestamp commentDate) {
        this.commentDate = commentDate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPic() {
        return pic;
    }

    public void setPic(String pic) {
        this.pic = pic;
    }
}

package example;

import java.sql.Timestamp;

public class Comments {

private int id;

private String name;

private String pic;

private String comment;

private Timestamp commentDate;

public String getComment() {

return comment;

}

public void setComment(String comment) {

this.comment = comment;

}

public Timestamp getCommentDate() {

return commentDate;

}

public void setCommentDate(Timestamp commentDate) {

this.commentDate = commentDate;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getPic() {

return pic;

}

public void setPic(String pic) {

this.pic = pic;

}

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

package example;

import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;

public class ListJson extends ActionSupport {

    private ArrayList commentList = new ArrayList<comments>();
    private long totalComments;

    public String execute() {
        comments c = new comments();
        c.setId(1);
        c.setName("Manish");
        c.setComment("Hi how are you");
        c.setPic("a.jpg");
        c.setCommentDate(null);

        comments d = new comments();
        d.setId(2);
        d.setName("Nita");
        d.setComment("I am fine");
        d.setPic("b.jpg");
        d.setCommentDate(null);
        commentList.add(c);
        commentList.add(d);
        setTotalComments(commentList.size());
        System.out.println("In action");

        return SUCCESS;
    }

    public long getTotalComments() {
        return totalComments;
    }

    public void setTotalComments(long totalComments) {
        this.totalComments = totalComments;
    }

    public ArrayList getCommentList() {
        return commentList;
    }

    public void setCommentList(ArrayList commentList) {
        this.commentList = commentList;
    }
}

package example;

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;

public class ListJson extends ActionSupport {

private ArrayList commentList = new ArrayList<comments>();

private long totalComments;

public String execute() {

comments c = new comments();

c.setId(1);

c.setName("Manish");

c.setComment("Hi how are you");

c.setPic("a.jpg");

c.setCommentDate(null);

comments d = new comments();

d.setId(2);

d.setName("Nita");

d.setComment("I am fine");

d.setPic("b.jpg");

d.setCommentDate(null);

commentList.add(c);

commentList.add(d);

setTotalComments(commentList.size());

System.out.println("In action");

return SUCCESS;

}

public long getTotalComments() {

return totalComments;

}

public void setTotalComments(long totalComments) {

this.totalComments = totalComments;

}

public ArrayList getCommentList() {

return commentList;

}

public void setCommentList(ArrayList commentList) {

this.commentList = commentList;

}

Struts.xml

 <package name="example1" extends="struts-default, json-default">
        <action name="fetchComments" class="example.ListJson">
            <result  type="json"></result>
        </action>
    </package>

</action>

</package>

In Jsp page

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <input type="button" id="button1" value="Submit">

        <div class="total-comments"></div>
        <div class="allcomments">

        </div>        
        <script>
            $("#button1").click(function() {
                $.getJSON('fetchComments', function(data) {
                    $(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");
                   
                    var msg;
                 
                    $.each(data.commentList, function(j) {
                        msg='<div class="comment">';
                        msg+= '<div class="id">'+data.commentList[j].id+'</div>'
                        msg+= '<div class="name">'+data.commentList[j].name+'</div>';         
                        msg+= '<div class="image">'+data.commentList[j].pic+'</div>'
                        msg+= '<div class="image">'+data.commentList[j].comment+'</div>'
                        msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'
                        msg+='</div>';
                        $(".allcomments").append(msg);
                    });
                    return false;                    
                });
            });
           </script>
</body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

$("#button1").click(function() {

$.getJSON('fetchComments', function(data) {

$(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");

var msg;

$.each(data.commentList, function(j) {

msg='<div class="comment">';

msg+= '<div class="id">'+data.commentList[j].id+'</div>'

msg+= '<div class="name">'+data.commentList[j].name+'</div>';

msg+= '<div class="image">'+data.commentList[j].pic+'</div>'

msg+= '<div class="image">'+data.commentList[j].comment+'</div>'

msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'

msg+='</div>';

$(".allcomments").append(msg);

});

return false;

});

</script>

</body>

</html>

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

package example;

import com.opensymphony.xwork2.ActionSupport;

public class HelloJSON extends ActionSupport {

    private String name;
    private String welcomeMessage;

    @Override
    public String execute() {

        System.out.println("Inside Action name is " + getName());
        setWelcomeMessage("Welcome " + getName() + "!!");
        System.out.println(getWelcomeMessage());
        return SUCCESS;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getWelcomeMessage() {
        return welcomeMessage;
    }

    public void setWelcomeMessage(String welcomeMessage) {
        this.welcomeMessage = welcomeMessage;
    }
}

package example;

import com.opensymphony.xwork2.ActionSupport;

public class HelloJSON extends ActionSupport {

private String name;

private String welcomeMessage;

@Override

public String execute() {

System.out.println("Inside Action name is " + getName());

setWelcomeMessage("Welcome " + getName() + "!!");

System.out.println(getWelcomeMessage());

return SUCCESS;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getWelcomeMessage() {

return welcomeMessage;

}

public void setWelcomeMessage(String welcomeMessage) {

this.welcomeMessage = welcomeMessage;

}

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

 <package name="example1" extends="json-default">
        <action name="test" class="example.HelloJSON">
            <result  type="json"></result>
        </action>
 </package>

</action>

</package>

Jsp page

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
    <head>
        <title><s:text name="Hello JSON/></title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
    <form action="" id="myForm">
            <label for="name">Enter Your Name</label>
            <input name="name" id="name">
            <input type="button" id="button1" value="Submit">
        </form>
        <div class="result"></div>
        <script>
            $("#button1").click(function() {
                var name1=$("#name").val();
                 $.getJSON('test', { name: name1}, function(data) {
                    $('.result').html(data.welcomeMessage);
                    return false;
                });
            });
        </script>
    </body>
</html>

<%@ page contentType="text/html; charset=UTF-8" %>

<html>

<head>

</head>

<body>

<label for="name">Enter Your Name</label>

</form>

$("#button1").click(function() {

var name1=$("#name").val();

$.getJSON('test', { name: name1}, function(data) {

$('.result').html(data.welcomeMessage);

return false;

});

</script>

</body>

</html>

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