Upgrading to Tapestry5.1 Javascript Error - java

Iam upgrading my app from Tapestry 5.0.18 to 5.1.0.5 and i get following javascript error. I know there was a fix for WaitForPage() for partial ajax responses in 5.1.0.5. But i still keep gettin the java script error. Following is my code.
<table t:id="itemPanel" t:type="CustomSlidingPanel" closed="true" subject="literal:itemes" blockId="literal:itemPanel_content" linkToDisplay="New item" actionLink="newitem" zoneOnAction="itemZone"/>
<div id="itemPanel_content" style="display: none;">
<table t:id="itemGrid" t:type="customGrid" source="item" row="itemRow" clientId="literal:itemGrid" rowId="itemRow.itemId" add="edit" include="type, item, price,store,startDate, endDate, ynprimary" inplace="true">
<t:parameter name="editCell">
<t:actionlink t:id="editItem" t:zone="itemZone" t:context="itemRow.id">Edit</t:actionlink>
</t:parameter>
</table>
</div>
<t:zone t:id="itemZone" visible="false">
<t:delegate to="itemBlock" />
</t:zone>
<t:block t:id="itemBlock">
<div id="newitemDiv" class="dataEntry"/>
<div id="itemDivParent">
<div id="itemDiv" class="dataEntry">
<t:form t:id="itemForm" name="itemForm">
<t:if test="itemObject.id">
<script type="text/javascript">insertDivElement('itemGrid${itemObject.id}','itemDivParent','itemDiv','newitemDiv','8');</script>
</t:if>
<t:if test="newitem">
<script type="text/javascript">createNewDivElement('itemDivParent','itemDiv','newitemDiv');</script>
</t:if>
<table t:id="itemComponent" t:type="item" itemObject="itemObject"/>
<div style="width: 50%" align="center">
<input t:id="saveitem" t:type="Submit" class="button" value="Save" /> <input type="button" class="button" value="Cancel" onClick="hideDivs('itemDivParent','itemDiv','newitemDiv');" /> <t:if test="itemImported" negate="true">
<input t:id="deleteitem" t:type="SubmitContext" class="button" value="Delete" t:context="itemObject.id" /> </t:if>
</div>
<br />
</t:form>
</div>
</div>
</t:block>
Here is the error message that i get. Looks like something wrong with "Tapestry.waitForPage(event)" which is in Tapestry.js. Can some one help?
Message: Object doesn't support this property or method
Line: 197
Char: 1
Code: 0
URI: http://localhost:8080/ItemEntry?itemId=131686
<a id="editItemPrice" onclick="javascript:Tapestry.waitForPage(event);" href="itementry.edititemprice/6578">Edit</a>

I believe this might be related to the combine scripts setting as discussed on the mailing list. Set -Dtapestry.combine-scripts=false as a VM argument or add this to your AppModule:
public static void contributeApplicationDefaults(final MappedConfiguration<String, String> configuration) {
configuration.add(SymbolConstants.COMBINE_SCRIPTS, "false");
}
Do you have a reason for not upgrading to 5.3 though? It has a bunch of improvements over 5.1.

Related

Thymeleaf if else [duplicate]

This question already has answers here:
How to do if-else in Thymeleaf?
(14 answers)
Closed 1 year ago.
I don't know how to wrote this kind of insruction using Thyeleaf.
I've got my view made with html.
<#if updateClient??>
<h2>Modifica del prodotto - ${updateClient.nome}</h2>
<div style="margin: 20px;">
<form method="POST" action="update" id="updateClient">
<input type="hidden" name="id" value="${updateClient.id}"/>
<div>
<label for="name">Name</label>
<input type="text" name="nome" id="nome" value="${updateClient.nome}" />
</div>
<div>
<input type="submit" name="invia" value="Update" />
</div>
</form>
</div>
<#else>
<h2>New Client</h2>
<div style="margin: 20px;">
<form method="POST" action="add" id="newDataClient">
<div>
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" value="" />
</div>
<div>
<input type="submit" name="invia" value="Add" />
</div>
</form>
</div>
</#if>
This was written using FreeMarker, but I need to use Thymeleaf.
I know simple Thymeleaf instructions, but I don't know how to do this. I read Thymeleaf instructions, and I find how to iterate a list of variables, but not how to create this structure using if and else. And if it's possible create something like this.
<div th:if="${updateClient.nome}">
<div>Edit Form</div>
</div>
<!-- ELSE -->
<div th:unless="${updateClient.nome}">
<div>New Form</div>
</div>

