Saturday, November 5, 2011

Passing variable values from one jsp to another jsp

Here is a very simple example to pass variable value from one jsp to another jsp.


Main JSP where variables are initialized.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title> Display</title>
    </head>

    <SCRIPT LANGUAGE="JavaScript">
        var no = 4;
        var eventName = new Array(no);


        eventName[3] = "E1";
        eventName[2] = "E2";
        eventName[1] = "E3";
        eventName[0] = "E4";
       
        function getDetails()
        {
            //window.location = "./Timeline - All.html";
            window.open('./child.jsp','','scrollbars=no,menubar=no,height=600,width=800,resizable=no,toolbar=no,location=no,status=no');
        } 
            
    </SCRIPT>

    <body>
        <h1>Hello!</h1>
        <form name ="f1" method="post">
            <table border="0" cellpadding="30">
                <tr>
                    <td>
                        <font size="3" face="arial" color="Black">Enter ID</font>
                    </td>
                    <td>
                        <input type="text" name="id">
                    </td>
                </tr>   

                <tr>
                    <td>
                        <input type="button" value="Submit" name="showId" onclick="getDetails()"/>
                    </td>
                </tr>

            </table>
        </form>

    </body>

</html>


Child JSP where we get the values of main jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Child</title>
    </head>

    <SCRIPT LANGUAGE="JavaScript">
        var no = 4;
        var eventName = window.opener.eventName;
       
       
        function getDetails()
        {
            for(i=0;i<no;i++) {
                alert(eventName[i]);
            }
        } 
            
    </SCRIPT>

    <body onload="getDetails()">

    </body>

</html>
Posted by at 6 comments:
Labels:

Dynamically create table, rows, cells in html - JSP

In JSP, we have created html, table, rows (tr) and cells (td). However few days back, I was given challenge to create it dynamically based on some values returned from the database.


Below, I will show you how to create cells and rows dynamically.


based on some values returned from the database.

Below, I will show you how to create cells and rows dynamically.


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Customer Timeline Display</title>
        <script>
           
            function isEven(value) {
                if (value%2 == 0)
                    return true;
                else
                    return false;
            }

           
            function start() {
                var eventName = new Array(4);
                var eventDate = new Array(4);
                eventName[0] = "Olympic";
                eventName[1] = "Asian Games";
                eventName[2] = "Grand Prix";
                eventName[3] = "Football World Cup";

                eventDate[0] = "2003";
                eventDate[1] = "2005";
                eventDate[2] = "2007";
                eventDate[3] = "2011";
               
                // get the reference for the body
                var mybody = document.getElementsByTagName("body")[0];
                // creates table and tbody elements
                mytable     = document.createElement("table");
                mytablebody = document.createElement("tbody");

                // creating all cells
                for(var j = 0; j < eventName.length; j++) {
                    // creates a <tr> element
                    var event = eventName[j];
                    mycurrent_row = document.createElement("tr");

                    for(var i = 0; i < 3; i++) {
                        // these should be always 3 as 3 columns
                        // creates a td element
                        mycurrent_cell = document.createElement("td");
                        mycurrent_cell.setAttribute("width",300);
                           
                        // creates a Text Node
                        if(isEven(j)) {
                            if(i == 2) {
                                currentText = document.createTextNode(eventName[j] + " on " + eventDate[j]);
                                mycurrent_cell.appendChild(currentText);
                                mycurrent_cell.setAttribute("align", "center");

                            }
                        }
                        if(!isEven(j)) {
                            if(i == 0) {
                                currentText = document.createTextNode(eventName[j] + " on " + eventDate[j]);
                                mycurrent_cell.appendChild(currentText);
                                mycurrent_cell.setAttribute("align", "center");
                            }
                        }
                        // appends the Text Node we created into the cell <td>

                        if(i == 1) {
                            mycurrent_image = document.createElement("img");
                            if(event == "Olympic") {
                                mycurrent_image.setAttribute("src","1.jpg");
                                mycurrent_image.setAttribute("height",60);
                                mycurrent_image.setAttribute("width",60);
                            } else if(event == "Asian Games") {
                                mycurrent_image.setAttribute("src","2.jpg");
                                mycurrent_image.setAttribute("height",60);
                                mycurrent_image.setAttribute("width",60);
                            } else if(event == "Grand Prix") {
                                mycurrent_image.setAttribute("src","3.jpg");
                                mycurrent_image.setAttribute("height",60);
                                mycurrent_image.setAttribute("width",60);
                            } else if(event == "Football World Cup") {
                                mycurrent_image.setAttribute("src","4.jpg");
                                mycurrent_image.setAttribute("height",60);
                                mycurrent_image.setAttribute("width",60);
                            } 
                            mycurrent_cell.appendChild(mycurrent_image);
                            mycurrent_cell.setAttribute("bgColor","##BC8F8F");
                            mycurrent_cell.setAttribute("width",10);
                            mycurrent_cell.setAttribute("align","center");
                        }
                        // appends the cell td into the row tr
                        mycurrent_row.appendChild(mycurrent_cell);
                    }
                    // appends the row tr into tbody
                    mytablebody.appendChild(mycurrent_row);
                }

                // appends tbody into  table
                mytable.appendChild(mytablebody);
                // appends table into body
                mybody.appendChild(mytable);
                // sets the border attribute of mytable to 0;
                mytable.setAttribute("border","0");
                mytablebody.setAttribute("bgColor", "#FFF5EE");
                mytable.setAttribute("align","center");
               
            }
        </script>
    </head>
    <body onload="start()">
    </body>
</html>


Hope you find it useful.
Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)

Total Pageviews