Code Snippets – Tech-Freaks.com https://www.tech-freaks.com Wed, 09 Sep 2009 23:39:07 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://www.tech-freaks.com/wp-content/uploads/2025/07/cropped-tech-freaks-site-icon-512x512-1-32x32.png Code Snippets – Tech-Freaks.com https://www.tech-freaks.com 32 32 Check All checkbox using Jquery https://www.tech-freaks.com/java/code-snippets/jquery-checkall-checkbox.html https://www.tech-freaks.com/java/code-snippets/jquery-checkall-checkbox.html#respond Wed, 09 Sep 2009 23:39:07 +0000 http://localhost/tfcom_wp/2009/09/09/jquery-checkall-checkbox/

This article explains how Jquery can be used to implement a check all checkbox. On checking this ‘check all’ checkbox, all other checkboxes present in the page will be checked and when unchecked all the checkboxes will be unchecked.

The below HTML code provides such an example:

<html>
 <head>
  <script type="text/javascript" src="static/jquery-1.3.1.js"></script>
  <script type="text/javascript">
   //Gets called after the page is completely loaded
   $(document).ready( function() {
    //Get the click event of id checkAll
    $('input#checkAll').click(function(){
     //Get the state of checkAll button.
     //We will use it later to assign it to all other checkboxes
     //See this currently points to checkAll element
     var checkAllState = this.checked;
     //Fetch all checkboxes
     $('input:checkbox').each(function() {
      //this now points to each checkbox iterated
      this.checked = checkAllState;
     });
    });
   });
  </script>
 </head>
 <body>
  <div><h2>Check All Check Box</h2></div>
  <div><input type="checkbox" id="checkAll" name="checkAll"/>&nbsp;<b>(Un)Check All Color</b></div>
  <div><input type="checkbox" name="yellow"/>&nbsp;Yellow</div>
  <div><input type="checkbox" name="green"/>&nbsp;Green</div>
  <div><input type="checkbox" name="red"/>&nbsp;Red</div>
  <div><input type="checkbox" name="blue"/>&nbsp;Blue</div>
  <div><input type="checkbox" name="pink"/>&nbsp;Pink</div>
    </body>
</html>

In the javascript section, comments are provided in line explaining the code.

Save the above code as a HTML including the Jquery lib in correct path and see the above code in action.

]]> https://www.tech-freaks.com/java/code-snippets/jquery-checkall-checkbox.html/feed 0 Jquery way to display error message https://www.tech-freaks.com/java/code-snippets/jquery-error-display.html https://www.tech-freaks.com/java/code-snippets/jquery-error-display.html#respond Wed, 09 Sep 2009 00:47:38 +0000 http://localhost/tfcom_wp/2009/09/09/jquery-error-display/

This article explains how to display client side validation errors in web page instead of the classical alert message using Jquery. The working is based on a error message div element. The error messages is added to it, if any, along with a change in background color.

The below code validates two fields email address and confirm email address. The example does not check for validity of email field. It just checks for empty string for the two fields. If both the fields are not empty, it just compares and displays a message telling that the two fields do not match. 

<html>
    <head>
        <script type="text/javascript" src="static/jquery-1.3.1.js"></script>
        <script type="text/javascript">
            //Gets called after the page is completely loaded
            $(document).ready( function() {
                $('input#submit').click(function(event){
                    $("div#errMsg").html("");
                    var email = $("input#email").val();
                    var confEmail = $("input#confEmail").val();
                   
                    if(email!="" && confEmail!="") {
                        if(email!=confEmail) {
                            $("div#errMsg").css("background-color", "red");
                            $("div#errMsg").html("Confirm email does not match with email");
                        }
                    } else {
                        var errMsg = "<ul>";
                        if(email=="")
                            errMsg = errMsg+"<li>Please enter email address</li>";
                        if(confEmail=="")
                            errMsg = errMsg+"<li>Please enter confirm email</li>";
                           
                        errMsg=errMsg+"</ul>";
                        $("div#errMsg").css("background-color", "red");
                        $("div#errMsg").html(errMsg);
                    }   
                });
            });
        </script>
    </head>
    <body>
        <div><h2>Jquery Way of message display</h2></div>
        <div id="errMsg"></div>
        <div id="emailDiv">Email Address: <input type="text" id="email" name="email"/></div>
        <div id="confEmailDiv">Confirm Email: <input type="text" id="confEmail" name="confirmEmail"/></div>
        <div><input type="submit" name="submit" id="submit"/></div>
    </body>
</html>
 

The code purposely uses element.css() method for adding background color to the error div. Ideally, we should define a CSS class for the error state and add class using addClass method.

It also explains the element.html() method for injecting content between the div tags.

]]> https://www.tech-freaks.com/java/code-snippets/jquery-error-display.html/feed 0 A Jquery way to include file https://www.tech-freaks.com/java/code-snippets/jquery-ajax-file-include.html https://www.tech-freaks.com/java/code-snippets/jquery-ajax-file-include.html#respond Fri, 04 Sep 2009 01:18:00 +0000 http://localhost/tfcom_wp/2009/09/04/jquery-ajax-file-include/

Although all server side components provide the option of including file like <jsp:include> etc, having a way to include files using clients side script can come handy if the pages are made of plain old HTML.

We provide a code for explaining how Jquery can be used to include files.

Main file:

<html>
 <head>
  <script type="text/javascript" src="static/jquery-1.3.1.js"></script>
  <script type="text/javascript">
   //Gets called after the page is completely loaded
   $(document).ready( function() {
    //loads include page using AJAX passing parameters and executes the function after completion
    $("#include").load("incJquery.jsp", {param1:25, param2:30}, function() {
     alert("Loading include file completed!");
    });
   });
  </script>
 </head>
 <body>
  <div id="include">Loading....</div>
  Welcome to Jquery <br/>
  You see me in the main file!
 </body>
