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}" .. >
Related
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>
So I have the following written in Thymeleaf:
<form th:action="#{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
</form>
And the following in Java:
#RequestMapping(value = "/recipes/{recipeId}/delete", method = RequestMethod.POST)
public String deleteRecipe(#PathVariable Long recipeId, RedirectAttributes redirectAttributes){
Recipe recipe = recipeService.findOne(recipeId);
recipeService.delete(recipe);
return "redirect:/";
}
The problem is that when I press the delete button on the browser, the request will only send the number 1 to the controller, instead of sending the specific object id. So it will always delete the first element from the list, not the one that I chose.
EDIT: Actually, this is incremental. If I delete a random object from the list first time, it will delete the first item from the list, if I delete another random element from the list, it will delete the second one, and so on...
Something else to add would be that this doesn't happen if I try to go to a detail page, or I try to edit the object. It will send the correct id to the controller. This happens only for the delete request.
An important difference here would be that the edit and detail actions are links, and delete is a form action.
This is how the entire markup file looks like:
<!DOCTYPE html>
<html lang="en">
<head th:replace="layout :: head"></head>
<body>
<nav th:replace="layout :: nav"></nav>
<div class="grid-container">
<div th:replace="layout :: logo"></div>
<div class="grid-100">
<div class="recipes">
<div class="grid-100 row controls">
<div class="grid-30">
<select>
<option value="">All Categories</option>
<option value="breakfast">Breakfast</option>
<option value="lunch">Lunch</option>
<option value="dinner">Dinner</option>
<option value="dessert">Dessert</option>
</select>
</div>
<div class="grid-40">
<input placeholder="Search"></input>
</div>
<div class="grid-30">
<div class="flush-right">
<a th:href="#{/recipes/add-new-recipe}"><button>+ Add Recipe</button></a>
</div>
</div>
</div> <div class="clear"></div>
<div class="grid-100 row addHover" th:each="recipe : ${recipes}">
<a th:href="#{|/recipes/${recipe.id}/detail|}">
<div class="grid-70">
<p>
<span><img th:src="#{/images/favorite.svg}" height="12px"/> </span>
<span th:text="${recipe.name}"></span>
</p>
</div>
</a>
<div class="hoverBlock">
<div class="grid-30">
<div class="flush-right">
<p>
<a th:href="#{|/recipes/${recipe.id}/edit|}"> <img th:src="#{/images/edit.svg}" height="12px"/> Edit </a>
<img th:src="#{/images/delete.svg}" height="12px"/> Delete
<form th:action="#{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
</form>
</p>
</div>
</div>
</div>
</div><div class="clear"></div>
<div class="row"> </div>
</div>
</div>
</div>
</body>
</html>
The problem was that I was using an <a> tag to submit the delete form:
<img th:src="#{/images/delete.svg}" height="12px"/> Delete
<form th:action="#{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
</form>
The solution is to use a button instead, inside the form tags, and eliminate the anchor:
<form th:action="#{|/recipes/${recipe.id}/delete|}" method="post" id="recipeDeleteForm">
<button type="submit">Delete</button>
</form>
I want to align in one line but after I injected struts2 tags ..the fields are not aligned in one line.Please help me.I am beginner to struts2 but I tried my best to solve it but in vain.I am pretty sure that there must be some problems related to div tag but where is the exact problem that I am not able to figure out.
Below is my code of jsp page.
<!-- Main content -->
<div>
<s:form action="UpdateUserRoleByAdmin">
<s:iterator value="selectUserList">
<section class="content"> <!-- Small boxes (Stat box) -->
<div class="row">
<div class="contetpanel">
<div>
<div class="crevtbl">
<div class="crevtblRow">
<div class="crevtblCell">Name</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.fullName" value="%{fullName}"
size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Address</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.userAddress"
value="%{userAddress}" size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Username</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.userName"
value="%{userName}" size="40"/>
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Password</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.passWord" value="%{passWord}"
size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Contact</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.userContact"
value="%{userContact}" size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Email</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.userEmail" value="%{userEmail}"
size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Date of Birth (YYYY-MM-DD)</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<s:textfield name="updateuser.userBirthDate"
value="%{userBirthDate}" size="40" />
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell">Role</div>
<div class="crevtblCell1">:</div>
<div class="crevtblCell2">
<select name="updateuser.userRole" class="adduserlistbox1">
<option>Admin</option>
<option>User</option>
</select>
</div>
</div>
<div class="crevtblRow">
<div class="crevtblCell"></div>
<div class="crevtblCell1"></div>
<div class="crevtblCell2">
<input type="submit" class="btn btn-primary" value="Update">
Cancel
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</s:iterator>
</s:form>
Struts2 uses themes to generate HTML. A different theme, a different HTML in output.
The default theme is XHTML, that generate your tags inside <td>, among the other things.
Since you've designed your HTML by yourself, and you're using divs instead of tables, just use the simple theme, that will not append almost any additional HTML to the expected one:
<s:form action="UpdateUserRoleByAdmin" theme="simple" >
If you like the effect, consider applying it once for all the application, by setting in struts.xml the following constant:
<constant name="struts.ui.theme" value="simple"/>
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" />
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.