Spring Boot with thymeleaf method not calling [duplicate]

This question already has an answer here:
Trailing slash is not inserted in Spring Boot application
(1 answer)
Closed 5 years ago.
I'm trying to call a java method with post mapping on a button click using form actions, I tried a lot, unfortunately, the method is not calling, shocking to me is that the nearly same code is working absolutely fine in some other project.
Here's the controller class:
#Controller
#RequestMapping("/question")
public class QuestionController {
#Autowired
GenericClient client;
#GetMapping("/")
public ModelAndView createDashboardView(){
ModelAndView modelAndView = new ModelAndView("views/question");
List<QuestionDTO> questions = client.genericClient(null, "question/fetchAllQuestions");
QuestionsList questionsList = new QuestionsList();
questionsList.setId1(questions.get(0).getId());
questionsList.setQuestion1(questions.get(0).getDescription());
questionsList.setId2(questions.get(1).getId());
questionsList.setQuestion2(questions.get(1).getDescription());
questionsList.setId3(questions.get(2).getId());
questionsList.setQuestion3(questions.get(2).getDescription());
modelAndView.addObject("questionsList", questionsList);
return modelAndView;
}
#PostMapping("/save")
public ModelAndView onSaveClick(QuestionsList questionsList, BindingResult result){
ModelAndView modelAndView = new ModelAndView("views/question");
System.out.println("Inside method");
System.out.println(questionsList.getQuestion2());
return modelAndView;
}
}
Here's the HTML file with Thymeleaf:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="views/master">
<body>
<div layout:fragment="page-content">
<div class="container-fluid">
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid errmsg" id="dvError"
visible="false">
<div style="width: 100%; text-align: center;">
<div class="message success">
<p></p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box blue tabbable">
<div class="portlet-title">
<h4>
<i class="icon-reorder"></i><span class="hidden-480">Add/Edit
Questions</span>
</h4>
</div>
<div class="portlet-body form">
<div class="tabbable portlet-tabs">
<ul class="nav nav-tabs">
</ul>
<div class="tab-content">
<div class="tab-pane active" id="portlet_tab1">
<!-- BEGIN FORM-->
<div class="control-group"></div>
</div>
<div class="mytable" style="overflow: auto;">
<div class="control-group">
<div class="controls questionMar01 questionColor ">
<!-- Note:- Please enter ## in your question where you want company name -->
</div>
</div>
<form class="form-horizontal" action="#" th:action="#{/question/save}" th:object="${questionsList}" method="POST">
<div>
<input th:field="*{question1}" style="height:30px" id="txtQuestion1"
placeholder="Enter Question 1 Here" class="m-wrap large"
type="text" />
<br/><br/>
<input th:field="*{question2}" style="height:30px" id="txtQuestion2"
placeholder="Enter Question 2 Here" class="m-wrap large"
type="text"/>
<br/><br/>
<input th:field="*{question3}" style="height:30px" id="txtQuestion3"
placeholder="Enter Question 3 Here" class="m-wrap large"
type="text" />
</div>
<div> </div>
<div class="form-actions">
<button type="submit" class="btn blue okMark">Save</button>
<!-- <button id="btncancel" class="btn cancel"
OnClick="btncancel_Click">Cancel</button> -->
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
</div>
</body>
</html>
Here I'm trying to call /question/save/ post mapping on Save button click, unfortunately, onSaveClick method is not calling. Please help me out. Thanks
Project Structure:
Network tab after Save button click:
More information:
2018-01-18 17:40:15.741 INFO 9264 --- [ restartedMain] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/question/],methods=[GET]}" onto public org.springframework.web.servlet.ModelAndView com.beezyadmin.controller.QuestionController.createDashboardView()
2018-01-18 17:40:15.742 INFO 9264 --- [ restartedMain] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/question/save],methods=[POST]}" onto public org.springframework.web.servlet.ModelAndView com.beezyadmin.controller.QuestionController.onSaveClick(com.beezyadmin.dto.QuestionsList,org.springframework.validation.BindingResult)
/question/save is getting mapped as shown in the logs and also I'm able to call the method directly using PostMan, however, I'm unable to do so from Thymeleaf html page on Save button click.
Source code from view page source:
Finally, there is something wrong the layout file, which causes clicking button perform an GET instead POST automatically for some reason.
After removing layout file every thing works.
Your controller has mapping "/question/save"
BUT
Your th:action has a url of "/question/save/"
Watch out the trailing slash.

