Add an object to database by Ajax and Spring MVC - ajax

I follow this Link and i want to insert a user to database and then get the succes massage. My code insert successfuly the object to database but i get an error : com.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'login' cannot be null . this is my Ajax function :
<script type="text/javascript">
$(document).ready(function() {
function doAjaxPost() {
// get the form values
var name = $('#name_').val();
var prenom = $('#prenom_').val();
var login = $('#login_').val();
var password = $('#password_').val();
var role = $('#role_').val();
var enable = $('#enable_').val();
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/ajouter_user",
data: "name_=" + name + "&prenom_=" + prenom + "&login_="+ login+ "&password_="+password+"&role_="+role + "&enable_="+enable,
success: function(response){
// we have the response
$('#info').html(response);
$('#nom_').val('');
$('#prenom_').val('');
$('#login_').val('');
$('#password_').val('');
$('#role_').val('');
$('#enable_').val('');
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
this is my form :
<div id="info"></div>
<form:form name="ajf"
action="${pageContext.request.contextPath}/ajouter_user"
method="post" commandName="user">
<table id="tabmenu">
<tr>
<td id="idtab">Nom :</td>
<td><form:input type="text" path="nom" id="nom_"
class="round default-width-input" name="name_" /></td>
<td><form:errors path="nom" Class="errorbox" /></td>
</tr>
<tr>
<td id="idtab">Prénom :</td>
<td><form:input type="text" path="prenom" name="prenom_"
id="prenom_" class="round default-width-input" /></td>
<td><form:errors path="prenom" cssClass="errorbox" />
</tr>
<tr>
<td id="idtab">Login :</td>
<td><form:input type="text" path="login" name="login_"
id="login_" cssClass="round default-width-input" /></td>
<td><form:errors path="login" cssClass="errorbox" /></td>
</tr>
<tr>
<td id="idtab">Password :</td>
<td><form:input type="password" path="password"
id="password_" name="pass_" class="round default-width-input" /></td>
<td><form:errors path="password" cssClass="errorbox" /></td>
</tr>
<tr>
<td id="idtab">Séléctionner un rôle :</td>
<td><form:select path="role" id="role">
<form:option value="" label="" />
<form:option value="ROLE_ADMIN">Administrateur</form:option>
<form:option value="ROLE_USER">Simple utilisateur</form:option>
</form:select></td>
<td><form:errors path="role" cssClass="errorbox" /></td>
</tr>
<tr>
<td id="idtab">Activé :</td>
<td><form:input type="checkbox" value="true" path="enable"
id="enable_" /> Oui</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td><input
class="button round blue image-right ic-right-arrow"
type="submit" value="Créer" onclick="doAjaxPost()" /></td>
<td><input
class="button round blue image-right ic-right-arrow"
type="reset" value="Initialiser" /></td>
</tr>
</table>
</form:form>
The Controller :
#RequestMapping(value="/ajouter_user",method=RequestMethod.POST)
public #ResponseBody String addUser(#ModelAttribute User us, BindingResult result ){
String returnText;
if(!result.hasErrors()){
userservice.AddUser(us);
returnText = "User has been added to the list.";
}else{
returnText = "Sorry, an error has occur. User has not been added to list.";
}
return returnText;
}
Also I get get the message " User has been added to the list. " in another empty page not in my div which has the id="info" as it shown in the code. What is the problem ?
**////// the whole exception \\**
mai 22, 2013 12:16:10 PM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [Dispatcher] in context with path [/GestionDelegation] threw exception [Request processing failed; nested exception is org.springframework.dao.DataIntegrityViolationException: PreparedStatementCallback; SQL [insert into utilisateurs (login, password, nom, prenom,enable) values (?,?,?,?,?)]; Column 'login' cannot be null; nested exception is com.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'login' cannot be null] with root cause
com.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'login' cannot be null
at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:931)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:2941)
at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:1623)
at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:1715)
at com.mysql.jdbc.Connection.execSQL(Connection.java:3249)
at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:1268)
at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1541)
at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1455)
at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1440)
at org.apache.commons.dbcp.DelegatingPreparedStatement.executeUpdate(DelegatingPreparedStatement.java:102)
at org.springframework.jdbc.core.JdbcTemplate$2.doInPreparedStatement(JdbcTemplate.java:817)
at org.springframework.jdbc.core.JdbcTemplate$2.doInPreparedStatement(JdbcTemplate.java:1)
at org.springframework.jdbc.core.JdbcTemplate.execute(JdbcTemplate.java:586)
at org.springframework.jdbc.core.JdbcTemplate.update(JdbcTemplate.java:811)
at org.springframework.jdbc.core.JdbcTemplate.update(JdbcTemplate.java:867)
at org.springframework.jdbc.core.JdbcTemplate.update(JdbcTemplate.java:875)
at gestion.delegation.dao.ImplIUserDao.AddUser(ImplIUserDao.java:58)
at gestion.delegation.service.ImplIUserService.AddUser(ImplIUserService.java:22)
at gestion.delegation.controller.GestionUserController.addUser(GestionUserController.java:35)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.invokeHandlerMethod(HandlerMethodInvoker.java:176)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.invokeHandlerMethod(AnnotationMethodHandlerAdapter.java:426)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.handle(AnnotationMethodHandlerAdapter.java:414)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:790)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:719)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:644)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:560)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:368)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:109)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:83)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:97)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:100)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:78)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:54)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:35)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.authentication.www.BasicAuthenticationFilter.doFilter(BasicAuthenticationFilter.java:177)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:187)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:105)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.context.SecurityContextPersistenceFilter.doFilter(SecurityContextPersistenceFilter.java:79)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:380)
at org.springframework.security.web.FilterChainProxy.doFilter(FilterChainProxy.java:169)
at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:237)
at org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:167)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1002)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:585)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:312)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)
The method DAO
public boolean AddUser(User user) {
boolean t=true;
final String User_INSERT1 = "insert into utilisateurs (login, password, nom, prenom,enable) "
+ "values (?,?,?,?,?)";
final String User_INSERT2="insert into roles (login,role) values(?,?)";
/*
* On récupère et on utilisera directement le jdbcTemplate
*/
MessageDigestPasswordEncoder encoder = new MessageDigestPasswordEncoder("SHA");
String hash = encoder.encodePassword(user.getPassword(), "");
final String check ="select count(*) from utilisateurs where login = ?";
int result= getJdbcTemplate().queryForInt(check, new Object[]{String.valueOf(user.getLogin())});
if (result==0) {
getJdbcTemplate()
.update(User_INSERT1,
new Object[] {user.getLogin(),
hash, user.getNom(),
user.getPrenom(), user.getEnable(),
});
getJdbcTemplate().update(User_INSERT2, new Object[]{user.getLogin(),user.getRole()});
return t;
}
else { t = false ; return t;}
}

