File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes Struts and the fly likes Dependable dropdowns in jsp(struts2) Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "Dependable dropdowns in jsp(struts2)" Watch "Dependable dropdowns in jsp(struts2)" New topic
Author

Dependable dropdowns in jsp(struts2)

usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Hi,

im back with a new query,while working with dynamic dropdowns i need to populate a dynamic dropdown which depends on the value choosen in the first dynamic drop down(for example:if i have 2 dropdowns d1 and d2,where d1 is a dynamic drop down. By selecting one of the values from d1,i need to populate the dynamic values in d2 based on the value of d1)...


i found the solution in ajax but i want it in struts2(jsp)
Junilu Lacar
Bartender

Joined: Feb 26, 2001
Posts: 4442
    
    5

Struts / JSP are server-side technologies. Any solution using these will still require calling out some Javascript on the client side. Plus, you'll have a full round-trip request to the server. What you're looking to do is best done with client-side technology. Stick with AJAX using a good Javascript library like jQuery.


Junilu - [How to Ask Questions] [How to Answer Questions]
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Junilu Lacar wrote:Struts / JSP are server-side technologies. Any solution using these will still require calling out some Javascript on the client side. Plus, you'll have a full round-trip request to the server. What you're looking to do is best done with client-side technology. Stick with AJAX using a good Javascript library like jQuery.


could you please post some code snippets of ajax as well as jquery regarding this dependable dropdowns.......
Junilu Lacar
Bartender

Joined: Feb 26, 2001
Posts: 4442
    
    5

Hi Usha,
On any other day I probably could but today I'm going to ask you to SearchFirst (<-- click). Here's a search query to get you started: jquery examples dynamic dropdown
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Junilu Lacar wrote:Hi Usha,
On any other day I probably could but today I'm going to ask you to SearchFirst (<-- click). Here's a search query to get you started: jquery examples dynamic dropdown



Hi,
im populating a dynamic dropdown,after selection of first dropdown value i need to populate dropdown based on the value of first dropdown for that i need to carry the first dropdown value to action class (struts2),based on that value i'l retrieve a list of values based on that value to jsp and i need to populate second jsp with the retrieved list............could you please help me out in doing this.....its very emergency for me to complete.........
Toni Montero
Greenhorn

Joined: Jul 04, 2012
Posts: 7
Hi Usha!

I did it with json.

I got the first dropdown called tipoProducto like this:



And i add a onchange function calling a json function:



this call a struts action with specific type:



Note the type of result. Before you add this kind of result you must add the code above in your struts.xml like this:



When action return the second list, the same code of js, fill the second select called familiaSelect.

I hope it helps you. Good luck
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Toni Montero wrote:Hi Usha!

I did it with json.

I got the first dropdown called tipoProducto like this:



And i add a onchange function calling a json function:



this call a struts action with specific type:



Note the type of result. Before you add this kind of result you must add the code above in your struts.xml like this:



When action return the second list, the same code of js, fill the second select called familiaSelect.

I hope it helps you. Good luck




Thanks for the solution,could you please send me the child dropdown and the action class of the above example........
Toni Montero
Greenhorn

Joined: Jul 04, 2012
Posts: 7


And the action code:



This work fine, tell me if you need more info.
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Toni Montero wrote:

And the action code:



This work fine, tell me if you need more info.



Thanks For Reply,
but here im unable to retrieve a list from my action class,here im using struts tags as per your code example: <result name="jsonv" type="json"><param name="business"/></result>
This is the method in my action class which retrieves a list from database using the business value sent from jsp through ajax
try {

setListOfCliContacts(clientContactsHelper.findContactsByUser(business));
} catch (Exception e) {

e.printStackTrace();
}
setBusiness("ADP");
return "jsonv";
}


please help me out with this retrieving of the json object from action to jsp....so that i can use this list in child dropdown......
Toni Montero
Greenhorn

Joined: Jul 04, 2012
Posts: 7
If your action code return correctly the result list, is js function who fill your child select. Look:

function loadFamilias(value)
{
//valor de la familia seleccionada en el combo
var formInput= 'codTipoProducto='+value;
var options=''; //variable para poner los valores de subfamilia

options += '<option selected value="0">Subfamilia</option>';
$("#subfamiliaSelect").html(options);

options = '';

//this function call your action
$.getJSON('loadFamiliasAction', formInput,function(data) {
//After action, here you have your list, now you have to fill de select, first of all, you can put an initial value like '0 - SELECT YOUR ITEM'
options += '<option selected value="0">Familia</option>';

//Then your data into the select with a forEach fucntion. Note that ITEM is your bean and idFamilia or nombre is your attribut inside bean
$.each(data.familias, function(i,item){
options += '<option value="' + item.idFamilia + '">' + item.nombre + '</option>';
});

//after fill select, you must assign the new variable into your select
$("#familiaSelect").html(options);
});

}
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Toni Montero wrote:If your action code return correctly the result list, is js function who fill your child select. Look:

function loadFamilias(value)
{
//valor de la familia seleccionada en el combo
var formInput= 'codTipoProducto='+value;
var options=''; //variable para poner los valores de subfamilia

options += '<option selected value="0">Subfamilia</option>';
$("#subfamiliaSelect").html(options);

options = '';

//this function call your action
$.getJSON('loadFamiliasAction', formInput,function(data) {
//After action, here you have your list, now you have to fill de select, first of all, you can put an initial value like '0 - SELECT YOUR ITEM'
options += '<option selected value="0">Familia</option>';

//Then your data into the select with a forEach fucntion. Note that ITEM is your bean and idFamilia or nombre is your attribut inside bean
$.each(data.familias, function(i,item){
options += '<option value="' + item.idFamilia + '">' + item.nombre + '</option>';
});

//after fill select, you must assign the new variable into your select
$("#familiaSelect").html(options);
});

}



Thanks For The Explanation....
but im getting error while i try to invoke the method from the javascript ( $.getJSON('JobActionJson?action=json&business=ADP', function(data) { ) even if im calling through url.......the same error im getting
org.apache.struts2.json.JSONException: org.apache.struts2.json.JSONException: java.lang.reflect.InvocationTargetException
org.apache.struts2.json.JSONWriter.bean(JSONWriter.java:250)
org.apache.struts2.json.JSONWriter.process(JSONWriter.java:164)
org.apache.struts2.json.JSONWriter.value(JSONWriter.java:130)
org.apache.struts2.json.JSONWriter.write(JSONWriter.java:98)
org.apache.struts2.json.JSONUtil.serialize(JSONUtil.java:112)
org.apache.struts2.json.JSONResult.execute(JSONResult.java:198)
com.opensymphony.xwork2.DefaultActionInvocation.executeResult(DefaultActionInvocation.java:374)
com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:278)
org.apache.struts2.interceptor.debugging.DebuggingInterceptor.intercept(DebuggingInterceptor.java:256)
com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:249)
com.opensymphony.xwork2.interceptor.DefaultWorkflowInterceptor.doIntercept(DefaultWorkflowInterceptor.java:176)
com.opensymphony.xwork2.interceptor.MethodFilterInterceptor.intercept(MethodFilterInterceptor.java:98)
Toni Montero
Greenhorn