How to apply struts2 tags on existing jsp file without affecting its css and js

I was given a HTML page I changed it's extension .jsp. I want to make dynamic web application using struts. My Html page code is like this..
<div id="content">
<div class="subpage-border-top">
<div class="subpage-border-bottom">
<div class="subpage-border-mid">
<div class="loginpage-bottom">
<h2>Login</h2>
<div class="loginpage-mid">
<span>Enter your email address and password to login</span>
<ul>
<li><label>Email</label>
<div class="right_input">
<input type="text" value=""
onblur="if(this.value=='')this.value=this.defaultValue;"
onfocus="if(this.value==this.defaultValue)this.value='';"
class="o-que email-text" />
<!-- <strong> dshmbf,sdmhfdi</strong>-->
</div></li>
<li><label>Password</label>
<div class="right_input">
<input type="password" value=""
onblur="if(this.value=='')this.value=this.defaultValue;"
onfocus="if(this.value==this.defaultValue)this.value='';"
class="o-que email-text" />
</div> <a href="#" class="forget-password">(Forget Your
Password)</a></li>
<li>
<div class="remember">
<input type="checkbox" name="" />Remember Me
</div>
<div class="login-button">
<div>
<input type="submit" value="Login" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
So it's layout looks like this..
And according to a tutorial I want to use struts tags..
<s:form action="User_login">
<s:textfield label="User Name" key="userName"/>
<s:textfield label="Password" key="password"/>
<s:submit/>
</s:form>
But what should I replace with these struts tags,so my struts can work and my layout(css,java script) remain intact..Please help.
Your CSS will break because your HTML will change.
Struts2 uses Themes to generate the HTML for each tag; the default theme is XHTML.
Just use SIMPLE theme, that will generate ONLY the tag without any side data (<label> for example).
It can be applied to a single tag, to a form, or globally at application level.
Then try
<s:form action="User_login" theme="simple">`
; if you are satisfied with the result, set it globally in struts.xml with
<constant name="struts.ui.theme" value="simple" />

Spring MVC Posting Only Selected Data

This page displays several records when i select the Crime Number form the href tag i only want to post the data in that row only. Can someone tell me where i am going wrong here:
I did a different form for each record that returns from the server but only the first record gets returned all the time.
EDIT
The page is POST using java script and the Id its receiving is NULL
The crimeRecNo is posted accurately however the victim and criminal list only the first row is posted and not the selected one.Why????
function submitPage(crimeRecNo) {
document.getElementById("crimeList"+$('#crimeRecNo').val()).action = "getCrime/"+ crimeRecNo + ".htm";
document.getElementById("crimeList"+$('#crimeRecNo').val()).method = "POST";
document.getElementById("crimeList"+$('#crimeRecNo').val()).submit();
}
Html
</head>
<body>
<c:forEach items="${crimes}" var="crime">
<form:form id="crimeList${crime.crimeRecNo}" name="crimeList" commandName="crime">
<div id="content">
<div class="row-${crime.crimeRecNo}">
<h2>
<a class="crimeRecNo" href="${crime.crimeRecNo}">Crime Record
Number : ${crime.crimeRecNo}</a><form:input path="crimeRecNo" id="crimeRecNo"
value="${crime.crimeRecNo}" />
</h2>
<div class="crimeReport">
<label>${crime.crimeDetails}</label>
</div>
<div id="container">
<div id="crimePhotoz">
<div id="victimLabel">
<label class="heading">Victims/Witness In Crime</label>
</div>
<div class="grid_row">
<c:forEach items="${crime.victims}" var="victim">
<input type="hidden" value="${victim.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.victims}" var="victim">
<div class="names">
<a class="crimeNames" href="${victim.socialSecurityNumber}">${victim.name}</a>
<form:input path="victims" id="victims" value="${victim.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
<div id="criminalLabel">
<label class="heading">Criminals In Crime</label>
</div>
<div class="grid_row2">
<c:forEach items="${crime.criminals}" var="criminal">
<input type="hidden" value="${criminal.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.criminals}" var="criminal">
<div class="names">
<a class="crimeNames" href="${criminal.socialSecurityNumber}">${criminal.name}</a>
<form:input path="criminals" id="criminals" value="${criminal.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
</div>
</div>
</div>
<hr>
</div>
</form:form>
</c:forEach>
</body>
</html>
Maybe you are missing some quotes?
document.getElementById(${crime.crimeRecNo})
If ${crime.crimeRecNo} is a string this becomes
document.getElementById(myRecNo)
which is invalid javascript. In this case you should add quotes:
document.getElementById("${crime.crimeRecNo}")
If ${crime.crimeRecNo} is a number you don't need quotes but then you might have invalid ids. According to this html ids must at least start with a character. Iam not sure if this can cause problems but maybe you should try <form id="record-${crime.crimeRecNo}" .. >

How To Debug HTTP Error 400 in JSP

I have the following code that prints some links on the page, and is supposed to call a controller method (launch), upon clicking the image. However, I am getting an Error 400 when I click the button. The generated links look correct to me. The code is in the 1st block. The actual View-Source is in the 2nd.
Unfortunately, I am not getting any errors in my server logs, so I don't know where to begin to debug this.
Does anyone see anything wrong with my code.
<div id="links">
<ul>
<c:forEach items="${listAppURLForm}" var="appURLForm">
<li>
<h2>${appURLForm.link}</h2>
<p>
<span>
<form method="post" action='<c:url value="launch"/>'>
<input type="hidden" name="id" value="${appURLForm.link}"/>
<input type="image" src='<c:url value="/images/rocket-thumbnail.png"/>'/>
</form>
</span>
</p>
</li>
</c:forEach>
</ul>
</div>
The rendered page:
<form method="post" action='launch;jsessionid=40d63cd386e5d01ef8c6dc1c1b76'>
<input type="hidden" name="id" value="http://www.cnn.com"/>
<input type="image" src='/services/images/rocket-thumbnail.png;jsessionid=40d63cd386e5d01ef8c6dc1c1b76'/>
</form>
400 means server cant understand what browser sent
your action='launch;jsessionid=40d63cd386e5d01ef8c6dc1c1b76' might be ?launch;jsessionid=40d63cd386e5d01ef8c6dc1c1b76
<form method="post" action='?launch;jsessionid=40d63cd386e5d01ef8c6dc1c1b76'>
<input type="hidden" name="id" value="http://www.cnn.com"/>
<input type="image" src='/services/images/rocket-thumbnail.png;jsessionid=40d63cd386e5d01ef8c6dc1c1b76'/>
</form>

Categories