I am trying to create a table, whereas when the user clicks on one of the rows, a block will slide down the same length of the table. I tried using a div, but I guess you can't have a div anywhere in the table unless inside of a cell. Here is my current code:
<table class="table-carrier">
<thead>
<tr>
<th>
<%= Html.Encode(SFSys.Inst.I18n.GetText("Name")) %>
</th>
<th>
<%= Html.Encode(SFSys.Inst.I18n.GetText("Value")) %>
</th>
<th><!-- Data to be added later --></th>
</tr>
</thead>
<% foreach (var Carrier in ViewData.Model.Carriers) { %>
<tbody>
<tr>
<td class="carrier-row" onclick="$(this)
.closest('tbody')
.next('.section')
.slideToggle('fast');">
<%= Html.Encode(Carrier.Name) %>
</td>
<td>
<%= Html.Encode(Carrier.Value) %>
</td>
<td>
<%using(Html.BeginForm("Action", "Form")) {%>
<input type="hidden" name="FormKey" id="FormKey" value="<%= this.Request.Url.Query %>" />
<input type="submit" name="action" value="<%= Html.Encode(SFSys.Inst.I18n.GetText("Change")) %>" onclick='scriptForward = true' />
<%}%>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="3">
<div >
<table>
<tr>
<td>left 1</td>
<td>right 1</td>
</tr>
<tr>
<td>left 2</td>
<td>right 2</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
<% } %>
</table>
I am able to get each section to come up on its own, but when it does this, it alters my table, slides the information down from one cell, then stretches it over. Is there a way to make the information slide down at the length of the table?
Although I was unable to find a proper solution, using the jQuery Accordion objects managed to create what I was looking for. More information about that can be found at jQuery Accordion
Related
I'm having trouble downloading the data from the table that I only wanted. I have a ejs file that retrieves data and show it in a table. and then I added some input:search that search through the data in the table and only display that matches the string in the search bar. I already have this download button that only download the whole table what I want is to only download what is shown in the table once I uses search bar.
I tried searching in the net but all I can see is download for static table data/without search query.
this is what I followed on how to download table to xls file https://www.codexworld.com/export-html-table-data-to-excel-using-javascript/
this is my index.ejs
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<hr>
<div class="tableFixHead">
<% if(details!=null) { %>
<table class="text-center table table-striped table-hover table-dark table-fixed">
<thead>
<tr class="table-primary" style="color:black; font-weight:bold;">
<th scope="col">Route</th>
<th scope="col">Origin </th>
<th scope="col">Destination</th>
<th scope="col">Estimated Time of Arrival </th>
<th scope="col">Date </th>
<th scope="col">Time</th>
</tr>
</thead>
<% details.forEach(function(item){ %>
<tbody id="myTable">
<tr>
<td>
<%= item.route%>
</td>
<td>
<%= item.origin %>
</td>
<td>
<%= item.destination%>
</td>
<td>
<%= item.estimatedTimeOfArrival %>
</td>
<td>
<%= item.date%>
</td>
<td>
<%= item.time%>
</td>
</tr>
</tbody>
<% }) %>
</table>
<% } %>
</div>
<button onclick="exportTableToCSV('data.csv')">Download Table</button>
</div>
this is the code that filter the table in search query
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
I expect that once I use the search bar and it shows only the data that I wanted after that once I click the download button it will only download the shown data not the whole data in the table.
for example I search number 1 in the table it will only display all data that has number 1 and so that's what I only wanted to download, but the case is after clicking the download it includes all the number not just 1
Thank you in advance.
I have made a travelrecords table in a jsp page and nowIi want to have an edit option to edit the travelstartdate and travelenddate as can be seen in capture1.
When I click on the edit option a form is popup:ed which only allows the user to edit travelstartdate and travelenddate and then apply with the new values as can be seen in capture2.
The popup form is getting respected concurid but when I click on the apply button the changes are not saved in the database as the button is not getting respected concurid value and thus not passing further to its servlet for a database update.
The popup form is the jsp page where I have used inline java code to get the concurid value from some other jsp page (which is cid and it's working).
But I am not able to use this cid variable or directly request.getParameter("concurid") inside button onclick function as this cid value has been called in the script <% %> tags.
In the servlet page I am getting concurid value by using String CONCURID=request.getParameter("cocurid");
How can I pass this value outside the script tags i.e. in the button, so that it can be sent to some servlet page for update in database?
(POPUP.jsp)
<html>
<%# page import = "java.io.*,
javax.servlet.*,java.sql.*,java.util.*,java.time.LocalDate" %>
<body>
<%# page import="java.sql.*" %>
<%# page import="java.io.*" %>
<%# page import="java.util.*"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<form action="ServletEdit">
<table style="float:left;color:white; font-family:
Arial, Helvetica, sans-serif; font-size:11.6px;font-weight:bold;"
border="4" cellpadding="4" cellspacing="4">
<tr bgcolor="#928E8E" style="border:1pt solid
black">
<tr>
<td>FULLNAME</td>
</tr>
<tr>
<td>FUNCTION</td>
</tr>
<tr>
<td>MANAGER</td>
</tr>
<tr>
<td>PURPOSE</td>
</tr>
<tr>
<td>PNAME</td>
</tr>
<tr>
<td>MEETING</td>
</tr>
<tr>
<td style="height: 29px;">REQDATE</td>
</tr>
<tr>
<td style="height: 34px;">STARTDATE</td>
</tr>
<tr>
<td style="height: 34px;">ENDDATE</td>
</tr>
<tr>
<td style="height: 31px;">NUMDAYS</td>
</tr>
<tr>
<td>SOURCE</td>
</tr>
<tr>
<td>DEST</td>
</tr>
<tr>
<td>CDATE</td>
</tr>
<tr>
<td>CID</td>
</tr>
<tr>
<td>REMARKS</td>
</tr>
</tr>
</table>
<%
try
{ Connectioncon=DriverManager.getConnection
("jdbc:oracle:thin:#localhost:1521:xe","system","up78cp5317");
String pd=request.getParameter("REQUESTDATE");
String cid=request.getParameter("concurid");
String query="select * from APPROVAL Where
CONCURID='"+cid+"'";
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery(query);
while(rs.next())
{
%>
<table style="float:left;color:white;
font-family: Arial, Helvetica,
sans-serif; font-size:11.6px;font-weight:bold;" border="4"
cellpadding="4" cellspacing="4" >
<tr>
<tr>
<td><%=rs.getString("FULLNAME")%></td>
</tr>
<tr>
<td><%=rs.getString("FUNCTION")%></td>
</tr>
<tr>
<td><%=rs.getString("RESOURCEMANAGER")%></td>
</tr>
<tr>
<td><%=rs.getString("PURPOSEOFTRAVEL")%></td>
</tr>
<tr>
<td><%=rs.getString("PROJECTNAME")%></td>
</tr>
<tr>
<td><%=rs.getString("MEETINGDETAILS")%></td>
</tr>
<tr>
<td><textarea rows="1" cols="30"
name="RequestDate" type="date" readonly maxlength="100"
class="textbox" style="width: 150px;" id="pick_date"
onchange="cal()"><%=rs.getString("REQUESTDATE")%>
</textarea></td>
<script type="text/javascript">
function GetDays()
{
var dropdt = new
Date(document.getElementById("drop_date").value);
var pickdt = new
Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 *
1000));
}
function cal()
{
if(document.getElementById("drop_date"))
{
document.getElementById("numdays3").value=GetDays();
}
}
</script>
<tr>
<td><input name="TravelStartDate" type="date"
maxlength="100" class="textbox" style="width: 150px"
id="drop_date" onchange="cal()"/></td>
</tr>
<tr>
<td><input name="TravelEndDate" type="date" maxlength="100"
style="width: 150px"/></td>
</tr>
<tr>
<td><input name="numdays" type="text" maxlength="100"
readonly class="textbox" style="width: 150px" id="numdays3"
/></td>
</tr>
<tr>
<td><%=rs.getString("TRAVELSOURCE") %></td>
</tr>
<tr>
<td><%=rs.getString("TRAVELDESTINATION") %></td>
</tr>
<tr>
<td><%=rs.getString("CONCURDATE") %></td>
</tr>
<tr>
<td><%=rs.getString("CONCURID") %></td>
</tr>
<tr>
<td><%=rs.getString("ANYREMARKS") %></td>
</tr>
</tr>
</table>
<button type="submit" name="sign" value="SIGNIN"
onclick="location.href='ServletEdit?CONCURID=
<%=request.getParameter("concurid")%>'" style="width:70px;
height:30px;
margin-right:20%;
border:none;
border-radius:2px;
font-size:13px;
font-weight:bold;">Apply</button>
<%
}
%>
<%
}
catch(Exception e)
{
e.printStackTrace();
}
%>
</article>
</section>
</form>
</body>
Instead of this
<button type="submit" name="sign" value="SIGNIN"
onclick="location.href='ServletEdit?CONCURID=
<%=request.getParameter("concurid")%>'">Apply</button>
You can make an input field and keep it hidden ,also put this inside your form tag
<input type="text" name="concurid" value="<%=request.getParameter("concurid")%>" hidden>
And call this directly using request.getParameter("concurid") in your servlet .Also your button will be like this
<button type="submit" name="sign" value="SIGNIN" >Apply</button>
In html table i have checkbox for each row. by clicking on check box it has to select person name of the table. but it is not working. and i want to provide validation for this check box user can select only check box at a time.
HTML:
<table id="personTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_b" onclick="selectAll(this)"/>
SA
</th>
<th>person name</th>
<th> address</th>
</tr>
</thead>
<tbody class="person_table">
<% #persons.all.each do |person| %>
<tr id="tr_prns_<%=person.id %>">
<td>
<input type="checkbox" class="radio" name="checkBox[]"
onchange="personClickedBox(this.name)"/>
</td>
<td class="person" style="word-break:break-all;">
<%= person.name%>
</td>
<td class="person" style="word-break:break-all;">
<%= person.address%>
</td>
</tr>
<% end %>
</tbody>
</table>
JAVASCRIPT:
function personClickedBox(checkBoxName){
var values = new Array();
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"),
function () {
values.input($(this).text().trim());
});
}
by clicking on check box it has to select person name
Your code get the clicked check box value perfectly. What you need to do is add a css style to select the specific raw
I have a small Backbone / Underscore app. I have rendered one template, along with rendering a method call "onclick" of a button (which works smoothly, btw). The function which is called, renders another template, which has another method call "onclick" of a button.
#showTransportsTemplate: first template / has a "transport" model passed to it
bookTicket(tid): first function / uses "tid" to fetch the associated transport model from the collection AND sets them into a "booking model" which is passed on to the second template
#confirmBookingTemplate: second template
confirmBooking() : second method (which exists but is not being recognized and hence not called)
Here is the code:
related part of app.js:
function bookTicket(tid)
{
alert("received tid: "+tid);
var transport = transportList.findWhere({id:tid});
console.log(transport);
var newBooking = new Booking();
newBooking.set('id',"b"+getBookingId());
newBooking.set('mode',transport.get('mode'));
newBooking.set('source',transport.get('source'));
newBooking.set('destination',transport.get('destination'));
newBooking.set('date',transport.get('date'));
newBooking.set('class',transport.get('class'));
newBooking.set('rate',transport.get('rate'));
var confirmBookingTemplate = _.template($('#confirmBookingTemplate').html(), {booking: newBooking});
alert(confirmBookingTemplate); // for testing purposes
$(confirmBooking.el).show();
$(confirmBooking.el).html(confirmBookingTemplate);
}
function confirmBooking()
{
alert("confirmBooking"); // no further code written coz this function is not getting called
}
The two templates:
<script type="text/template" id="showTransportsTemplate">
<table border="1">
<tr>
<th> Source </th>
<th> Destination </th>
<th> Date Available </th>
<th> Class </th>
<th> Rate </th>
<th> Book </th>
</tr>
<% _.each(selTransports, function (transport) {
var myid= transport.get("id");
%>
<tr>
<td align="center"> <%= transport.get("source") %> </td>
<td align="center"> <%= transport.get("destination") %> </td>
<td align="center"> <%= transport.get("date") %> </td>
<td align="center"> <%= transport.get("class") %> </td>
<td align="center"> <%= transport.get("rate") %> </td>
<td> <input type="button" onclick="bookTicket('<%= myid %>')" value="Book">
</input>
</td>
<td> <%= myid %> </td>
</tr>
<%
});
%>
</table>
</script>
<script type="text/template" id="confirmBookingTemplate">
<br /><br />
<h3> Booking Details </h3>
<br />
<table cellspacing="3" cellpadding="3">
<tr>
<td> <b> Customer Name: </b> </td>
<td> <input type="text" id="cname" /> </td>
</tr>
<tr>
<td colspan="2">
<%
var travel;
if (booking.get("mode") === "F") travel = "Flight"
else if (booking.get("mode") === "B") travel = "Bus"
else if (booking.get("mode") === "T") travel = "Train"
%>
<b><%= travel %></b> from <b><%=booking.get("source")%></b> to <b><%=booking.get("destination")%></b>
in <b><%=booking.get("class")%></b> class on <b><%=booking.get("date")%></b>
</td>
</tr>
<tr>
<td> <b> Cost per ticket: </b> </td>
<td> Rs. <%= booking.get("rate") %> </td>
</tr>
<tr>
<td> <b> No. of Adults: </b> </td>
<td> <input type="text" id="adults" /> </td>
</tr>
<tr>
<td> <b> No. of Children: </b> </td>
<td> <input type="text" id="children" /> </td>
</tr>
<tr>
<td> <b> Total Amount: </b> </td>
<td> <output id="totalAmount"> </output> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Book Ticket" id="confirm" onclick="confirmBooking()">
</td>
</tr>
</table>
</script>
I tried with Chrome, the error was "object is not a function". Firebug says: "confirmBooking()" is not a function, BUT IT ALREADY EXISTS.
Underscore's template function uses a javascript with block when evaluating templates, which means that any "unqualified names" are assumed to be part of the data object passed-in to the template method. In this case, confirmBooking is not part of that object, and so the template is not able to find it.
If you truly wish to invoke a global function from within your template (and you should think twice about defining functions in the global namespace), then you may do so by explicitly referencing the window object, like so:
window.someGlobalFunction = function() {
return "It worked!";
}
<script type="text/template" id="template">
<%= window.someGlobalFunction() %>
</script>
A functioning example: http://jsfiddle.net/dmillz/pqjtR/
I have a user preference page in which the user can type in their current password, new password and confirm new password. When the user submits the form it sends them to an action. The problem is that when the form submits, the password fields stay filled. I want them to clear. I attempted javascript but when I use document.preferences.submit(), the submit isn't fired, or the action isn't fired, or both. Here is the code:
<script language="JavaScript" type="text/javascript">
function clearpwd() {
document.preferences.submit();
document.preferences.currentPassword.value = '';
document.preferences.newPassword.value = '';
document.preferences.confirmPassword.value = '';
}
</script>
<% using (Html.BeginForm("ChangePreferences", "Home", FormMethod.Post, new { id="preferences", name="preferences" })) { %>
<div>
<div style="text-align:left; width:500px;">
<div class="FormLabel">User Information:</div>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td>First Name:</td>
<td>
<%= Html.TextBox("firstName")%>
<%= Html.ValidationMessage("FirstName") %>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<%= Html.TextBox("lastName") %>
<%= Html.ValidationMessage("LastName") %>
</td>
</tr>
<tr>
<td>New email:</td>
<td>
<%= Html.TextBox("email")%>
<%= Html.ValidationMessage("Email") %>
</td>
</tr>
<tr>
<td>Billing Method:</td>
<td>
<%=Html.RadioButton("billingMethod", 'E', new { id = "BillingMethod_E", value = 'E' })%><label for="BillingMethod_E">Electronic</label>
<%=Html.RadioButton("billingMethod", 'M', new { id = "BillingMethod_M", value = 'M' })%><label for="BillingMethod_M">Mailing</label>
</td>
</tr>
</table>
</div>
<br /><br />
<div style="text-align:left; width:500px;">
<div class="FormLabel">Login and Security Information:</div>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td>Current Password</td>
<td>
<%= Html.Password("currentPassword") %>
<%= Html.ValidationMessage("currentPassword") %>
</td>
</tr>
<tr>
<td>New password:</td>
<td>
<%= Html.Password("newPassword") %>
<%= Html.ValidationMessage("newPassword") %>
</td>
</tr>
<tr>
<td>Confirm new password:</td>
<td>
<%= Html.Password("confirmPassword") %>
<%= Html.ValidationMessage("confirmPassword") %>
</td>
</tr>
<tr>
<td>Security Question:</td>
<td>
<%= Html.TextBox("securityQuestion") %>
<%= Html.ValidationMessage("SecurityQuestion") %>
</td>
</tr>
<tr>
<td>Security Answer:</td>
<td>
<%= Html.Password("securityAnswer") %>
<%= Html.ValidationMessage("SecurityAnswer") %>
</td>
</tr>
</table>
</div>
<br /><br />
<table>
<tr>
<td></td>
<td><input type="submit" value="Change Preferences" onclick="clearpwd()" /></td>
</tr>
</table>
</div>
<% } %>
To Debug JavaScript Problems, better post the generated HTML
To debug JavaScript problems easier, use Firefox browser with Firebug Extension.
Edit: You are trying to clear the password, after page is submitted. After submission page navigates to another page, so i think, JavaScript won't affect any DOM elements after that.
You can try the following sequence.
Store Username and Password on JavaScript variables.
clear Username and Password values.
Post to the page with the stored values.
It could be your browser filling in the password field if you have it set to remember your password(s). I've had this happen to me.