Joined: Jul 04, 2012
Posts: 7
Your call to getJson is not valid, you must put action name, after this parameters and function (data....etc

Put here your js method, please.
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
Toni Montero wrote:Your call to getJson is not valid, you must put action name, after this parameters and function (data....etc

Put here your js method, please.


here is my js method

function ajaxCallForContacts(value)
var formInput= 'business='+value;
var options=''; //variable para poner los valores de subfamilia

options += '<option selected value="0">hiringManager</option>';
$("#hiringManager").html(options);

options = '';
$.getJSON('JobActionJson?action=json&business=ADP', function(data) {
alert(data);
options += '<option selected value="0">ClientContacts</option>';

$.each(data.listOfCliContacts, function(i,item){
options += '<option value="' + item.firstName + '">' + item.lastName + '</option>';
});


$("#hiringManager").html(options);
});
usha kotha
Ranch Hand

Joined: Apr 18, 2012
Posts: 33
usha kotha wrote:
Toni Montero wrote:Your call to getJson is not valid, you must put action name, after this parameters and function (data....etc

Put here your js method, please.


here is my js method

function ajaxCallForContacts(value)
var formInput= 'business='+value;
var options=''; //variable para poner los valores de subfamilia

options += '<option selected value="0">hiringManager</option>';
$("#hiringManager").html(options);

options = '';
$.getJSON('JobActionJson?action=json&business=ADP', function(data) {
alert(data);
options += '<option selected value="0">ClientContacts</option>';

$.each(data.listOfCliContacts, function(i,item){
options += '<option value="' + item.firstName + '">' + item.lastName + '</option>';
});


$("#hiringManager").html(options);
});



Hi Toni Montero ,

Here im shifted to servlets with ajax.....
here im facing problem in configuring servlets with struts2...
here im attaching my code please have a look over it and give me some solution

*******************struts.xml********************

here in this xml im getting error
( The content of element type "package" must match "(result-
types?,interceptors?,default-interceptor-ref?,default-action-
ref?,default-class-ref?,global-results?,global-exception-
mappings?,action*)".


<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" extends="struts-default">
<action name="JobAction" class="com.itpc.jats.struts.model.JobAction">
<result name="input">/jobs.jsp</result>
<result name="success">/NoSourcer.jsp</result>
</action>
</package>
<package name="struts-default" abstract="true">
<result-types>

<result-type name="json" class="org.apache.struts2.json.JSONResult"/>
<result-type name="dispatcher" class="org.apache.struts2.dispatcher.ServletDispatcherResult" default="true"/>
<result-type name="redirect" class="org.apache.struts2.dispatcher.ServletRedirectResult"/>
<result-type name="redirectAction" class="org.apache.struts2.dispatcher.ServletActionRedirectResult"/>

</result-types>
<interceptors>
<interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/>
<interceptor name="servletConfig" class="org.apache.struts2.interceptor.ServletConfigInterceptor"/>

</interceptors>
</package>

</struts>


************web.xml************

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>JATS</display-name>
<servlet>
<description>
</description>
<display-name>Servletretrieve</display-name>
<servlet-name>Servletretrieve</servlet-name>
<servlet-class>com.itpc.jats.struts.model.Servletretrieve</servlet-class>
</servlet>

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>Login.jsp</welcome-file>
</welcome-file-list>

</web-app>


************Jobs.jsp************

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jobs</title>
<link rel="stylesheet" type="text/css" href="style.css">
<sx:head parseContent="true" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="JavaScript" type="text/javascript">

function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="images/plus.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="images/minus.png">';
}
}



$(document).ready(function () { // Make sure the elements are loaded on the page
// Listen for a click event on the button
alert("ready");
$('#business').onchange(ajaxCallForContacts);
alert("afterready");

});
function ajaxCallForContacts()
{
alert("hi");
var business=document.getElementById("business");

var selecteddata = business.options[business.selectedIndex].value;

alert(selecteddata);
$.ajax("http://localhost:8082/JATS/Servletretrieve?business=selecteddata", {

data: { "get" : "runfunction", "action" : "json" },
method: "GET",
success: function (response) {
var items = [];
$.each(response, function(key) {
var val = response[key].url;
alert(val+key);
});
}
});
}



</script>


</head>
<body>

<div class="title_bg" style="background: #554D4E; color: #fff;">Jobs
Details</div>
<div
style="color: black; font-family: arial; font-size: 11px; font-style: italic; text-align: left; margin-top: 10px; margin-left: 186px;">
Fields marked with<span style="color: red"> * </span>are mandatory
</div>
<form name="frm" action="JobAction" method="post">

<div class="wrap2" style="width: 1000px; margin: 10px auto;">
<div style="width: 500px; float: left;">
<div
style="background: none repeat scroll 0% 0% rgb(115, 107, 108); text-align: left; z-index: 1; position: relative; margin-left: 48px; width: 395px;"
class="title_bg">
<div style="float: left;">Basic Information</div>
<div id="titleTextImg" style="float: right; margin-left: 50px;">
<a href="javascript:toggle5('contentDivImg', 'imageDivLink');"
id="imageDivLink"><img src="images/minus.png"></a>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
<div id="contentDivImg"
style="border-bottom: 2px solid #CCCCCC; border-left: 2px solid #CCCCCC; border-radius: 10px 10px 10px 10px; border-right: 2px solid #CCCCCC; display: block; margin: -8px auto 0; width: 400px; z-index: 0;">
<table align="center"
style="font-family: sans-serif; font-size: small; font-style: normal; padding: 15px; width: 358px; position: relative; right: 32px;">
<tbody>
<tr>
</tr>
<tr>
<s:select label="Business or Business Id" name="business" onchange="ajaxCallForContacts();" id="business"
headerKey="Select" headerValue="Select" list="ListOfClients"
listKey="%{business}" listValue="%{business}" required="true"
style="border:1px solid #ccc; background:#fff; width:165px;"/>
</tr>

<tr>
</tr>
<tr>
<s:select label="Hiring Manager" name="hiringManager" id="hiringManager"
headerKey="Select" headerValue="Select"
list="ListOfCliContacts" listKey="%{firstName}"
listValue="%{firstName}" required="true"
style="border:1px solid #ccc; background:#fff; width:165px;" />
</tr>
<tr>
</tr>
<tr>
<td align="center" style="padding-top: 10px;"><input
type="submit" name="submit" align="center" value="Save"
class="title_bg" style="width: 54px;" /></td>

</tr>




****myservlet *****

/**
* Servletretrieve
* @version 1.1
* @copyright iTPC
*/
package com.itpc.jats.struts.model;

import java.io.IOException;
import java.lang.String;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import net.sf.json.JSONArray;

import org.w3c.dom.Document;

/**
* Servlet implementation class Servletretrieve
*/
public class Servletretrieve extends HttpServlet {

/**
* @see HttpServlet#HttpServlet()
*/

/**
*
*/
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

String business = request.getParameter("business");

JsonObjectInsertion obj = new JsonObjectInsertion();


JSONArray jsonArray;

try {

((JsonObjectInsertion) obj).jsonObjectGenerated(response);

} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}


could you please help me out in configuring servlets with struts2 as early as possible...................

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Dependable dropdowns in jsp(struts2)
 
Similar Threads
Struts2 - Select - Ajax
Struts2 - linked autocompleter problem
dropdown selection in Struts2
how to populate dropdown depending on selection of another dropdown uisng ajax in struts2
struts2 drop down - unique values