</html>

Include file:

<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<h2>Am from include file, thanks to Jquery!</h2>
Value of Parameter1 is <c:out value="${param.param1}"/>
<br/>Value of Parameter1 is <c:out value="${param.param2}"/><p/>

The jquery load function basically is an AJAX call which loads the content and inserts it into the div with id=include.

The load used uses the three parameter function. The first parameter being the URL, second is data (which is basically a key/value pair object) and lastly a function. The data (key/value) gets passed to the URL as parameters. The include file can access the parameters like any GET parameters received.

Add both the files in a Java application server context. The files should be placed in same directory. Access the main file from browsers using a localhost url for going through the application server.

See the contents loaded from include file and also the parameter contents received in the include file.

Do not try to load pages from a different domain using the above script. It will not work and will provide a cross domain access error.

 

]]> https://www.tech-freaks.com/java/code-snippets/jquery-ajax-file-include.html/feed 0 Accessing Request/session attributes using JSTL https://www.tech-freaks.com/java/code-snippets/request-session-jstl.html https://www.tech-freaks.com/java/code-snippets/request-session-jstl.html#respond Wed, 02 Sep 2009 21:35:38 +0000 http://localhost/tfcom_wp/2009/09/02/request-session-jstl/
JSTL and EL together provide an easy way to access session, request and application scope variables. EL provides implicit variables like sessionScope, requestScope, applicationScope and many more which are actually Map type. They can be navigated easily by using dot operator to access any attributes added to it.
 
Below JSP code provides a simple way of accessing and displaying the values.
 
Note that we have added the scriptlet in the page, just to show that we are adding value in session and request variables. Scriptlets should be avoided when JSTL and EL are used.
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
 
<%  //Scriptlets are not to be used
 request.setAttribute("param1", "Hello JSTL World!");
 session.setAttribute("userName", "Generic User");
%>

Hello <c:out value="${sessionScope.userName}"/>,</p>
Welcome to <c:out value="${requestScope.param1}"/></p>

 

It provides a output as below:
 
Hello Generic User,
Welcome to Hello JSTL World!
]]> https://www.tech-freaks.com/java/code-snippets/request-session-jstl.html/feed 0 Jquery way to simple popup window https://www.tech-freaks.com/java/code-snippets/jquery-popup-window.html https://www.tech-freaks.com/java/code-snippets/jquery-popup-window.html#respond Tue, 01 Sep 2009 23:49:17 +0000 http://localhost/tfcom_wp/2009/09/01/jquery-popup-window/
One thing cool about Jquery is the ability to access an element based on class or id attribute and handle events without attaching the traditional onClick, onSubmit events on the element.
 
We examine a simple way for providing a link that will open in a popup window using Jquery.
 
Below is the code in a page. The Jquery function is added in the html page, but in real applications we may want to segregate it in a JS file. 
<script type="text/javascript" src="static/jquery-1.3.1.js"></script>
 
<script type="text/javascript">
	$(document).ready( function() {
		$("a.home").click(
		function() {
			var href= $(this).attr("href");
			var arrHref = href.split("|");
			window.open(arrHref[0], "PopUp", arrHref[1])
			return false;
		});
	});
</script>
 
<a href="http://www.tech-freaks.com|toolbar=0,menubar=0,width=800,height=700,scrollbars=1"
class="home">Home Page</a>

 

See how the href attribute is used to pass other window configuration attributes. The Jquery splits by the delimiter (|) and calls the popup function. This provides amazing configuration ability, although the function looks big compared to our traditional popup. The a href tag is clean with no onclick function which is a plus. 
 
The only downside a developer unaware of Jquery may be confused on how that href attribute is able to generate a popup window. 
 
]]> https://www.tech-freaks.com/java/code-snippets/jquery-popup-window.html/feed 0 Iterating a Map using JSTL/EL https://www.tech-freaks.com/java/code-snippets/iterate-map-jstl-el.html https://www.tech-freaks.com/java/code-snippets/iterate-map-jstl-el.html#respond Mon, 31 Aug 2009 22:05:47 +0000 http://localhost/tfcom_wp/2009/08/31/iterate-map-jstl-el/
Normally, we iterate through a list (like ArrayList, LinkedList etc) in JSP. For map (HashMap, TreeMap etc), we would generally be picking up ‘value’ based on the ‘key’.
 
However, there are situations in which we would like to iterate all the elements of a map and display its key and value. For example, display a list of attribute name and value of a guitar! Each attribute name of the guitar represented as a key and the attribute value as a value. The key value pair would be something like this (‘Type’, ‘Electric’), (‘Brand’, ‘Gibson’) etc.
 
  ....
  .... 
  <c:forEach var="item" items="${itemsMap}">
${item.key} -->  ${item.value} </br>
  </c:forEach>
  ....
‘itemsMap’ would be a type of Map which is in request scope. 

The below code is an excerpt from a servlet which adds ‘itemsMap’ in request scope and forwards to the JSP which iterates the Map.

public void service(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  Map map = new HashMap();
  map.put("Type", "Electric");
  map.put("Brand", "Gibson");
  map.put("Model", "Les Paul Black Beauty");
  request.setAttribute("itemsMap", map);
  
  request.getRequestDispatcher("/DisplayMap.jsp").forward(request, response);
 }
One thing to worry about while iterating this way is the ordering of elements. Ensure to use a LinkedHashMap instead of a HashMap, if the order of the elements to be displayed is important. 
]]> https://www.tech-freaks.com/java/code-snippets/iterate-map-jstl-el.html/feed 0