Write your data field as
data:{"name" : name , "prenom" : prenom , "login_" : login , "password_" :password , "role_" :role , "enable_" :enable },
insted of
data: "name_=" + name + "&prenom_=" + prenom + "&login_="+ login+ "&password_="+password+"&role_="+role + "&enable_="+enable,

Related

BadRequest Error in ajax with Spring MVC

I am trying post a request to my controller and everytime when I hit submit button it gives an error of bad request.
I am not able to find out what is wrong with the code.
Home.jsp
<div id="setReminder">
<label class="generalReminder" style="text-decoration: none;">General
Reminder</label>
<table>
<tr>
<td>Date</td>
<td><input type="text" readonly="readonly"
id="birthdayDate"></td>
</tr>
<tr>
<td>Time</td>
<td><input type="text" readonly="readonly" id="callTime"
></td>
</tr>
<tr>
<td>Message</td>
<td><textarea id="reminderTag" rows="5"></textarea></td>
</tr>
</table>
</div>
<div id="reminderDot" style="margin-top: 24%; position: relative;">
<button class="submitReminder" onclick="saveReminderDetails();">Submit</button>
</div>
Home.js
function saveReminderDetails(){
var x="";
x=scheduleBirthdayReminder();
if(x){
$.ajax({
type:"POST",
url:"submitBirthdayRequest.do",
data : {
birthdayDate :$("#birthdayDate").val(),
birthdayTime : $("#callTime").val(),
birthdayReminder : $("#reminderTag").val()
},
success : function(data) {
alert('data is'+data);
$("#birthdayDate").val('');
$("#callTime").val('');
$("#reminderTag").val('');
}
});
}
}
Controller.java
#RequestMapping(value="submitBirthdayRequest.do",method=RequestMethod.POST)
public #ResponseBody String submitSchedulerDetails(#RequestParam("birthdayDate")String birthdayDate,#RequestParam("callTime")String birthdayTime,#RequestParam("reminderTag")String reminderTag,HttpServletRequest request ){
System.out.println("adding reminder details with birthdayDate "+birthdayDate+"and time"+birthdayTime);
String userIdentity=((UserDetails)request.getSession(false).getAttribute("loginDetails")).getName();
try{
boolean schedulerObj= schedulerService.addSchedulerBirthdayDetails(userIdentity,birthdayDate, birthdayTime,reminderTag);
}catch(Exception e){
e.printStackTrace();
}
return birthdayTime;
}
Error
http://localhost:8083/Testing/submitBirthdayRequest.do 400 (Bad Request)
the names of the parameters in the request don't match the expected. Try changing the
#RequestParam("birthdayTime") String birthdayTime
#RequestParam("birthdayReminder") String reminderTag
or change the param names on the client side

