Reputation: 1
I am using JSP, STRUTS2, AJAX, jQuery, and MySQL to populate dependent dropdowns. I would like to know why my second dropdown is not getting populated? Please let me know what I am missing here.
AjaxJsonAction.java
package com.action;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import org.json.JSONArray;
import com.opensymphony.xwork2.Action;
public class AjaxJsonAction implements Action{
private Map<String, String> stateMap = new LinkedHashMap<String, String>();
private String dummyMsg;
//Parameter for Jquery
private String countryName;
private String eventName;
//
// private Map<String, String> eventList = new LinkedHashMap<String, String>();
// private Map<String, String> eventDateList = new LinkedHashMap<String, String>();
private ArrayList<Event> eventList;
private ArrayList<EventShow> eventShowList;
private Map<String, String> edList = new LinkedHashMap<String, String>();
public Map<String, String> getStateMap() {
return stateMap;
}
public String getDummyMsg() {
return dummyMsg;
}
public String getCountryName() {
return countryName;
}
public void setStateMap(Map<String, String> stateMap) {
this.stateMap = stateMap;
}
public void setDummyMsg(String dummyMsg) {
this.dummyMsg = dummyMsg;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
// public Map<String, String> getEventList() {
// return eventList;
// }
// public void setEventList(Map<String, String> eventList) {
// this.eventList = eventList;
// }
//
// public Map<String, String> getEventDateList() {
// return eventDateList;
// }
// public void setEventDateList(Map<String, String> eventDateList) {
// this.eventDateList = eventDateList;
// }
public String getEventName() {
return eventName;
}
public void setEventName(String eventName) {
this.eventName = eventName;
}
public ArrayList<Event> getEventList() {
return eventList;
}
public void setEventList(ArrayList<Event> eventList) {
this.eventList = eventList;
}
public ArrayList<EventShow> getEventShowList() {
return eventShowList;
}
public void setEventShowList(ArrayList<EventShow> eventShowList) {
this.eventShowList = eventShowList;
}
public Map<String, String> getedList() {
return edList;
}
public void setedList(Map<String, String> edList) {
this.edList = edList;
}
private List<EventShow> eventShows;
public List<EventShow> getEventShows() { return eventShows; }
public String execute() {
// dummyMsg = "Ajax action Triggered";
// return SUCCESS;
System.out.println("inside execute.");
populateEvent();
System.out.println("eventList Count="+eventList.size());
// populateShow(eventName);
return "success";
}
public void populateEvent() {
System.out.println("inside populateEvent.");
Connection conn = null;
try {
String URL = "jdbc:mysql://localhost:3306/bookmyshow_dates";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(URL, "dra2", "dr@2");
String sql = "SELECT DISTINCT * FROM EVENTS";
// String sql ="SELECT * FROM user3333";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
eventList = new ArrayList<Event>();
while (rs.next()) {
// eventList.put(rs.getString("EventId"),rs.getString("EventName"));
eventList.add(new Event(rs.getInt("EventId"),rs.getString("EventName")));
}
} catch (Exception e) {
// return "error";
}
finally {
if (conn != null) {
try {
conn.close();
} catch (Exception e) {
}
}
}
System.out.println("inside populateEvent End.");
// return "getEventList";
}
// public void populateShow(String eventName) {
// public ArrayList<EventShow> populateShow() {
// public Map<String, String> populateShow() {
public void populateShow() {
String eventId="1";
System.out.println("parameter:"+eventId);
Connection conn = null;
try {
String URL = "jdbc:mysql://localhost:3306/bookmyshow_dates";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(URL, "dra2", "dr@2");
String sql="SELECT ShowId,EventDate,\r\n" +
"CASE \r\n" +
" WHEN DATEDIFF(EventDate,NOW()) = 0 THEN CONCAT('Today',', ',DAY(EventDate),' ',MONTHNAME(EventDate))\r\n" +
" WHEN DATEDIFF(EventDate,NOW()) = 1 THEN CONCAT('Tomorrow',', ',DAY(EventDate),' ',MONTHNAME(EventDate))\r\n" +
" WHEN DATEDIFF(EventDate,NOW()) > 1 THEN CONCAT(DAYNAME(EventDate),', ',DAY(EventDate),' ',MONTHNAME(EventDate))\r\n" +
"END AS EventDay\r\n" +
",es.EventId\r\n" +
"FROM EventShows es\r\n" +
"INNER JOIN EVENTS e ON es.EventId = e.EventId AND (EventDate>=NOW())\r\n" +
"WHERE e.EventId='"+eventId+" ';";
// String sql ="SELECT * FROM user3333";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
eventShowList = new ArrayList<EventShow>();
while (rs.next()) {
eventShowList.add(new EventShow(rs.getInt("ShowId"),rs.getString("EventDay"),rs.getInt("EventId")));
// eventDateList.put(rs.getString("EventId"), rs.getString("EventName"));
edList.put(rs.getString("EventId"), rs.getString("EventName"));
}
} catch (Exception e) {
// return "error";
}
finally {
if (conn != null) {
try {
conn.close();
} catch (Exception e) {
}
}
}
System.out.println("eventShowList:"+eventShowList.size());
// JSONArray jsArray = new JSONArray(eventShowList);
// Converts JSON string into a List of Product object
// List<EventShow> eventShows = ((List<EventShow>) eventShowList);
// return eventShowList;
}
}
Event.java
package com.action;
public class Event {
private int eventId;
private String eventName;
Event(int eventId, String eventName)
{
this.eventId = eventId;
this.eventName = eventName;
}
public int getEventId() {
return eventId;
}
public void setEventId(int eventId) {
this.eventId = eventId;
}
public String getEventName() {
return eventName;
}
public void setEventName(String eventName) {
this.eventName = eventName;
}
}
EventShow.java
package com.action;
public class EventShow {
private int showId;
private String eventDate;
private int eventId;
EventShow(int showId, String eventDate, int eventId)
{
this.showId = showId;
this.eventId = eventId;
this.eventDate = eventDate;
}
public int getshowId() {
return showId;
}
public void setShowId(int showId) {
this.showId = showId;
}
public String getEventDate() {
return eventDate;
}
public void setEventDate(String eventDate) {
this.eventDate = eventDate;
}
public int getEventId() {
return eventId;
}
public void setEventId(int eventId) {
this.eventId = eventId;
}
}
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!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="json-default">
<action name="getEvents" class="com.action.AjaxJsonAction" >
<result name="success">/index.jsp</result>
<result name="error">/error.jsp</result>
</action>
<action name="populateEventDate" class="com.action.AjaxJsonAction" method="populateShow">
<!-- <result type="json">/index.jsp</result> -->
<result name="success">/index.jsp</result>
</action>
</package>
</struts>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Struts2</display-name>
<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>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
index.jsp
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>AJAX in Struts 2 using JSON and jQuery</title>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#country').change(function(event) {
var country = $("select#country").val();
$.getJSON('ajaxAction', {
countryName : country
}, function(jsonResponse) {
$('#ajaxResponse').text(jsonResponse.dummyMsg);
var select = $('#states');
select.find('option').remove();
$.each(jsonResponse.stateMap, function(key, value) {
$('<option>').val(key).text(value).appendTo(select);
});
});
});
// $('#event').change(function(event) {
// var country = $("select#event").val();
// // $.getJSON('<s:url action='populateEventDate'/>', {
// $.getJSON('populateEventDate', {
// eventName : country
// }, function(jsonResponse) {
// $('#ajaxResponse').text(jsonResponse.dummyMsg);
// var select = $('#eventDate');
// select.find('option').remove();
// $.each(jsonResponse.eventDateList, function(key, value) {
// $('<option>').val(key).text(value).appendTo(select);
// });
// });
// // $.ajax({
// // type: "POST",
// // url: "<s:url action='populateEventDate'/>",
// // data: {'eventName': country},
// // contentType: "application/json; charset=utf-8",
// // dataType: "json",
// // success: function(msg) {
// // $("#eventDate").get(0).options.length = 0;
// // $("#eventDate").get(0).options[0] = new Option("Select event", "-1");
// // $.each(msg.d, function(index, item) {
// // $("#eventDate").get(0).options[$("#eventDate").get(0).options.length] = new Option(item.Display, item.Value);
// // });
// // },
// // error: function(meg) {
// // $("#eventDate").get(0).options.length = 0;
// // alert("Failed to load events."+meg);
// // }
// // });
// });
$('#event').change(function(event) {
var eName = $("select#event").val();
// $.getJSON('populateEventDate', {
// eventName : eName
// }, function(jsonResponse) {
// $('#ajaxResponse').text(jsonResponse.dummyMsg);
// var select = $('#eventDate');
// select.find('option').remove();
// $.each(jsonResponse.stateMap, function(key, value) {
// $('<option>').val(key).text(value).appendTo(select);
// });
// });
$.ajax({
type:'POST',
dataType:'json',
// url:'populateEventDate?eventName='+eName,
url: "<s:url action='populateEventDate'/>",
data: {'eventName': eName},
// dataType: "text",
contentType: "application/json; charset=utf-8",
success: function(jsonResponse) {
$('#ajaxResponse').text(jsonResponse.dummyMsg);
var select = $('#eventDate');
select.find('option').remove();
$.each(jsonResponse.eventDateList, function(key, value) {
$('<option>').val(key).text(value).appendTo(select);
});
},
error: function(jsonResponse) {
$("#eventDate").get(0).options.length = 0;
alert("Failed to load events."+jsonResponse);
}
});
});
});
</script>
</head>
<body>
<h3>AJAX calls to Struts 2 using JSON and jQuery</h3>
<br />
<br />
<s:select name="event" id="event" list="eventList" listKey="eventId"
listValue="eventName" headerKey="0" headerValue="Event"
label="Select a event" />
<br />
<br />
<s:select id="eventDate" name="eventDate" list="{'Select eventdate'}"
label="Select eventdate" />
</body>
</html>
Also, I am getting JSON response as NULL in the function: $('#event').change(function(event)
.
Upvotes: 1
Views: 925
Reputation: 1
Thanks Parth for suggestion. However I got the idea from your post and have to modified struts.xml to include below actions
<action name="getEvents" class="qBook.AjaxJsonAction" >
<result name="success">/index.jsp</result>
</action>
<action name="ajaxAction" class="qBook.AjaxJsonAction" method="TestABC">
<result type="json">/index.jsp</result>
</action>
First action - gets the data for first dropdown on page load and second action gets the data based selected value of first down with help of AJAX call. Your comment really helped me, Once again 'Thanks to you'.
Upvotes: 0
Reputation: 2856
You need to make some corrections.
Step 1: In struts.xml
file
<action name="populateEventDate" class="com.action.AjaxJsonAction" method="populateShow">
<result type="json">/index.jsp</result>
</action>
Step 2: In AjaxJsonAction.java
public String populateShow() {
edList.put("1", "Monday");// Fill this map with your database values
return "success";
}
Step 3: In index.jsp
-> Use jquery js from cdn and use below code
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#event').change(function(event) {
var event = $("select#event").val();
$.getJSON('populateEventDate', {
eventName : event
}, function(jsonResponse) {
$('#ajaxResponse').text(jsonResponse.dummyMsg);
var select = $('select#eventDate');
select.find('option').remove();
$.each(jsonResponse.edList, function(key, value) {
$('<option>').val(key).text(value).appendTo(select);
});
});
});
});
</script>
Provide me reply if you get any more error.
Upvotes: 1