I have a button inside a table for each database entry. As forms cannot be in tables I can't use the form to make a request. I added a little portion of javascript to each button that should make a get request with the database id and redirect to a different page. It does not seem to be working. I tested creating a dummy form and making the same get request on the page and that worked. Any ideas why this isn't working?
Nodejs file Router
const express = require('express')
const router = express.Router()
router.get('/testRedirect/:id', (req, res) => res.render('pages/about'))
module.exports = router
<!DOCTYPE html>
<html>
<head>
<% include ../partials/header.ejs %>
</head>
<body>
<% include ../partials/nav.ejs %>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<% results.forEach(function(r) { %>
<tr>
<th scope="row">
<%= r.id %>
</th>
<th scope="row">
<%= r.name %>
</th>
<td>
<button type="submit" id=<%=r.quiz_id %> class="btn btn-primary">Edit</button>
<script type="text/javascript">
$(function() {
var id = <%=r.id %>
var idString = "#" + id
$(idString).click(function() {
$.get('/testRedirect/' + id)
})
});
</script>
</td>
<td>
<button type="submit" id=<%=r.Id %> class="btn btn-primary">Delete</button>
<script type="text/javascript">
</script>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
<form action="/testRedirect/1" method="GET">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
Do you realy need a script block for every button. Can't you use onclick attribute:
<button type="button" id=<%=r.quiz_id %> onclick="location.href='/testRedirect/#<%=r.quiz_id %>'" class="btn btn-primary">Edit</button>
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.
This is my first question on StackOverflow. When following RESTful routes, you can make a delete button that destroys a single page and entry in MongoDB.
My question is how to make a delete button that destroys only a single table row and the same data from MongoDB? I can add a contact successfully, but I don't know how to delete it from a page
This is my code for a table that needs modification:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone Number</th>
<th>Action</th>
</tr>
</thead>
<% phonebook.forEach(function(contact){ %>
<tbody>
<tr>
<td>
<%= contact.firstName %>
</td>
<td>
<%= contact.lastName %>
</td>
<td>
<%= contact.phone %>
</td>
<td>
<form action="/phonebook?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
</tbody>
<% }); %>
</table>
And this is my code from routes, that needs modification:
//DESTROY
app.delete("/phonebook/:id", function(req, res){
Phonebook.findByIdAndRemove(req.params.id, function(err){
if(err){
res.redirect("/phonebook");
} else {
res.redirect("/phonebook");
}
});
});
Change this line:
<form action="/phonebook?_method=DELETE" method="POST">
To:
<form action="/phonebook/<%= contact.id %>?_method=DELETE" method="POST">
I need to pass from search.jsp the id of the checked row of the table to delete.jsp in order to delete it , but when i am doing this with the bellow code , nothing happens , none checked row deleted from database
delete.jsp
<%
Class.forName("com.mysql.jdbc.Driver");
String myDatabase = "jdbc:mysql://localhost:3306/project_app?user=root&password=1234";
Connection myConnection = DriverManager.getConnection(myDatabase);
Statement myStatement = myConnection.createStatement();
myStatement.executeUpdate("DELETE * FROM Dest WHERE idDest ='"+request.getParameter("id1")+"' ");
myStatement.close();
myConnection.close();
%>
search.jsp
<%
int id2;
Class.forName("com.mysql.jdbc.Driver");
String myDatabase = "jdbc:mysql://localhost:3306/project_app?user=root&password=1234";
Connection myConnection = DriverManager.getConnection(myDatabase);
Statement myStatement = myConnection.createStatement();
String search=request.getParameter("search");
ResultSet rs = myStatement.executeQuery("SELECT * FROM dest WHERE Country='"+search+"' OR City='"+search+"'");
if (rs.next()) {
%>
<table style="width:100%">
<table id="Dest_table">
<tr>
<th id="chke">Check </th>
<th id="Country">Country</th>
<th id="City">City</th>
<th id="URL">Url of Destination</th>
<th id= "DestNO">Dest no </th>
<th id="Act"> Action</th>
</tr>
<tr> <%while(rs.next()){ %>
<td><input type="checkbox" name=chk onclick='window.location.assign('delete.jsp?id1='<%=rs.getString("idDest") %>")' /> </td>
<td> <%=rs.getString("Country") %></td>
<td> <%=rs.getString("City") %> </td>
<td> <a href=<%=rs.getString("Url") %> > <%=rs.getString("URL") %> </a>
<td> <%=rs.getString("idDest") %> </td>
<TD><a href="delete.jsp" class="button cross" ></a>
<TD><input <a href="edit.jsp" type="submit" name="edit" value="Edit" style="background-color: ff0000;font-weight:bold;color:#ffffff;"></TD>
</TR>
</tr>
<% }}
else { out.println("NOT FOUND Try Again"); }%>
</table>
<%
myStatement.close();
myConnection.close(); %>
I have JSP page which displays the records fetched from mysql through java servlet. Now I want filter the obtained records using jquery. I used the following code with head section of jsp page
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">
</script><script type= "text/javascript">{$(document).ready(function()
{$("#searchInput").keyup(function() {
var rows = $("#fbody").find("tr").hide();
var data = this.value.split(" ");
$.each(data, function(i, v) {
rows.filter(":contains('" + v + "')").show();
});
})})};
</script>
The code for getting the records from servlet and displaying it in the JSP is given below
<body><input id="searchInput" ><br/>
<TABLE align="Center" border="1px" width="80%">
<thead>
<tr><th><b>User_ID</b></th>
<th><b>User_Name</b></th>
<th><b>Password</b></th>
<th><b>Designation</b></th>
</tr>
</thead>
<%Iterator itr;%>
<%List data=(List) request.getAttribute("UserData");
for(itr=data.iterator();itr.hasNext();)
{%>
<tbody id="fbody">
<tr>
<% String s= (String) itr.next(); %>
<td><%=s %></td>
<td><%=itr.next() %></td>
<td><%=itr.next() %></td>
<td><%=itr.next() %></td>
<form id="edit" action="EditRecord" method="post" >
<td><input type="hidden" name="hidden_edit" id="edit_id" value="<%=s %>"/>
<input type="submit" value="Edit" name="edit"> </td>
</form>
<td><form id="delete" action="DeleteRecord" method="post" >
<td><input type="hidden" name="hidden_delete" id="delete_id" value="<%=s %>"/>
<input type="submit" value="delete" name="delete"> </td>
</form></td>
<%} %>
</tr>
</tbody>
</TABLE></body>
I am able to get all the records but the script is not filtering my record. Dont know where is the problem.Could any one help me out please.
Take tbody out of your for loop.
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.