Display selected values in popup window - javascript

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

Related

How to set input text value from table data on click of that row in javascript

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.

how to dynamically add and delete full from on click of add or delete button respectively

I just want to add this form as user click on add button.Every time user click on add button a new form expand befor add button and also when user click on delete button it will delete all the form one by one but except the parent one.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2"><input type="text" name="title" id="awtitle"></td>
</tr>
<tr>
<td>Location</td>
<td colspan="2" ><input type="text"></td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select> <option value="" disabled selected>1</option>
</select>
<select><option value="" disabled selected>week<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select> <option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td><label>Key Skill Used</label></td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
<button id="minus">delete</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
So,i dont know how to achieve this using javascript.

-try this one.
MY HTML
<script type="text/javascript" src="../js/jquery.min.js"></script>
<section id="main-content">
<section class="wrapper">
<!-- BASIC FORM ELELEMNTS -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>
<form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
<input type="hidden" class="form-control" name="user_id" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Picture 1</label>
<div class="col-sm-10 upload_div">
<div style="float:left;width:30%;">
<input type="file" name="userfile[]">
</div>
<!-- <div style="width:70%;">
Add
Delete
</div> -->
</div>
</div>
<div class="other_files">
</div>
<div class="form-group">
<div class="col-sm-10">
Add
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
</div>
</div><!-- col-lg-12-->
</div><!-- /row -->
</section>
</section>
MY JS CODE:
<script type="text/javascript">
$(document).ready(function(){
var max_upload=5;
var addbutton=$('.add_btn');
var wrapper=$('.other_files');
var x=1;
$(addbutton).click(function(){
if(x < max_upload)
{
x++;
var new_html='<div class="form-group">';
new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';
new_html+='<div class="col-sm-10 upload_div">';
new_html+='<div style="float:left;width:30%;">';
new_html+='<input type="file" name="userfile[]">';
new_html+='</div>';
new_html+='<div style="width:70%;">';
new_html+='Delete';
new_html+='</div>';
new_html+='</div>';
new_html+='</div>';
wrapper.append(new_html);
}
});
$(wrapper).on('click','.delete_class',function(e){
e.preventDefault();
$(this).parent().parent().parent().remove();
x--;
});
});
</script>

First of all remove delete from your original form so that you can preserve deleting of parent form. You can add it dynamically on cloned forms as below:
var id=0;
$(document).ready(function() {
//attach a click event to add button whose id begins with plus, since id's have
//to be unique in DOM, we will be generating new id as in plus1, plus2 etc.,
//when we clone the form and before we append it. So the below selector means
//attach click events to those buttons whose id begins with plus. ^= means begins with
$(document).on('click',"button[id^=plus]",function(e){
e.preventDefault(); //prevent default action
//create a delete button html
var deleteBtn=$('<button id="minus">delete</button>');
//clone the parent form which will be in first
var clonedForm=$('form:first').clone();
//you can also do var clonedForm=$("#internship").clone();
id++; //increment the global id
//loop through each element which contains id property and replace with a new one
//to maintain uniqueness
clonedForm.find('[id]').each(function(){
var $el=$(this); //get the reference to element
$el.attr('id',$el.attr('id')+id); //replace its id with new one
});
deleteBtn.attr('id',deleteBtn.attr('id')+id);//replace delete button's id
clonedForm.attr('id',clonedForm.attr('id')+id); //replace cloned form's id
//append deleteBtn to td where add exists
clonedForm.find("td[id^=training]").append(deleteBtn);
//append cloned form to inner-aw-div
clonedForm.appendTo(".inner-aw-div");
});
//delete event to delete the closest form
$(document).on('click',"[id^=minus]",function(){
$(this).closest('form').remove(); //just remove the parent form
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2">
<input type="text" name="title" id="awtitle">
</td>
</tr>
<tr>
<td>Location</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select>
<option value="" disabled selected>1</option>
</select>
<select>
<option value="" disabled selected>week
<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select>
<option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td>
<label>Key Skill Used</label>
</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
</td>
</tr>
</table>
</form>
</div>

Why do I get a blank page when running my application from Netbeans?

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">

Jquery Object #<Object> has no method 'getElement'

I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?

Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');

Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().

html onclick run javascript function not working

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..

Categories

Resources