AJAX Call, it returns NOT Acceptable using SPRING MVC Hibernate

I'm using Spring MVC Hibernate, I'm retrieving districts and blocks from the database. District is successfully displayed but when it comes to Blocks i'm not able to display them, what can be the problem?? please help
$(document).ready(function()
{
$('#districtcode').change(function()
{
$.ajax({
type: "POST",
url: "./districtenrollment.htm",
data: "categoryCode="+ this.value,
success : function (data){
$('#blockcode').empty();
$('#blockcode').append($("<option>").val("-1").text("Select"));
for (var i = 0; i < data.length; i++) {
$('#blockcode').append($("<option>").val(data[i][1]).text(data[i][0]));
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error:" + textStatus + " - exception:" + errorThrown);
}
});
});
});
<form:form method="POST" modelAttribute="disblo" autocomplete="off" >
<h3 id="heading"><u>Please Select</u></h3>
<table id="tab">
<tr>
<td>
User Id:
</td>
<td>
<form:input path="myid"/>
</td>
</tr>
<tr>
<td>
User name:
</td>
<td>
<form:input path="username"/>
</td>
</tr>
<tr>
<td>Select District</td>
<td>
<form:select path="mDistricts.districtcode" id="districtcode">
<form:option value="-1">Select </form:option>
<c:forEach var="c" items="${districtlist}">
<form:option value="${c.districtcode}" >${c.districtname}
</form:option>
</c:forEach>
</form:select>
</td>
</tr>
<tr>
<td>Select Block</td>
<td>
<form:select path="mBlocks.blockcode" id="blockcode">
<form:option value="-1">Select </form:option>
<c:forEach var="c" items="${blocklist}">
<form:option value="${c.blockcode}" >${c.blockname}
</form:option>
</c:forEach>
</form:select>
</td>
</tr>
</table>
</form:form>
`
This is my controller
#Autowired
private D_BDAO d_bdao;
#RequestMapping(value="Dist_Block.htm", method = RequestMethod.GET)
public ModelAndView getmodel(#ModelAttribute("disblo") usertestDisBlock db, HttpSession session) {
List<MDistricts> districtlist = d_bdao.getAllCategory();
org.springframework.web.servlet.ModelAndView model = new org.springframework.web.servlet.ModelAndView("Dist_Block");
model.addObject("districtlist", districtlist);
System.out.println("after model");
return model;
}
#RequestMapping(value = "/districtenrollment.htm", method = RequestMethod.POST)
public #ResponseBody
List<MBlocks> getmodel1(#RequestParam("categoryCode") Integer categoryCode) {
System.out.println("categoryCode="+categoryCode);
List<MBlocks> blocklist;
System.out.println("i'm here in ajax controller ");
blocklist = d_bdao.getAllBlocks(categoryCode);
System.out.println("i'm here after b_dao ");
System.out.println("c " + blocklist);
return blocklist;
}
This is my DAO Implementation
#Override
public List<MDistricts> getAllCategory() {
org.hibernate.Session session = sessionFactory.openSession();
session.beginTransaction();
String hql = "from MDistricts";
Query query = session.createQuery(hql);
List<MDistricts> districtlist = query.list();
session.close();
return districtlist;
}
#Override
public List<MBlocks> getAllBlocks(Integer districtcode) {
org.hibernate.Session session = sessionFactory.openSession();
session.beginTransaction();
SQLQuery q = session.createSQLQuery("select blockname, blockcode from test_schema.m_blocks where districtcode=:districtcode ORDER BY blockname");
q.setParameter("districtcode", districtcode);
List<MBlocks> blocklist = q.list();
session.close();
System.out.println("blocklist" + blocklist);
return blocklist;
}
I am not a telepath. But I can make an assumption (cause you don't provide enough information: stacktrace of the error, entity classes).
This code is incorrect
SQLQuery q = session.createSQLQuery("select blockname, blockcode from test_schema.m_blocks where districtcode=:districtcode ORDER BY blockname");
q.setParameter("districtcode", districtcode);
List<MBlocks> blocklist = q.list();
session.createSQLQuery() doesn't return List<MBlocks>, but List<Object[]>. Try this code with HQL:
Query q = session.createQuery(
"from MBlocks where districtcode = :districtcode order by blockname");
q.setParameter("districtcode", districtcode);
List<MBlocks> blocklist = q.list();
And try to log errors.

spring mvc return modelandview after ajax call

in my form I have table to show some of customer data.user can click on row to see all of customer data.
<div class="container">
<table class="table table-bordered" style="direction: rtl">
<thead>
<tr>
<th style="text-align: center">customer name</th>
<th style="text-align: center">customer ID</th>
</tr>
</thead>
<tbody>
<c:forEach items="${customers}" var="customer" varStatus="loop">
<tr onclick="retrieveCustomer('${loop.index}')">
<td id="id-${loop.index}">${customer.customerId}</td>
<td>${customer.customerName}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script>
function retrieveCustomer(id) {
debugger;
$.ajax({
url: "<%=request.getContextPath()%>/show_selected_customer",
data: {customerId: $('#id-' + id).text()},
type: "GET",
success: function (response) {
},
error: function (xhr, status, error) {
alert(error);
}
});
};
</script>
and in my controller:
#RequestMapping(value = "/show_selected_customer", method = RequestMethod.GET)
public ModelAndView showSelectedCustomer(#RequestParam("customerId") String customerId) {
Map<String, Object> model = new HashMap<>();
Customer customer = coreService.getCustomer(customerId);
model.put("customer", customer);
return new ModelAndView("showCustomerData", model);
}
tiles:
<definition name="showCustomerData" extends="base.definition">
<put-attribute name="title" value="customer data"/>
<put-attribute name="content" value="/WEB-INF/jsp/show_customer_data.jsp"/>
</definition>
until now every thing work correctly.
my problem is, it doesn't show show_customers.jsp page,and even I have no error in my log.
what is my problem,Is because of ajax call? I did`t use #responsebody and want to show customers.jsp page with return modelandview. thank you
Use the response body annotation and convert your entity to JSON and return it instead.

Passing image to JSP in Spring MVC java with mango

Hi I am reading image from MongoDB and trying to pass that to JSP page but it is not passing properly from my controller. i am thinking i am almost edge to the solution but not getting exactly where i am doing mistake. Please let me know if you find any mistake.
here insertMedia method reading image from file and storing into DB and then returning back that image.
i am passing userMediaSave as image value to JSP, you can get that at tag like
img src=${userMediaSave} alt="Profile images"
My Controller:
#RequestMapping(value = "/userMediaSave", method = RequestMethod.GET)
public ModelAndView mediaLoadSuccess(HttpServletRequest request,HttpServletResponse response,
#ModelAttribute("mediaBean") MediaBean mediaBean) throws IOException, ServletException {
ModelAndView model = null;
File filePart = mediaBean.getMediaImage();
if (filePart != null) {
InputStream inputStream = new FileInputStream(filePart);
GridFSDBFile imageForOutput = null;
try {
imageForOutput = loginDelegate.insertMedia(inputStream, request.getContentType(), filePart.getName());
mediaBean.setExistedMedia(imageForOutput);
OutputStream out= null;
if(imageForOutput!=null){
InputStream is = imageForOutput.getInputStream();
ByteArrayOutputStream buffer = new ByteArrayOutputStream();
int nRead;
byte[] data = new byte[16384];
while ((nRead = is.read(data, 0, data.length)) != -1) {
buffer.write(data, 0, nRead);
}
byte[]imagenEnBytes = buffer.toByteArray();
buffer.flush();
response.setContentType("image/jpg" );
response.setContentLength(imagenEnBytes.length);
model = new ModelAndView("userMedia");
request.setAttribute("userMediaSave", imagenEnBytes);
return model;
} else {
System.out.println("inside uploadMedia page -ve");
}
} catch (SQLException e) {
e.printStackTrace();
} finally{
//out.close();
}
}
return model;
}
JSP is:
<body onload="checkMessage()">
<form:form id="mediaForm" method="get" action="userMediaSave" modelAttribute="mediaBean">
<table border="1" cellpadding="1" cellspacing="1"
style="width: 500px;" align="center">
<tbody>
<tr>
<td colspan="4" align="center">Name : Welcome to Media App</td>
</tr>
<tr>
<td rowspan="3">Profile Image</td>
<td>Upload Images</td>
<td><input type="file" name="mediaImage" /></td>
</tr>
<tr>
<td> </td>
<td><input name="upload" type="submit" value="Upload" /></td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="1" cellspacing="1"
style="width: 500px;" align="center">
<tbody>
<tr>
<td>User has some existed Media Album</td>
</tr>
<tr>
<td>
<img src=${userMediaSave} alt="Profile images" style="width:100px;height:100px;">
</td>
</tr>
</tbody>
</table>
</form:form>
am i passing image from controller to JSP properly? if not please let me know which way i have to pass it.

How to expand all drill down rows while loading a datatable, including the hidden rows

I'm working on creating a datatable that has a drill down (row details) sub datatable as per the requirement. I was able to create the sub datatable when using drill down (row details) approach, but finding it hard to expand all of these rows that have drill down associated while loading the table. Here is the code I have and it works and expands all drill down rows on the current paginated table., but when clicking on the next pagination (number or page), the rows shows as expand (you know you can see the 'minus' (close) icon image) but no sub datatable. As far as I understood, its because, when I'm trying to simulate a click on the 'img' attribute associated for a drill down row, its being applied successfully for the current rows in the current page, but for the rest, which are not in the dom, the script says that the sub datatable is undefined. Any ideas or suggestions around this would help me a lot..
Below is the code snippet -
Table HTML source code -
<table id="mastertable" class="table table-striped table-bordered table-hover dataTable" aria-describedby="sample-table-2_info">
<thead>
<tr role="row">
<!-- <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending" style="width: 255px;"></th> -->
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending" style="width: 25%;">Project Name</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending" style="width: 10%;">Status</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">Start Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">End Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">FCS Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">Project Phase</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 15%;">Defects</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr>
<td class=" ">
<img src="/tester/theme/v_1_0/app-images/details_open.png" masterProject="master-ROORKELA"/>
ROORKELA <font color="black">(System Project)</font>
// THIS IS THE SUB DATATABLE HIDDEN IN DIV AND THE ID OF THE DIV IS STORED IN THE IMG ATTRIBUTE ABOVE UNDER THE 'masterProject' attribute - [masterProject="master-ROORKELA"]
<div class="hide" id="master-ROORKELA">
<table id="subProjects-table" class="table table-striped table-bordered table-hover subTable" aria-describedby="sample-table-2_info">
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 255px;">Project Name</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 186px;">Status</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Start Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">End Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Targetted Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Project Phase</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Defects</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr>
<td class=" " style="width: 26%;text-align:center;vertical-align: middle;">
Sirish
</td>
<td class="hidden-480 " style="width: 10%;">
<span class="label label-sm label-warning">Minor Impact</span>
</td>
<td class=" " style="width: 10%;">Feb 12 2013</td>
<td class="hidden-480 " style="width: 10%;">Nov 12 2013</td>
<td class=" " style="width: 10%;">Jan 16 2014</td>
<td class=" " style="width: 10%;">EFT</td>
<td class=" " style="width: 15%;">
22 defects
</tr>
</tbody>
</table>
</div>
</td>
<td class="hidden-480 ">
<span class="label label-sm label-warning">Minor Impact</span>
</td>
<td class=" ">Feb 12 2013</td>
<td class="hidden-480 ">Nov 12 2013</td>
<td class=" ">Jan 16 2014</td>
<td class=" ">TESTING</td>
<td class=" ">22 defects
</tr>
</tbody>
</table>
Defining the initial table -
var oTable = $('#mastertable').dataTable( {
"aLengthMenu": [[5,10, 25, 50, 100 , -1], [5,10, 25, 50, 100, "All"]],
"iDisplayLength" : 10,
"aoColumnDefs": [
{"sWidth": "25%", "aTargets": [ 0 ] },
{"sWidth": "10%", "aTargets": [ 1 ] },
{"sWidth": "10%", "aTargets": [ 2 ] },
{"sWidth": "10%", "aTargets": [ 3 ] },
{"sWidth": "10%", "aTargets": [ 4 ] },
{"sWidth": "10%", "aTargets": [ 5 ] },
{"sWidth": "15%", "aTargets": [ 6 ] },
{"sClass": "align-left" , "aTargets": [ 0,1,4, 2,3,5,6] }
],
"sDom": '<"row"<"col-sm-4"l><"col-sm-6"f><"col-sm-1 saveas_div"T><"col-sm-1 filtering_div"C>r>t<"row"<"col-sm-6"i><"col-sm-6"p>>',
"oTableTools": {
"aButtons": [
{
"sExtends": 'csv',
"sButtonText":'Export as CSV',
"mColumns":"visible"
}
]
},
"aoColumns": [
{ "bSortable": true },
null, null, null,null, null,
{ "bSortable": true }
],
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
}
});
Associating click events on the 'img' attributes in the table -
oTable.$('td').each( function () {
$(this).on('click','img', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_close.png";
var masterProject = $(this).attr("masterProject");
var html = $("#"+masterProject).html();
console.log(html); // THIS IS WHERE I SEE AS UNDEFINED FOR HIDDEN TR ELEMENTS WHICH ARE HIDDEN DURING PAGINATION
oTable.fnOpen(nTr, html, 'details');
}
} );
$(this).find('img').trigger('click'); // THIS IS WHERE I"M SIMULATING CLICK EVENT TO EXPAND ALL ROWS WHILE LOADING PAGE BY DEFAULT.
});
I tried using the - fnDrawCallback method to simulate the click events, but its giving me weird results, meaning rows are expanded on alternate pages like 1,3,5 but on consecutive pages.
Sorry for this monologue, as am just trying to explain the detail of the problem.
Please pass on your valuable suggestions or solutions..
Many thanks,
Sirish.
So I added functionality on button to collapse all and expand all child rows. that will work with pagination, search and
<script>
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full CallStack:</td>'+
'<td style="text-align:left;">'+d.call_stack+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var isCollapse = 1;
var visited_cehck = 0;
var table = $('#example').DataTable( {
"aaData": $Json_data,
"aoColumns": [
{ "sTitle": "col1", "mData": "col1" },
{ "sTitle": "col2", "mData": "col2" },
{ "sTitle": "col3", "mData": "col3" },
{ "sTitle": "col4", "mData": "col4" },
{ "sTitle": "col5", "mData": "col5" },
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
}
]
} );
//This function gets the length of the row and collapse and
//expend all the rows depending on the current state of the row:
function collapse_exand_rows(){
var table_length = $('#example tbody tr').length;
for (var i = 0; i < table_length; i++) {
var tr = $('.details-control').parents('tr').eq(i);
var row = table.row( tr );
if(!tr.hasClass('visited_child') || visited_cehck != 1){
if ( isCollapse === 1 ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
}
}
}
//This event handles click for on each child row to show and hide rows.
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var row = table.row( tr );
visited_cehck = 1;
tr.addClass('visited_child');
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
//This event handles navigation bar below the report to show and hide all the visible rows
$('.dataTables_paginate').bind('click', '.details-control', function(event) {
if(visited_cehck === 1){
return false;
}
collapse_exand_rows();
});
//This event handles collapse expand button click to show and hide all the visible rows
$('#collapse_expand').on('click', function(event) {
visited_cehck = 0;
if(isCollapse === 1){
$('#collapse_expand').text('Collapse All');
isCollapse = 0;
}
else{
$('#collapse_expand').text('Expand All');
isCollapse = 1;
}
collapse_exand_rows();
});
//This event handles dropdown to show and hide all the visible rows
$('select').on('change', function (event) {
collapse_exand_rows();
});
$("thead > tr", '#example').click(function(event) {
collapse_exand_rows();
})
$(':input').change(function(event) {
collapse_exand_rows();
});
});
</script>
do something like this:
var table_length = $("#mastertable tr").length;
var paginate_button = $('.paginate_button');
for(var i = 0; i< table_length; i++){
var tr = $('#mastertable tbody td.details-control').eq(i).parents('tr');
var row = table.row(tr);
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
if you have pagination :
isCollapse === 0
paginate_button.on('click',function(){
table_length = $("#example tr").length;
if ( isCollapse === 1 ) {
for(var i = 0; i< table_length; i++){
var tr = $('#example tbody td.details-control').eq(i).parents('tr');
var row = table.row(tr);
row.child.hide();
tr.removeClass('shown');
}
}
else {
// Open this row
for(var i = 0; i< table_length; i++){
var tr = $('#example tbody td.details-control').eq(i).parents('tr');
var row = table.row(tr);
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
}
});

Resources