I'm trying to run a javascript menthod on an input="image" in html. My code in my html looks like this:
onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); "
and in my javascript the method is like this:
function manageHandlers(parameter){
alert("It's working: "+parameter);
}
Is there something I'm doing wrong? I could sware this worked yesterday but today it's just not doing anything.
Thanks for looking at this!
full html code:
<%--
Document : pathologist
Created on : 16 Nov 2011, 09:53:58 AM
Author : dean.grobler
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%# taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%# taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%# page import="javax.portlet.*"%>
<%# page import="co.za.lancet.medelogget.*" %>
<%# page import="java.util.ArrayList" %>
<%# page import="com.liferay.portal.kernel.servlet.*" %>
<%#page import="com.liferay.portal.kernel.util.Validator" %>
<portlet:defineObjects />
<%
String editable = request.getParameter("editable");
String selectedValue = request.getParameter("selectedValue");
int selectedIndex = 0;
if (selectedValue != null) {
selectedIndex = Integer.parseInt(selectedValue);
}
ArrayList<String> data = tableData.getTableData(selectedIndex, "consumers", "code");
String AvailableJavaScript = tableData.consumersAvailableHandlers(data.get(0));
String AssignedJavaScript = tableData.consumersAssignedHandlers(data.get(0)); //data.get(0) is the whereclause
%>
<!-- -------------------------Interface Starts here------------------------- -->
<aui:layout>
<form name="consumerDetails" action="<portlet:actionURL ><portlet:param name="consumers" value="consumers"/></portlet:actionURL>" method="post">
<input type="hidden" value="consumers" name="formType" />
<input type="hidden" value="<%=selectedValue%>" name="selectedValue" />
<input type="hidden" value="" id="button" name='button' />
<aui:column columnWidth="50">
<h3>
<%if (editable.equals("")) {%>
Edit Consumer
<%} else {%>
Consumer Details
<%}%>
<%%>
</h3>
<div class="horizontalRules"><hr class></div>
<div id="successAndErrorMessages"></div>
<table width="100%">
<tr height="35px"><td width="25%">Code:</td><td><input type="text" value="<%=data.get(0)%>" name="code" class="textBoxes" <%=editable%>></td></tr>
<tr height="35px"><td width="25%">Description:</td><td><input type="text" value="<%=data.get(1)%>" name="description" class="textBoxes" <%=editable%>></td></tr>
</table>
</aui:column>
</form>
</aui:layout>
<!-- --------------------Handler rules section---------------------- -->
<%if (editable.equals("")) {%>
<aui:layout>
<aui:column columnWidth="100">
<h3>Manage Handler Rules</h3>
<div class="horizontalRules"><hr class></div>
</aui:column>
</aui:layout>
<aui:layout>
<form name="manageHandlers" id="formType" action="<portlet:actionURL ><portlet:param name="manageHandlers" value="manageHandlers"/></portlet:actionURL>" method="post">
<!-- index selected in handlers tables -->
<input type="hidden" name="selectedHandler" id="selectedHandler" />
<input type="hidden" value="" id="handlerButton" name='handlerButton' />
<input type="hidden" value="" id="button" name='button' />
<input type="hidden" value="" id="tableType" name='tableType' />
<input type="hidden" value="manageHandlers" name="formType" />
<table width="100%">
<tr><td width="35%"><table width="100%">
<tr>
<td><h4 style="margin-bottom: 10px;">Available Rules</h4></td>
</tr>
<tr>
<td><div class="availableTable" id='available_div'></div></td>
</tr>
</table></td>
<td width="15%"><div class="manageHandlersButtons1">
<table width="100%">
<tr>
<td><h4>Fatal Error:</h4></td>
</tr>
<tr>
<td><input type="checkbox" id="fatal" name="fatal" class="manageHandlersCheckbox" value="1" /></td>
</tr>
<tr>
<td><input type="image" id="button" value="Assign" src="<%=renderRequest.getContextPath()%>/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="if(manageHandlers('Assign')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
<tr>
<td><input type="image" id="button" value="Unassign" src="<%=renderRequest.getContextPath()%>/Images/leftarrow.png" alt="Unassign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); " /></td>
</tr>
</table>
</div></td>
<td width="35%"><table width="100%">
<tr>
<td><h4 style="margin-bottom: 10px;">Assigned Rules</h4></td>
</tr>
<tr>
<td><div class="assignedTable" id='assigned_div'></div></td>
</tr>
</table></td>
<td width="15%"><div class="manageHandlersButtons2">
<table width="100%">
<tr>
<td><input type="button" id="button" name="MoveUp" value="MoveUp" style="width: 85px;" class="manageHandlersMvUp" onclick="if(manageHandlers('Move up')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
<tr>
<td><input type="button" id="button" name="MoveDown" value="MoveDown" style="width: 85px;" class="manageHandlersMvDwn" onclick="if(manageHandlers('Move down')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
</table></div>
</td></tr>
</table>
</form>
</aui:layout>
<div class="horizontalRules2"><hr class></div>
<%}%>
<table width="100%">
<tr>
<td width="25%"><input type="button" value="Back" style="width: 80px;" class="leftButtons" onClick="document.getElementById('button').value='Back'; document.getElementsByName('consumerDetails')[0].submit()" /></td>
<!-- if not editable, don't display this button -->
<% if (editable.equals("")) {%>
<td><input type="button" value="Save" style="width: 80px;" class="rightButtons" onClick="if (addEntryValidator('Save','consumers','edit')) {document.getElementsByName('consumerDetails')[0].submit()}" /></td>
<% }%>
</tr>
</table>
<!-- JavaScript Tables -->
<script type="text/javascript"><%= AssignedJavaScript%></script>
<script type="text/javascript"><%= AvailableJavaScript%></script>
This is just wrong:
onclick="manageHandlers('Unassign');
document.getElementsByName('manageHandlers')[0].submit();"
I have never seen anything like that before..or if it is indeed possible and I do miss something, then I bet it's rarely done because it's a bad practice to not separate your js codes from content layer (HTML).
Anyway, onclick is an event handler. You normally assign a function that gets executed when clicking happens.
If I were you I would not probably do inline javascript. But if you really want to keep it inline, then you could try this:
function manageHandlers(parameter){
alert('blabla' + parameter);
document.getElementsByName('manageHandlers')[0].submit();
}
and onclick, you can do just onclick="manageHandlers('Unassign');" hope that helps..
Related
I have a jsp page where i am displaying value from data base .
Now i need to edit the table value in click of that particular row and that selected row value should get set into respective input text .
My java script function is getting called but clicked value is not getting displayed into respective input type .
The java script function name is onRowClick
I am adding code for that .
Please suggest .
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function onRowClick(){
var table = document.getElementById("hoteltable"),rIndex;
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
document.getElementByName("hId").value = this.cells[0].innerHTML;
document.getElementByName("hName").value = this.cells[1].innerHTML;
document.getElementByName("hArea").value = this.cells[2].innerHTML;
document.getElementByName("hNumOfRooms").value = this.cells[3].innerHTML;
document.getElementByName("hImgUrl").value = this.cells[4].innerHTML;
hideButton();
showDelete();
showEdit();
};
}
}
</script>
</head>
<body>
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form:form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td><form:input name="hId" path="hotelId"></form:input></td>
<td><form:errors path="hotelId" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelName:</td>
<td><form:input name="hName" path="hotelName"></form:input></td>
<td><form:errors path="hotelName" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelArea:</td>
<td><form:select name="hArea" path="hotelArea">
<form:option value="Marthalli">Marathalli</form:option>
<form:option value="SilkBoard">SilkBoard</form:option>
</form:select></td>
<td><form:errors path="hotelArea" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td><form:input name="hNumOfRooms" path="hotelNumOfRooms"></form:input></td>
<td><form:errors path="hotelNumOfRooms" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td><form:input name="hImgUrl" path="hotelImgUrl"></form:input></td>
<td><form:errors path="hotelImgUrl" cssClass="error"></form:errors></td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"></input> <br> <br>
<input type="submit"value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"></input><br> <br>
<input type="reset"value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form:form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td><h4>hotelId</h4></td>
<td><h4>hotelName</h4></td>
<td><h4>hotelArea</h4></td>
<td><h4>hotelNumOfRooms</h4></td>
<td><h4>hotelImageUrl</h4></td>
</tr>
<c:forEach var="hotels" items="${hotelList}">
<tr onclick="onRowClick()">
<td >${hotels.hotelId}</td>
<td>${hotels.hotelName}</td>
<td>${hotels.hotelArea}</td>
<td>${hotels.hotelNumOfRooms}</td>
<td>${hotels.hotelImgUrl}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
If you look in the web console, you'll find an error message. There is no document.getElementByName function in the DOM. There's getElementsByName (plural), but not a singular, and that one wouldn't really help you since it would give you a collection of all of the elements with that name, anywhere on the page. (Although if the only ones with those names are the ones you want, you could use it and then use [0] to get the only entry in the resulting collection.)
There's a different problem, though: Your click="onRowClick()" doesn't pass on any information about which row was clicked, and the function itself just hooks up event handlers on the rows rather than actually doing what you want done on click.
Instead, hook click on the table, and check to see if the click passed throug a row; if it did, fill in the information in the first table. See comments:
// Hook click on the table, rather than individual rows
document.getElementById("hoteltable").addEventListener("click", function(e) {
// Make sure the click passed through a row in this table
var row = e.target.closest("tr");
if (!row || !this.contains(row)) {
return;
}
// Get the form we're filling in
var form = document.querySelector("form[action=hotelaction]");
// Fill in the various inputs
// Note: I'd recommend giving each cell a data-name attribute or something
// and using those rather than using `row.cells[0]` and such. That way
// when (not if ;-) ) you change the source table, the cell references
// aren't messed up
form.querySelector("[name=hId]").value = row.cells[0].innerHTML;
form.querySelector("[name=hName]").value = row.cells[1].innerHTML;
form.querySelector("[name=hArea]").value = row.cells[2].innerHTML;
form.querySelector("[name=hNumOfRooms]").value = row.cells[3].innerHTML;
form.querySelector("[name=hImgUrl]").value = row.cells[4].innerHTML;
/*
hideButton();
showDelete();
showEdit();
*/
});
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td>
<input name="hId" path="hotelId">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelName:</td>
<td>
<input name="hName" path="hotelName">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelArea:</td>
<td>
<select name="hArea" path="hotelArea">
<option value="Marthalli">Marathalli</option>
<option value="SilkBoard">SilkBoard</option>
</select>
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td>
<input name="hNumOfRooms" path="hotelNumOfRooms">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td>
<input name="hImgUrl" path="hotelImgUrl">
</td>
<td>
<span class="error"></span>
</td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"><br> <br>
<input type="submit" value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"><br> <br>
<input type="reset" value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td>
<h4>hotelId</h4>
</td>
<td>
<h4>hotelName</h4>
</td>
<td>
<h4>hotelArea</h4>
</td>
<td>
<h4>hotelNumOfRooms</h4>
</td>
<td>
<h4>hotelImageUrl</h4>
</td>
</tr>
<tr>
<td>1</td>
<td>Savoy</td>
<td>Marthalli</td>
<td>300</td>
<td>https://via.placeholder.com/150?text=Savoy</td>
</tr>
<tr>
<td>2</td>
<td>Marriott</td>
<td>SilkBoard</td>
<td>450</td>
<td>https://via.placeholder.com/150?text=Marriott</td>
</tr>
<tr>
<td>3</td>
<td>Premier Inn</td>
<td>Marthalli</td>
<td>150</td>
<td>https://via.placeholder.com/150?text=Premier+Inn</td>
</tr>
</table>
</div>
Note that I removed from JSP- or template-isms from the HTML in that, so it used standard form inputs. I assume what gets delivered to the browser uses standard form elements.
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
I have a user control with 2 button(Button1, Button2) & 1 text box(TextBox1).
On Button1 Clientclick, i try to get ControlID of button1.
In main page i have two instance of same user control. When click first user control button1 click i got the last user control id (here i have two control)
UserControl1.Button1click gives: MyUserControl2_Button1 (suppose to display MyUserControl1_Button1), please clarify where is the problem.
I appreciate your help.
Thanks
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="UserControlProject.UserControl.MyUserControl" %>
<script type="text/javascript">
function button1client(ctrl) {
alert(document.getElementById("<%= Button1.ClientID %>").id);
}
function button2client(ctrl) {
alert(document.getElementById("<%= Button2.ClientID %>").id);
}
</script>
<table width="100" border="1" runat="server">
<tr>
<td>
<table width="100%" align="right" runat="server">
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" OnClientClick="button1client(this);return false;" />
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" OnClientClick="button2client(this);return false;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
MainPage.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.aspx.cs" Inherits="UserControlProject.TestUserControl" %>
<%# Register Src="~/UserControl/MyUserControl.ascx" TagPrefix="uc1" TagName="MyUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%">
<tr>
<td>
<uc1:MyUserControl runat="server" ID="MyUserControl1" />
</td>
<td>
<uc1:MyUserControl runat="server" ID="MyUserControl2" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
PageSource shows:
<script type="text/javascript">
function button1client(ctrl) {
alert(document.getElementById("MyUserControl1_Button1").id);
}
function button2client(ctrl) {
alert(document.getElementById("MyUserControl1_Button2").id);
}
</script>
<table width="100" border="1">
<tr>
<td>
<table width="100%" align="right">
<tr>
<td>
<input type="submit" name="MyUserControl1$Button1" value="Button1" onclick="button1client(this);return false;" id="MyUserControl1_Button1" />
<input type="submit" name="MyUserControl1$Button2" value="Button2" onclick="button2client(this);return false;" id="MyUserControl1_Button2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input name="MyUserControl1$TextBox1" type="text" id="MyUserControl1_TextBox1" />
</td>
</tr>
</table>
</td>
<td>
<script type="text/javascript">
function button1client(ctrl) {
alert(document.getElementById("MyUserControl2_Button1").id);
}
function button2client(ctrl) {
alert(document.getElementById("MyUserControl2_Button2").id);
}
</script>
<table width="100" border="1">
<tr>
<td>
<table width="100%" align="right">
<tr>
<td>
<input type="submit" name="MyUserControl2$Button1" value="Button1" onclick="button1client(this);return false;" id="MyUserControl2_Button1" />
<input type="submit" name="MyUserControl2$Button2" value="Button2" onclick="button2client(this);return false;" id="MyUserControl2_Button2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input name="MyUserControl2$TextBox1" type="text" id="MyUserControl2_TextBox1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
This is the result of hoisting. Basically thats the way javascript works.
To understand it better inspect the page source when you run it. I'll try my best to explain it here.
When you run your ASP.NET application it loads both the user controls (since you have them both in your main page).
Both controls have javascript methods with same name.
First Control Loads this:
function button1client(ctrl) {
alert(document.getElementById("MyUserControl1_Button1").id);
}
function button2client(ctrl) {
alert(document.getElementById("MyUserControl1_Button2").id);
}
Than second user control is loaded which have same function name.
function button1client(ctrl) {
alert(document.getElementById("MyUserControl2_Button1").id);
}
function button2client(ctrl) {
alert(document.getElementById("MyUserControl2_Button2").id);
}
The Javascript as a result of hoisting overrides the old function. They don't exist anymore in the javascript context. Therefore when any button is clicked, the method from second control is called.
I hope it helps.
#chrana solution will work smoothly.If you are ready to use jQuery in your page this solution will work too.
User control code
<table id="Table2" width="100%" align="right" runat="server">
<tr>
<td>
<asp:Button ID="Button1" runat="server" CssClass="btn" Text="Button1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" CssClass="btn" Text="Button2" OnClick="Button2_Click" />
</td>
</tr>
</table>
Script code
<script type="text/javascript">
$(".btn").on("click", function () {
alert($(this).attr('id'));
});
</script>
Yesterday everything was working just fine but today I'm running into this annoying blank page whenever I try to run my application from the IDE.
My server is Glassfish/port4848 then run from the IDE http://localhost:8080/ecommerce/
The problem seems to be when I add these two library references at the top of the page:
<!DOCTYPE html>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
Sql statetments
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<sql:query var="categoryProducts" dataSource="jdbc/ecommerce">
SELECT * FROM product WHERE category_id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
When I remove the SQL statements from the top, the page loads perfectly fine when I request it in my local browser. Thing is I need the libraries to be able to run these JSTL:
Category page/ left column (vertical menu bar)
<c:forEach var="category" items="${categories.rows}">
<c:choose>
<c:when test="${category.id == pageContext.request.queryString}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:when>
<c:otherwise>
<a href="category?${category.id}" class="categoryButton">
<div class="categoryText">
${category.name}
</div>
</a>
</c:otherwise>
</c:choose>
</c:forEach>
Displaying the product within the table (right column/products container)
<c:forEach var="product" items="${categoryProducts.rows}" varStatus="iter">
<tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
<td>
<img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}">
</td>
<td>
${product.name}
<br>
<span class="smallText">${product.description}</span>
</td>
<td>
€ ${product.price} / unit
</td>
<td>
<form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="add to cart">
</form>
</td>
</tr>
</c:forEach>
I'd like to precise that I don't have the issue with my index page that also contains JSTL and the two references at the top. The problem is only with my category page.
Full Category Source Code:
<!DOCTYPE html>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : category
Created on : Feb 01, 2015, 7:56:19 PM
Author : PC
--%>
<sql:query var="categories" dataSource="jdbc/ecommerce">
SELECT * FROM category
</sql:query>
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<sql:query var="categoryProducts" dataSource="jdbc/ecommerce">
SELECT * FROM product WHERE category_id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ecommerce | Online Shopping</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/category.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
</head>
<body style="margin: 0pt auto; padding: 0pt; max-width: 100%; width: 100%;">
<div id="store_container">
<div id="store">
<div style="text-align: center;" id="category">
<div id="items">categories
</div>
<div class="cat_row">
<div style="text-align: left;"><span style="font-weight: bold;"><span style="background-color: rgb(239, 239, 239);">Brand new
products</span><br>
</span><span style="font-weight: normal;"></span><span style="font-weight: bold; background-color: rgb(239, 239, 239);">Items
on Sale</span><br>
<span style="text-decoration: underline;"></span></div>
</div>
<div class="cat_row">
<div style="text-align: left;"><span style="text-decoration: underline;">Shop
by technology</span><br>
<br>
<c:forEach var="category" items="${categories.rows}">
<c:choose>
<c:when test="${category.id == pageContext.request.queryString}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:when>
<c:otherwise>
<a href="category?${category.id}" class="categoryButton">
<div class="categoryText">
${category.name}
</div>
</a>
</c:otherwise>
</c:choose>
</c:forEach>
<br>
</div>
</div>
<div class="cat_row">
</div>
</div>
<div style="text-align: center;" id="thumbnails">
<div id="items"> Featured Items | ${selectedCategory.rows[0].name}
</div>
<br>
<div style="text-align: left;">
<div class="item_col">pages 1-2-3-4-5-6-7-8-10...<br>
</div>
<div style="text-align: left;" class="item_col2">24 per
page 48 per page 96 per page View
All<br>
</div>
</div>
<br>
<div id="thumb_container">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<c:forEach var="product" items="${products}" varStatus="iter">
<tbody>
<tr>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">${product.name}<br>
</td>
<td style="vertical-align: top; width: 275px;">${product.name}<br>
</td>
<td style="vertical-align: top;">${product.name}<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">&cad; ${product.price} / unit<br>
</td>
<td style="vertical-align: top;">&cad; ${product.price} / unit<br>
</td>
<td style="vertical-align: top;">&cad; ${product.price} / unit<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form><br>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form></td>
</tr>
</tbody>
</table>
<br>
</td>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form></td>
</tr>
</tbody>
</c:forEach>
</table>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Any idea?
Thanks a lot!
To display a page correctly is not related to the taglib .
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/sql" %>
Mostly is a false select statement the reason.
Your code does not match the variables !
So a <c:forEach with a rowcount == 0 will never run and your page is blank.
query var="selectedCategory" is never used.
${pageContext.request.queryString} is never tested.
Test ${pageContext.request.queryString} with : look here
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<c:forEach uses ${categories.rows} ! where it come from ?
<c:forEach var="category" items="${categories.rows}">
Replace param value="a valid ID" with a known value .
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="a valid ID"/>
</sql:query>
<c:forEach var="category" items="${selectedCategory.rows}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:forEach>
Also items="${products}" is not matching any sql query.
<c:forEach var="product" items="${products}" varStatus="iter">
hi i want to trim the left space through java script when the value came from database i have used jsp tag for getting the value and loded these value in input field . i m facing problem when some space occur in starting of value then not even single value get printed in all input field
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Insert title here</title>
<script>
function getValue() {
<jsp:useBean id="ProjectBO"
class="com.nousinfo.tutorial.employee.service.model.bo.EmployeeProjectBO"
scope="request" />
document.getElementById("empNumber").value = '<jsp:getProperty property="employeeNumber" name="ProjectBO"/>';
document.getElementById("projectCode").value = '<jsp:getProperty property="projectCode" name="ProjectBO"/>';
document.getElementById("startDate").value = '<jsp:getProperty property="startDate" name="ProjectBO"/>';
document.getElementById("endDate").value = '<jsp:getProperty property="endDate" name="ProjectBO"/>';
document.getElementById("role").value = '<jsp:getProperty property="role" name="ProjectBO"/>';
}
</script>
</head>
<body onload="getValue()">
<form id="employee" action="ProjectUpdateServlet" method="post">
<table width="1254" height="74" border="0" align="center">
<tr>
<td width="970" height="68" align="center" bgcolor="#99CCFF"><h2>
<span class="style1">Project Detail</span>
</h2></td>
<td width="274" height="68" align="center" bgcolor="#FFFFFF"><img
src="/image/Emp.jpg" width="190" height="92" /></td>
</tr>
</table>
<p>
<br />
</p>
<hr size="1" width="786">
<table width="786" border="0" align="center">
<tr>
<td><input type="hidden" name="updateStatusProject" value="M" /></td>
</tr>
<tr>
<td width="298">Employee Number:</td>
<td><input type="text" id="empNumber" name="employeeNumber" readonly="readonly" />
</td>
<tr>
<td>Project_Code:</td>
<td><input type="text" name="projectCode" id="projectCode" readonly="readonly"/>
</td>
</tr>
<tr>
<td>Start_date</td>
<td><input type="text" name="startDate" id="startDate" /></td>
</tr>
<tr>
<td>End_date</td>
<td><input type="text" name="endDate" id="endDate" /></td>
</tr>
<tr>
<td>Role</td>
<td><input type="text" name="role" id="role" /></td>
</tr>
</table>
<p> </p>
<br />
<table width="200" border="0" align="center">
<tr>
<td><center>
<input type="submit" name="submit" value="Save" onclick="self.close()"/>
</center></td>
<td><center>
<input type="button" name="cancle" value="Cancel"
onclick="self.close()">
</center></td>
</tr>
</table>
<hr size="1" width="786">
<p> </p>
</form>
</body>
</html>
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
return this.replace(/\s+$/,"");
}
// example of using trim, ltrim, and rtrim
var myString = " hello my name is ";
alert("*"+myString.trim()+"*");
alert("*"+myString.ltrim()+"*");
alert("*"+myString.rtrim()+"*");
JavaScript has replace which can accept a regular expression for the search term, so if you want to remove leading spaces:
str = str.replace(/^\s+/, '');
The ^ means "start of input", the \s means "any whitespace character", and the + means "one or more of the previous thing". So in total, the regex means "Whitespace characters at the beginning of the input". And we replace them with ''.
If you wanted to remove trailing spaces, instead of ^ at the beginning you'd have $ at the end ($ = "end of input"):
str = str.replace(/\s+$/, '');