I am creating a table that I want to have collapsing detail on each row. I am able to get this working for the first row of the table, but for every row after this, the button does not toggle. My code is below. I know I am probably missing something very simple here, but I am fairly new to web development. Any help is appreciated.
.js
for (var z=0;z<documentData.length;z++) {
$("#documents-result-table > tbody").append(
"<tr>" +
"<td>" + documentData[z].documentIdocNumber + "</td>" +
"<td>" + documentData[z].docNumber + "</td>" +
"<td>" + documentData[z].documentType + "</td>" +
"<td>" + documentData[z].status + "</td>" +
"<td>" + documentData[z].createdDate + "</td>" +
"<td>" + documentData[z].modifiedDate + "</td>" +
"<td>" + documentData[z].customerId + "</td>" +
"<td>" + documentData[z].customerName + "</td>" +
"<td><a target=\"_blank\" href=\"" + contextPath + "/viewPdf.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-eye-open\"></a></td>" +
"<td><a target=\"_blank\" href=\"" + contextPath + "/saveBak.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-floppy-save\"></a></td></tr>"
+ "<tr class=\"collapse\" id=\"collapseme\">" +
"<td></td><td colspan=\"9\"><table class=\"table table-striped table-curved\"><tr><th>Customer Id</th><th>Customer Name</th><th>Billing Plant</th><th>Country Code</th><th>Routing Code</th><th>Language</th></tr>" +
"<tr>" +
"<td>" + documentData[z].customerId + "</td>" +
"<td>" + documentData[z].customerName + "</td>" +
"<td>" + documentData[z].billingPlant + "</td>" +
"<td>" + documentData[z].countryCode + "</td>" +
"<td>" + documentData[z].routingCode + "</td>" +
"<td>" + documentData[z].language + "</td></tr>" +
"</table></td></tr>");
$('.collapse').collapse({toggle: false});
$('button span').click(function() {
$("#collapseme").collapse("toggle");
var span = $('button span').hasClass('glyphicon-chevron-down');
if(span){
$(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
}
else{
$(".glyphicon-chevron-right").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
}
});
My table is declared in another .jsp file, but I do not think this code is needed for a solution. Also to mention, this loop is inside an AJAX call in my .js file.
Thanks!
Related
I created an app that uses Leaflet in it.
In the screen where the map is, there is also a progressBar where I allow uses to search in a specific radius.
The moment they change the value in the progressBar, it changes the size of the circle marker inside the map.
I had like that my map will change its zoom to fit that circle in it.
My code for loading the map is:
String Map_HTML = "<html>\n" +
"<head>\n" +
"\n" +
" <title>Quick Start - Leaflet</title>\n" +
"\n" +
" <meta charset=\"utf-8\" />\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +
"\n" +
" <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"docs/images/favicon.ico\" />\n" +
"\n" +
" <link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet#1.4.0/dist/leaflet.css\" integrity=\"sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\" crossorigin=\"\"/>\n" +
" <script src=\"https://unpkg.com/leaflet#1.4.0/dist/leaflet.js\" integrity=\"sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\" crossorigin=\"\"></script>\n" +
"\n" +
"\n" +
"\n" +
"<style>\n" +
"body {\n" +
"padding: 0;\n" +
"margin: 0;\n" +
"}\n" +
"html, body, #map {\n" +
"height: 100%;\n" +
"width: 100%;\n" +
"}\n" +
"</style>\n" +
"</head>\n" +
"<body>\n" +
"\n" +
"\n" +
"\n" +
"<div id=\"mapid\" style=\"width: " + dpWidth + "px; height: " + dpHeight * 0.3 + "px;\"></div>\n" +
"<script>\n" +
"\n" +
"var mymap = L.map('mapid',{zoomControl: false}).setView([" + Lat + ", " + Lon + "], 10);\n" +
"\n" +
" L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n" +
" minZoom: 7,\n" +
" maxZoom: 17,\n" +
" attribution: '© OpenStreetMap contributors' \n" +
" }).addTo(mymap);\n" +
"\n" +
"mymap.attributionControl.setPosition('topleft')\n" +
"L.control.zoom({\n" +
"position: 'bottomright'\n" +
"}).addTo(mymap);\n" +
"L.marker([" + Lat + ", " + Lon + "]).addTo(mymap)\n" +
" .bindPopup(\"<b>My Location</b>\").openPopup();\n" +
"\n" +
"L.circle([" + Lat + ", " + Lon + "], " + Radius + ", {\n" +
" color: 'red',\n" +
" fillColor: '#8275FE',\n" +
" fillOpacity: 0.4,\n" +
" weight: '0'\n" +
"}).addTo(mymap);\n" +
"\n" +
"\n" +
"var popup = L.popup();\n" +
"\n" +
"</script>\n" +
"\n" +
"</body>\n" +
"</html>";
where Radius is a parameter I insert based on the value of the progressBar.
Right now it always initializes the map with zoom: 10 because I don't know how to change it dynamically as I want.
Any way to do so?
Thank you
the map can fit to the bounds of the circle with mymap.fitBounds(circle.getBounds());.
Change your code to:
"var circle = L.circle([" + Lat + ", " + Lon + "], " + Radius + ", {\n" +
" color: 'red',\n" +
" fillColor: '#8275FE',\n" +
" fillOpacity: 0.4,\n" +
" weight: '0'\n" +
"}).addTo(mymap);\n" +
"mymap.fitBounds(circle.getBounds());\n" +
List<Employee> records = employeeServicable.printAll();
int size = records.size();
for (int i = 0; i < size; i++) {
htmlRespone.append("<tr> " +
"<td>" + records.get(i).getId() + "</td>" +
"<td>" + records.get(i).getName() + "</td>" +
"<td>" + records.get(i).getDepartment() + "</td>"+
"<td>" + records.get(i).getPhoneNumber() + "</td>" +
"<td>" + records.get(i).getHireDate() + "</td>" +
"<td>" + records.get(i).getJob() + "</td>" +
"<td>" + records.get(i).getEducationLevel() + "</td>" +
"<td>" + records.get(i).getGender() + "</td>" +
"<td>" + records.get(i).getDateOfBirth() + "</td>" +
"<td>" + Integer.toString(records.get(i).getSalary()) + "</td>"
+ "</tr>");
}
htmlRespone.append("</table");
How can I send a specific row data to a servlet? I will attach a button at the end of each column but how will that button do it?
String textEmail= "Hi, \n this is an automatic message \n from sender.
StringBuffer buffer = sb.append("BEGIN:VCALENDAR\n" +
"PRODID:-//Microsoft Corporation//Outlook 9.0 MIMEDIR//EN\n" +
"VERSION:2.0\n" +
"METHOD:REQUEST\n" +
"BEGIN:VEVENT\n" +
"ATTENDEE;ROLE=REQ-PARTICIPANT;RSVP=TRUE:MAILTO:" +emailAdressTo+"\n" +
"ORGANIZER:MAILTO:XX#gmail.com\n" +
"DTSTART:" + meetingStartTime + "\n"+
"DTEND:" + meetingEndTime + "\n"+
"LOCATION: Room FR PAR-New York\n" +
"TRANSP:OPAQUE\n" +
"SEQUENCE:0\n" +
"UID:"+ uniqueId +"\n" +
"DTSTAMP:"+ meetingEndTime + "\n" +
"CATEGORIES:Meeting\n" +
"DESCRIPTION:"+textEmail +"\n" +
"SUMMARY:"+subjectEmail+"\n" +
"PRIORITY:5\n" +
"CLASS:PUBLIC\n" +
"BEGIN:VALARM\n" +
"TRIGGER:PT1440M\n" +
"ACTION:DISPLAY\n" +
"DESCRIPTION:Reminder\n" +
"END:VALARM\n" +
"END:VEVENT\n" +
"END:VCALENDAR");
email.setContent(buffer.toString(),"text/calendar");
email.setCharset("UTF-8");
the linebreaks breaks are not taken in consideration and my output is just:
"Hi,this is an automatic message from sender"
I have tried every think in this post:
[1]How do I format a String in an email so Outlook will print the line breaks? but still same result Any help would be apreciated, thks
List item
I have an HTML form in a servlet with several input parms, when I press the Submit button, I want to take the values from the form and write those to a file. I am not certain how to capture the parms to be used in the next .jsp. Here is my code:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
import java.text.*;
import java.util.Random;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.StringTokenizer;
public class CreateCust extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
HttpSession session = request.getSession();
// Generate a Customer Account using the Random Number Generator
// Calculate Confirmation Number
Random randomGenerator = new Random();
int custNum = randomGenerator.nextInt(10000);
String custId = "CST" + custNum;
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String title = "Customer Profile Information";
String MainPageURL =
response.encodeURL("/csj/CustomerAccounts.html");
String docType =
"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " +
"Transitional//EN\">\n";
out.println(docType +
"<HTML>\n" +
"<HEAD><TITLE>" + title + "</TITLE></HEAD>\n" +
"<BODY BGCOLOR=\"#FDF5E6\">\n" +
"<H1 ALIGN=\"CENTER\">" + title + "</H1>");
out.println("<BR>" +
"<BR>" +
"Previous Page");
out.println
("<Form>\n" +
"<CENTER>" +
"Please Enter the following Information:\n" +
"<TABLE border=1>" +
"<TR>" +
"<TD>" +
"Customer ID: " +
"</TD>" +
"<TD>" +
"<Label>" + custId + " </Label>\n" +
"</TD>" +
"</TR>" +
"<TR>" +
"<TD>" +
"Name:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_name\" </input>\n" +
"</TR>" +
"<BR>" +
"<TR>" +
"<TD>" +
"Street Address:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_Add1\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR>" +
"<TD>" +
"Apt or Suite:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_Add2\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR>" +
"<TD>" +
"City:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_City\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR><TD>" +
"State:" +
"</TD><TD>" +
"<Input type=\"Text\" name=\"F_state\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR><TD>" +
"Zip Code:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_Zip\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR>" +
"<TD>" +
"Phone Number:" +
"</TD>" +
"<TD>" +
"<Input type=\"Text\" name=\"F_Phone\" </input>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR><TD>" +
"Cable Plan:" +
"</TD>" +
"<TD>" +
"<select>\n" +
"<option value=\"selcab\">Select Cable</option>\n" +
"<option value=\"Basic50\">Basic50</option>\n" +
"<option value=\"Basic100\">Basic100</option>\n" +
"<option value=\"Ultimate200\">Ultimate200</option>\n" +
"</select>\n" +
"</TD>" +
"</TR>" +
"<BR>" +
"<TR><TD>" +
"Internet Plan:" +
"</TD>" +
"<TD>" +
"<select>\n" +
"<option value=\"selInt\">Select Internet</option>\n" +
"<option value=\"speedlane\">SpeedLane</option>\n" +
"<option value=\"lightlane\">LightLane</option>\n" +
"</select>\n" +
"</TD>" +
"</TR>" +
"<TABLE>" +
"</CENTER>" +
"</Form>" );
String confirmURL =
response.encodeURL("/csj/ConfirmCust");
// "Proceed to Checkout" button below table
out.println
("</TABLE>\n" +
"<FORM ACTION=\"" + confirmURL + "\">\n" +
"<BIG><CENTER>\n" +
"<INPUT TYPE=\"SUBMIT\"\n" +
" VALUE=\"Create Account\">\n" +
"</CENTER></BIG>" +
"</FORM>");
out.println("</BODY></HTML>");
}
}
when I press the Submit button, I want to take the values from the form
For this you have to do request.getParameter("input parameter name");
Well in your servlet you have 2 forms one having action and another does not have.
See this
out.println
("</TABLE>\n" +
"<FORM ACTION=\"" + confirmURL + "\">\n" +
"<BIG><CENTER>\n" +
"<INPUT TYPE=\"SUBMIT\"\n" +
" VALUE=\"Create Account\">\n" +
"</CENTER></BIG>" +
"</FORM>");
here form action is present but when you press submit it calls confirmURL but mo values are passed(as it is not having any input parameter).
Now in this
out.println
("<Form>\n" +
"<CENTER>" +
"Please Enter the following Information:\n" +
"<TABLE border=1>" +
"<TR>" +
"<TD>" +
"Customer ID: " +
"</TD>" +
"<TD>" +
"<Label>" + custId + " </Label>\n" +
....................
input parameter are present but no submit button and no form action
So no action will be performed and hence no values will be passed.
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+
The column having name 'title' (class name) needs to be affected by style sheet to decrease the width of column. Only that single column needs to be affected. There are more columns.
This is CSS:
td.title{
width:18%;
}
But this CSS affects all the columns in the table. The width of rest columns affected , but some of them has the width different than specified by CSS. I tried inline style sheet, but still it affects all columns.
What is the problem? Cheers
Additional details:
private String getBeginning(int tableNumber)
{
return "<html><head><title>"+ (tableNumber - 1)+"</title>"
+ "</head><body>"
+ "<table id='example' class='tablesorter' cellpadding='3' >" // border='1' cellpadding='1' cellspacing='2'
+ "<thead>"
+ "<tr class='tHead'>"
+ "<th/>"
+ "<th>Title</th>"
+ "<th>Total Price</th>"
+ "<th>Currency</th>"
+ "<th>Condition</th>"
+ "<th>Location</th>"
+ "<th>End Time</th>"
+ "<th>Map</th>"
+ "</tr>"
+ "</thead>"
+ "<tbody>";
}
middle += "<tr class='tRow'>"
+ "<td>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ gallery
+ "</a>"
+ "</td>"
+ "<td class='title'>"
+ "<a href='" + output.get(i).get("itemURL") + "'>"
+ ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '
+ "</a>"
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("total") +""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("currency")+""
+ "</td>"
+ "<td>"
+ ""+condition+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("location")+""
+ "</td>"
+ "<td>"
+ ""+output.get(i).get("endTime").split("T")[0]+""
+ "</td>"
+ "<td>"
+ "<a href='" + getMap(location, postCode, "0") + "'>"
+ "<img src='" + getMap(location, postCode, "1") + "'> "
+"</a>"
+ "</td>"
+ "</tr>";
String end ="";
I am running this Web app on Firefox 3.6.11. Did not try to run it on different browsers.
The important thing to note here is that percentage values relate to the amount of space available to the table, not to the page or containing div. Try using an absolute value like 200. It might also complicate things if you already have width set on the table meaning you're not letting the browser decide how wide it will end up.
Without seeing the rest of your code and knowing what context the table is in, or whether you have width set on the table itself, I can tell you that setting a width on a single column when the table itself has a width set on it will change the width of the other columns as they bump about to fill up space. In this situation it is generally a good idea to let the size of the cells sort themselves out, as the algorithm used to set the width is very dynamic. Alternatively you could be very strict and set the width on each column exactly as you will want it to appear.
To read up on the subject, see the HTML specification.