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.
Related
I want to make each row editable in table. For this I place rows with text_fields in each bellow the row with table data.
<style>
.dtr{
display:none;
}
</style>
<body>
<div class="container" align="center">
<h1>Products Description</h1>
</div>
<br />
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<% #csv_table.each do |row| %>
<tr class="mtr">
<% row.each do |key, value| %>
<%unless key == "id"%>
<td class="value"><%= value %></td>
<%end%>
<% end %>
<td>
<div class="edit">
<%=link_to "Edit",class: 'form-control' %>
</div>
<div class="delete">
<%=link_to "Delete",class: 'form-control' %>
</div>
</td>
</tr>
<tr class="dtr">
<td>
<%= text_field_tag :login_aei2, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei3, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei4, "", class: 'form-control' %>
</td>
<td>
<%=link_to "Save", remote: true, class: 'form-control' %>
</td>
</tr>
<%end%>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$(".edit").click(function(){
debugger;
var mtr = this.closest(".mtr");
mtr.style.display = "none";
mtr.nextElementSibling.style.display="inline";
// this.parentElement.parentElement.style.display='none';
event.preventDefault();
});
});
</script>
When I click on edit button current row become hidden and the row with input field get shown but the problem is, it shows only in area of table data not in whole row. please help. Thanks in advance
So when the user click on "edit", its necessary to know exactly what Info has been clicked, in order to update to the database, and in order to show and hide the infos.
The changes that I've made is based on a demo-data that I've created to develop this solution:
#csv_table = [ {id:3, product: "Product", description: "Description",
brand:"Brand", action: "Action" }, {id:4, product: "Product2",
description: "Description2", brand:"Brand2", action: "Action2" }]
This is so called "Array of Hashes", and I thought that was what you were using too.
In the complete code, as we iterate throught the array, we can see two values that are name, and value. I used "value" instead of id, because I didnt want to cause a html conflict. So you can see in the code this:
<% value = row[:id] %>
And this
<% name = key[0] %>
Then each row has the field, and has the info (but one of them is hidden), like so:
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
Can you notice that the id it has name and value? In that way we can tell JQuery to look for the field we have clicked. For example info_product1, and field_product1, and set it to hide(); or show();. Below is the complete code, these are mostly javascript and html tricks, so you can try to play around a little bit:
Ruby + Html:
<style>
.dtr{
display:none;
}
</style>
<div class="container" align="center">
<h1>Products Description</h1>
</div><br />
<table class="table table-striped" border=2 style="border: 2px solid;">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
<th></th>
</tr>
</thead>
<tbody>
<% #csv_table.each_with_index do |row, i|%>
<% value = row[:id] %>
<tr class="mtr">
<% row.each_with_index do |key, j| %>
<% name = key[0] %>
<% unless j==0 %>
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
<% end %>
<% end %>
<td>
<%= link_to "Save", {}, remote: true, class: 'form-control save', 'value' => value %>
<div class="delete"><%=link_to "Delete",class: 'form-control'%></div>
</td>
</tr>
<% end %>
</tbody>
</table>
</body>
Javascript:
$(document).ready(function(){
$(".field").hide();
});
$(".info").click(function(event){
console.log("info");
name = $(this).attr("name");
id = $(this).attr("value");
console.log($(this).attr("value"));
$("#info_" + name + id).hide();
$("#field_" + name + id).show();
});
$(".save").click(function(event){
event.preventDefault();
// { .. if saves}
console.log("salvar");
id = $(this).attr("value");
$(".field_dtr" + id).hide();
$(".info_dtr" + id).show();
});
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>
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 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 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