I am new to html5 , on my layout I placed an "edit" button in a table row. When we click on edit button it displays particular row fields on light box with same layout. My problem is that when I click on edit button it should display particular row details in another window.
This is my table and edit button code in jsp:
<body onload="altRows();">
<%#include file="dbheader.jsp" %>
<table class="altrowstable" id="alternatecolor">
<tr>
<th>code</th>
<th>Name</th>
<th>Phone</th>
<th>Address1</th>
<th>Address2</th>
<th>Postal Code</th>
<th>E-mail</th>
<th>Website</th>
<th>Blog</th>
<th>Fax</th>
<th>City</th>
<th>State</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Date</th>
</tr>
<c:forEach items="${businesslist}" var="business">
<tr>
<td>${business.busent_code}</td>
<td>${business.busent_name}</td>
<td>${business.busent_phone}</td>
<td>${business.busent_address1}</td>
<td>${business.busent_address2}</td>
<td>${business.busent_postal_code}</td>
<td>${business.busent_email}</td>
<td>${business.busent_website}</td>
<td>${business.busent_blog}</td>
<td>${business.busent_fax}</td>
<td>${business.busent_city}</td>
<td>${business.busent_state}</td>
<td>${business. busent_longitude}</td>
<td>${business.busent_latitude}</td>
<td>${business.busent_date}</td>
<form:form commandName="business" action="updatebusinessess" method="post" >
<td> <form:input id="busent_name" path="busent_name" type="hidden" value="${business.busent_name}"/>
<input id="submit" type="button" onclick="javascript:return lightbox();" tabindex="5"value="Edit">
</form:form>
<td>Show Map</td>
<td><input type="checkbox"></td>
</tr>
</c:forEach>
</table>
<table border="0" cellpadding="5" cellspacing="5" align="center">
<tr>
<%--For displaying Previous link except for the 1st page --%>
<c:if test="${currentPage != 1}">
<td>Previous</td>
</c:if>
<%--For displaying Page numbers.The when condition does not display a link for the current page-- %>
<c:forEach begin="1" end="${noOfPages}" var="i">
<c:choose>
<c:when test="${currentPage eq i}">
<td>${i}</td>
</c:when>
<c:otherwise>
<td>${i}</td>
</c:otherwise>
</c:choose>
</c:forEach>
<%--For displaying Next link --%>
<c:if test="${currentPage lt noOfPages}">
<td>Next</td>
</c:if>
</tr>
</table> <br><br>
<%# include file="dbfooter.jsp" %>
this my lightbox and row fields code in jsp.
<div id="light1" class="content2">
<form:form commandName="business" action="savebusinessess" method="post" runat="server">
<table border="0">
<c:forEach items="${businesslist}" var="business" >
<tr>
<th>Name</th>
<td><form:input path="busent_name" value="${business.busent_name}" size="30"/></td>
</tr>
<tr>
<th>Address1</th>
<td><form:input path="busent_address1" value="${business.busent_address1}" size="30"/></td>
</tr>
<tr>
<th>Address2</th>
<td><form:input path="busent_address2" value="${business.busent_address2}" size="30"/></td>
</tr>
<tr>
<th>City</th>
<td><form:input path="busent_city" value="${business.busent_city}" size="30"/></td>
</tr>
<tr>
<th>State</th>
<td><form:input path="busent_state" value="${business.busent_state}" size="30"/></td>
</tr>
<tr>
<th>Phone</th>
<td><form:input path="busent_phone" value="${business.busent_phone}" size="30"/></td>
</tr>
<tr>
<th>Website</th>
<td><form:input path="busent_website" value="${business.busent_website}" size="30"/></td>
</tr>
<tr>
<th>Zip code</th>
<td><form:input path="busent_postal_code" value="${business.busent_postal_code}" size="30"/> </td>
</tr>
<tr>
<th>Longitude</th>
<td><form:input path="busent_longitude" value="${business.busent_longitude}" size="30"/></td>
</tr>
<tr>
<th>Latitude</th>
<td><form:input path="busent_latitude" value="${business.busent_latitude}" size="30"/></td>
</tr>
<tr>
<th>Date:</th>
<td><form:input path="busent_date" value="${business.busent_date}" size="30"/></td>
</tr>
</c:forEach>
</table>
<input id="submit" type="submit" align="left" value="update Details" onclick="myFunction();"/>
</form:form>
Close
</div>
i am getting lightbox but i get all table rows display on lightbox.
controller:
#Controller
public class UpdateController {
#Autowired
private UpdateService updateService;
private static final Log logger = LogFactory.getLog(UpdateController.class);
#RequestMapping(value = "/updatebusinessess")
public String updateBusinessess(Business business,Model model) {
logger.info("updatebusinessess");
List<Business> bus=updateService.updateBusinessdetails(business);
model.addAttribute("businesslist",bus);
model.addAttribute("business",new Business());
return "updatingdetails";
}
#RequestMapping(value = "/savebusinessess")
public String addBusinessess(Business business, BindingResult result) {
logger.info("addbusinessess");
updateService.saveBusinessdetails(business);
return "success";
}
#RequestMapping(value = "/update")
public String updateBusiness( Model model) {
logger.info("updatebusiness");
model.addAttribute("business",new Business());
return "updatebusinessdetails";
}
}
The idea here is that you should create a lightbox itself first to be in DOM. For example:
<div id="lightbox1">
<input type="text" id="name1"/>
<input type="text" id="address1"/>
...
</div>
Your button should fill its input with specific value. You can use also jQuery:
$("#name1").val("John");
$("#address1").val("My street 1");
...
I think the idea is clear now. If so, you need just take values from the row instead of "John" and "My street 1". The simplest way will be to name every component in rows for using in jQuery or you can find parent element for the every button on the row and relatively to that find particular inputs (this will be little challenging if you're new to HTML and JS).
For lightbox you can use any lightbox solution written in jQuery and attach the "div" element to that lightbox.
Related
I have the following bootstrap table, I want to add a textarea for a row.
But that text area should expand to all the columns. I have included a image example.
For row 2 I want to have the 4 columns and the textarea. text area should cover all the column as show in the image below.
Is it possible to do?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
</tbody>
</table>
You can achieve it in the following way--
Add colspan=12 to your <td> which contains the textarea and give the text area width:100%
Working snippet
textarea {
width:100%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr>
<td colspan="12">
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
I have a project based in Spring Web model-view-controller (MVC) framework. The version of the Spring Web model-view-controller (MVC) framework is 3.2.8
I have this piece of code in my JSP
<div class="col-md-12" id="secondSignatoryDivId" >
<table width="100%">
<thead>
<tr>
<th><b>First name</b></th>
<th><b>Last name</b></th>
<th><b>Position</b></th>
<th><b>Title</b></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
<td><input type="text" value="${deviceForm.device.secondSignatory.lastname}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
<td><input type="text" value="${deviceForm.device.secondSignatory.position}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
<td><input type="text" value="${deviceForm.device.secondSignatory.title}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
<td>Delete</td>
</tr>
</tbody>
</table>
</div>
<c:if test="${empty applicationForm.application.secondSignatory}">
<script>
alert ('lalalal');
$('#secondSignatoryDivId').hide();
</script>
</c:if>
I see the alert but the div does not hide !
You are using jQuery, you should include jQuery on your html file:
alert('lalalal');
$('#secondSignatoryDivId').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="secondSignatoryDivId">
<table width="100%">
<thead>
<tr>
<th><b>First name</b>
</th>
<th><b>Last name</b>
</th>
<th><b>Position</b>
</th>
<th><b>Title</b>
</th>
<th><b>Actions</b>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
<td>
<input type="text" value="${deviceForm.device.secondSignatory.lastname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
<td>
<input type="text" value="${deviceForm.device.secondSignatory.position}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
<td>
<input type="text" value="${deviceForm.device.secondSignatory.title}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
<td>Delete</td>
</tr>
</tbody>
</table>
</div>
If it is just for hiding the element then better to do it with css:
<c:if test="${empty applicationForm.application.secondSignatory}">
<style>
#secondSignatoryDivId.col-md-12 { display:none; }
</style>
</c:if>
I want to create a table where rows will be editable by inline. Tables are created using HTML and data are fetch from database. But can't do inline edit total row and after edit save to database.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3">Action</td>
<td>id</td>
<td>userName</td>
<td>Address</td>
<td>Role</td>
<td>Active</td>
</tr>
<tr>
<td>Edit</td>
<td>InlineEdit</td>
<td>delete</td>
<td>1</td>
<td>apache</td>
<td>los angeles</td>
<td>user</td>
<td>y</td>
</tr>
</table>
In second row all data are collect from database. Please help me to solve the difficulty.
Write input tags in between the <td> and assign your php variable to value attribute.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3"><input type="text" value="Action"/></td>
<td><input type="text" value="id"/></td>
<td><input type="text" value="Username"/></td>
<td><input type="text" value="Address"/></td>
<td><input type="text" value="Role"/></td>
<td><input type="text" value="Active"/></td>
</tr>
</table>
<A ID ="CustomerInformation"></A>
<table class="SectionHeader1">
<TBODY>
<tr>
<td>Customer Information</td>
</tr>
</TBODY>
</table>
<TABLE class="TheBox" align="center">
<TBODY>
<TR>
<TD>
<FIELDSET><LEGEND>Customer Address</LEGEND>
<DIV align="center">
<TABLE id="table5" class="BoxedIn">
<TBODY>
<TR>
<TH colspan="3" width="50%">Billing Address</TH>
<TH colspan="5" width="50%">Shipping Address</TH>
</TR>
</TR>
</TBODY>
</TABLE>
</DIV>
</FIELDSET>
</TD>
</TR>
</TBODY>
</TABLE>
<INPUT type="button" value="Customer Details"
class="buttonSuper" name="customerDetails"
onclick="parent.location='#CustomerInformation'">
The '#CustomerInformation' denotes the point where this script will jump to means same page.But it working fine in IE but not not working firefox and Chrome ..when click on onclcik button it is closing current page and go to main page.I tired like document.location and but no luck... Please help
How about window.location instead?
<INPUT type="button" value="Customer Details" class="buttonSuper" name="customerDetails" onclick="location.href='#CustomInformation';">
This does what you're trying to do.
Edit: using location.href
I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?
This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/
Try changing your header row to use <th> tags instead of <td> tags.
You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/