jquery Archives - Ebhor.com

Add active class onclick javascript and jQuery

December 5, 2023December 5, 2023 by manish

Add active class to a div on javascript onclick event Here we are applying a style to a simple div. Steps to add a css class on click event

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text" onclick="makeActive()">
            Click to make Active
        </div>
        <script>
            function makeActive() {
               var element = document.getElementById("text");
               element.classList.add("active");
               element.innerHTML="This is Active";
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

function makeActive() {

var element = document.getElementById("text");

element.classList.add("active");

element.innerHTML="This is Active";

}

</script>

</body>

</html>

Add active class onclick javascript to HTML ul List to make menu Here We have ul list elements to create horizontal menu on click on … Read more

Jquery toggle an element

October 23, 2023October 22, 2023 by manish

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. Photography Photography is the science, art and practice of creating durable images by recording light or other electromagnetic … Read more

jquery get parent id based on class value

September 22, 2023September 22, 2023 by manish

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 … Read more

Struts2 Json and Jquery Example

September 22, 2023September 2, 2023 by manish

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 … Read more

How to get multiple checkbox value in javascript and JQuery

July 22, 2023July 22, 2023 by manish

On many websites, you find multiple check box forms to select your interest, or to select multiple options. That can be created by using the HTML check box.

<input type="checkbox" name="Hobby" value="Painting" id="cb1">

1	<input type="checkbox" name="Hobby" value="Painting" id="cb1">

Here to make an input as a text box we need type=”checkbox”. name is a name given to a text box value property that specifies what … Read more

Getting id and class value of a html element

February 2, 2023February 2, 2023 by manish

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

Replacing content of div using .replaceWith()

February 1, 2023January 31, 2023 by manish

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 … Read more

Jquery html method

January 21, 2023January 20, 2023 by manish

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 … Read more

Showing JQuery Arraylist values using Struts2 and JSON

January 23, 2023January 12, 2023 by manish

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;
    }
}
</comments>

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;

}

</comments>

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

&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;


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

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

</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>

Hide and show html elements using jquery

January 12, 2023January 11, 2023 by manish

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 … Read more