I want to append and collapse child row by clicking parent row, but it does not work.
What should I do. Can anybody help??
This is my parent row:
$j(document).ready(function(){
$.ajax({
type: 'POST',
url:"scr1.php",
}).done(function(data){
for(var i=0; i<data.length; i++){
var no = i+1;
$table ="<tr class='row-parent'>";
$table += "<td align='right'>"+no+ "</td>";
$table += "<td class='row-child'>"+data[i].uid+ "</td>";
$table += "<td>"+data[i].document_id+ "</td>";
$table += "<td>"+data[i].activity+ "</td>";
$table += "<td>"+data[i].date_time+ "</td>";
$table +="</tr>";
$("#docLoc").append($table);
}
});
});
And this is my child row:
//child row
$(".row-parent").live("click",function(){
var param = $(this).closest('tr').find('.row-child').text();//GET uid of row
$.ajax({
type: 'POST',
url:"scr2.php",
data:{ uid: param},
//Link to history.php. Pass user_id to url
}).done(function(data){
for(var i=0; i<data.length; i++){
alert(data[i].uid);
var no = i+1;
$table ="<tr>";
$table += "<td align='right'>"+no+ "</td>";
$table += "<td>"+data[i].uid+ "</td>";
$table += "<td>"+data[i].document_id+ "</td>";
$table += "<td>"+data[i].activity+ "</td>";
$table += "<td>"+data[i].date+ "</td>";
$table +="</tr>";
$("#docLoc").append($table);
}
});
});
Did I miss out something??
Thanks in advance!!
If the object is dynamically produced, you will need to call use ".on" method on the parent (which always exists)
and a ".enhanceWithin()" method on the parent after creating the child for it to respond to jQuery
Related
i want to ask about my code..
i have made jquery server side function for diplaying data from database into a table. i made the code firstly working well but after i try to add more code for creating a thead before creating the tbody the code wont work..
this is the code i made..
please help me to solve this
// JavaScript Document
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/spl_inputselect_data.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
var tr = "<tr>";
theadData = '<tr>' +
'<th>Nama Karyawan</th>' +
'<th>Tanggal</th>' +
'<th>Bagian</th>' +
'<th>Cost Center</th>' +
'<th>Jam Mulai</th>' +
'<th>Jam Selesai</th>' +
'<th>Status Lembur</th>' +
'<th>Total Jam</th>' +
'<th>Tugas</th>' +
'</tr>';
tr += "<td>" +list[i]['no']+"</td>";
tr += "<td>" +list[i]['nama']+"</td>";
tr += "<td>" +list[i]['tanggal']+"</td>";
tr += "<td>" +list[i]['jam_mulai']+"</td>";
tr += "<td>" +list[i]['jam_selesai']+"</td>";
tr += "<td>" +list[i]['status']+"</td>";
tr += "<td>" +list[i]['total']+"</td>";
tr += "<td>" +list[i]['bagian']+"</td>";
tr += "<td>" +list[i]['cost']+"</td>";
tr += "<td>" +list[i]['tugas']+"</td>";
tr += "</tr>";
$("#check_data tbody").append(tr);
}
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You should append your head directly to the table only once and not within the loop:
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/spl_inputselect_data.php",
success: function(data){
var list = JSON.parse(data);
if(list.length > 0)
{
$("#check_data thead").html('<tr>' +
'<th>Nama Karyawan</th>' +
'<th>Tanggal</th>' +
'<th>Bagian</th>' +
'<th>Cost Center</th>' +
'<th>Jam Mulai</th>' +
'<th>Jam Selesai</th>' +
'<th>Status Lembur</th>' +
'<th>Total Jam</th>' +
'<th>Tugas</th>' +
'</tr>');
for(var i=0; i < list.length; i++){
var tr = "<tr>";
tr += "<td>" +list[i]['no']+"</td>";
tr += "<td>" +list[i]['nama']+"</td>";
tr += "<td>" +list[i]['tanggal']+"</td>";
tr += "<td>" +list[i]['jam_mulai']+"</td>";
tr += "<td>" +list[i]['jam_selesai']+"</td>";
tr += "<td>" +list[i]['status']+"</td>";
tr += "<td>" +list[i]['total']+"</td>";
tr += "<td>" +list[i]['bagian']+"</td>";
tr += "<td>" +list[i]['cost']+"</td>";
tr += "<td>" +list[i]['tugas']+"</td>";
tr += "</tr>";
$("#check_data tbody").append(tr);
}
}
return false;
}
});
});
I need to implement drag and drop feature form one table to another and vise versa.
This is my function where i get transactions to particular IBAN number, I also have the same function which retrieves users transaction which are hidden.
function getAllTransactions(iban) {
var iban = $("#ibanSelection").val();
var username = $("#hiddenusername").val();
var url = 'http://localhost:64300/api/BankAccountApi/GetUserTransaction/?iban=' + iban;
var table = "<table id=\"table1\">";
if ((username != "") && (iban !="")) {
$.getJSON(url, function (data) {
table += "<tr class=\"ibanSelection\">";
table += "<th>My IBAN</th>";
table += "<th>Send to IBAN</th>";
table += "<th>Transfer Date</th>";
table += "<th>Amount</th>";
table += "</tr>";
$.each(data, function (key, val) {
table += "<tr class=\"draggable_tr\">";
table += "<td>" + val.My_Iabn + "</td>";
table += "<td>" + val.Iban_To + "</td>";
table += "<td>" + val.Transfer_Date + "</td>";
table += "<td>" + val.Amount_Transferd + "</td>";
table += "</tr>";
});
table += "</table>";
$("#divResult2").html(table);
});
}
}
Just use the jQueryUI Sortable feature.
Here's the complete example + documentation. Very easy.
Also this example shows your case:
http://jqueryui.com/sortable/#connect-lists
I am developing first JSP application. I have two database tables in MS Access connected with JSP using DSN. What I have to do is very simple. I have a input text box which takes "ID" as input and a Button to view Record. On Button Click, result set will be retrieved from both the tables having records with ID same as input in textbox.
On Button Click, a table should be dynamically created displaying the values retrieved in result set.OnClick Calls a Javascript method ShowData and passes it the values of result set which are placed in dynamic tables.
So form elements' values will be processed after onClick and my result set having records before onClick, as you can see in the code, therefore, I am not able to display correct result as text-input goes null in query and inaccurate result set is achieved.
Please guide me how to properly send text input value to query on ButtonClick Event.
Hope I am clear.
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%#page import="java.sql.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="javascript">
// creating dynamic tables
function showData(std_id,std_name,std_prog,std_email,std_semester,std_course,std_status,std_title,std_score,std_credit_hour){
var width = 25;
var theader = "<table border='5' id='table1' width = ' "+ width +"% '>";
var tbody = "";
var t2header = "<table border='5' id='table2' width = ' "+ width +"% '>";
var t2body ="";
tbody += "<tr>";
tbody += "<td>";
tbody += "Student ID";
tbody += "</td>";
tbody += "<td>";
tbody += std_id;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Student Name";
tbody += "</td>";
tbody += "<td>";
tbody += std_name;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Study Program";
tbody += "</td>";
tbody += "<td>";
tbody += std_prog;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Email";
tbody += "</td>";
tbody += "<td>";
tbody += std_email;
tbody += "</tr>";
t2body += "<tr>";
t2body += "<td>";
t2body += "Semester";
t2body += "</td>";
t2body += "<td>";
t2body += "Course";
t2body += "</td>";
t2body += "<td>";
t2body += "Title";
t2body += "</td>";
t2body += "<td>";
t2body += "Status";
t2body += "</td>";
t2body += "<td>";
t2body += "Score";
t2body += "</td>";
t2body += "<td>";
t2body += "Credit Hour";
t2body += "</td>";
t2body += "</tr>";
t2body += "<tr>";
t2body += "<td>";
t2body += std_semester;
t2body += "</td>";
t2body += "<td>";
t2body += std_course;
t2body += "</td>";
t2body += "<td>";
t2body += std_title;
t2body += "</td>";
t2body += "<td>";
t2body += std_status;
t2body += "</td>";
t2body += "<td>";
t2body += std_score;
t2body += "</td>";
t2body += "<td>";
t2body += std_credit_hour;
t2body += "</td>";
t2body += "</tr>";
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
document.getElementById('new_wrapper').innerHTML = theader + t2body + tfooter;
}
</script>
</head>
<body>
<div id="container" style="height:600px;width:700px;border:#6666ff; border-style: solid;background-color: aliceblue" >
<div id='content' style='height:330px;width: 550px;text-align: left;background-color: #F3F3F3;float: left;border:#6666ff'>
<h3>Enter Student ID to View Grade Book Information</h3>
<form id="myform" action="viewGradeBook.jsp" method="POST" >
Enter Student ID <input type="text" name="View_Std_Id" value="" /> // it need to be sent to query
<br/>
<%
String id_input = request.getParameter("View_Std_Id");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String conUrl = "jdbc:odbc:GradeBookDSN";
Connection con = DriverManager.getConnection(conUrl);
String sql = " SELECT * FROM StudentProfile , GradeBook WHERE StudentProfile.StudentID AND GradeBook.StudentID = '"+id_input+"' ";
PreparedStatement pStmt = con.prepareStatement(sql);
ResultSet rs = pStmt.executeQuery();
String id= "";
String name="";
String prog="";
String email ="";
String semester = "";
String course = "";
String status = "";
String title = "";
String score = "";
String credit_hour = "";
while(rs.next()){
// The row name is ―name‖ in database ―PersonInfo,// hence specified in the getString() method.
id = rs.getString("StudentID");
name = rs.getString("StudentName");
prog = rs.getString("StudyProgram");
email = rs.getString("Email");
semester = rs.getString("Semester");
course = rs.getString("Course");
status = rs.getString("Status");
title = rs.getString("Title");
score = rs.getString("Score");
credit_hour = rs.getString("CreditHour");
}
%>
<input type="button" value="View Record" onclick="showData(.......)"/>
<div id="wrapper"></div>
<br/>
<div id="new_wrapper"></div>
</form>
</div>
<div id='footer' style="background-color: #C2D5FC;clear: both;text-align: center;border:#6666ff">Copyrights#vu2014</div>
</div>
</body>
</html>
You won't be able to acheive this in a single JSP load.
The JSP is a view that is evaluated and rendered on a single web request (a request correspond to the loading of your web page)
If you click on a button you will then you are already on the client side and you don't have access to the database which is on the server side.
You have to generate a second request (for example, instead of a button you put a submit and you put it inside a form) and you pass parameters to this request to allow the server to execute the SQL query.
With this approach you won't need to inject some html in javascript.
You should read more about N-tier architecture, servlets and the MVC model.
The good practice is to have :
a servlet (controller) that do the treatment (your sql query) and generates one or more beans.
the java beans (model) that contains the data to be displayed
the JSP (the view) that only displays the html with the dynamic values contained in the view
This structure will help you to
understand what happens really in a web application.
deal with exceptions (your database access is not well coded, you have to manage exceptions and close the connection in a finally block)
test your treatments without the graphical issues.
you can try this link as a start
http://rathinasaba.wordpress.com/2011/10/13/simple-webapplication-using-servlet-and-jsp/
I have this code to display details from database to jsp. I'm using core:forEach to sort through the list of results.But now inorder to simplify jsp code I'm implementing the core:forEach in javascript.And I'm displaying the results in a dynamically created table. But now while using core:forEach in javascript, only the last value in the list is getting displayed. Code is as follows.
window.onload = function CreateTable()
{
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list sorting based on project name
var tablecontents = "";
tablecontents = "<table>"; //dynamic table
tablecontents += "<tr>";
tablecontents += "<td>" + "Resource Name" + "</td>";
tablecontents += "</tr>";
<core:forEach items="${row.onsite3to5YearsList}" var="resource"> //second sorting which comes under project name
tablecontents += "<tr>";
tablecontents += "<td>" +<core:out value="${resource.resourceName}"></core:out>+ "</td>";
</core:forEach>
tablecontents += "</tr>";
tablecontents += "</table>";
</core:forEach>
document.getElementById("tablespace").innerHTML = tablecontents; //attaching the table to an element
}
<p id="tablespace"></p> //This is where the table gets generated
You're overriding tablecontents everytime, take var tablecontents = "" outside the loop, then replace tablecontents = "<table>" with tablecontents += "<table>".
window.onload = function CreateTable()
{
var tablecontents = "";
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list
tablecontents += "<table>";
// The rest of your code
I'm trying to get a JSON input with AJAX and load it in a select control.
but when I run it :\ It stuck on "Downloading the recipes....".
anyone see the problem maybe? (I tried couple of changes but nothing work so far)
1 more issue can anyone think on a shorter way to do the
ConvertToTable(targetNode)
cuse it's way to long and complex, I think :\
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
document.getElementById("span").style.visibility = "visible";
document.getElementById("span1").style.visibility = "hidden";
document.getElementById("button").style.visibility = "hidden";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
result = eval('(' + result + ')');
txt = "<select onchange='ShowRecipeDetails(this)'>";
for (i = 0; i < result.length; i++) {
txt = txt + "<option VALUE=" + result[i].recipe + ">" + result[i].recipe + "</option>";
}
txt = txt + "</select >";
document.getElementById("span").style.visibility = "hidden";
document.getElementById("span1").style.visibility = "visible";
document.getElementById("myDiv").innerHTML = txt;
}
}
xmlhttp.open("POST", "http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=json", true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send();
}
function ShowRecipeDetails(event) {
// get the index of the selected option
var idx = event.selectedIndex;
// get the value of the selected option
var field = event.options[idx].value;
$.ajax({
type: "GET",
url: "http://food.cs50.net/api/1.3/recipes?&output=json&id=" + field,
success: function (data) {
$("#TableDiv").html(ConvertToTable(data[0]));
}
});
}
function ConvertToTable(targetNode) {
var table = "<table border = 1 borderColor =green>";
table += "<tr>";
table += "<td>" + "ID" + "</td>";
table += "<td>" + targetNode.id + "</td>";
table += "</tr>";
table += "<td>" + "Ingredients:" + "</td>";
table += "<td>" + targetNode.ingredients + "</td>";
table += "</tr>";
table += "<td>" + "Name:" + "</td>";
table += "<td>" + targetNode.name + "</td>";
table += "</tr>";
table += "<td>" + "Size:" + "</td>";
table += "<td>" + targetNode.size + "</td>";
table += "</tr>";
table += "<td>" + "Unit" + "</td>";
table += "<td>" + targetNode.unit + "</td>";
table += "</tr>";
table += "<td>" + "VEGETARIAN:" + "</td>";
table += "<td>" + targetNode.VEGETARIAN + "</td>";
table += "</tr>";
table += "</tr>";
table += "</table>"
return table;
}
</script>
and the HTML:
<button id="button" type="button" onclick="loadXMLDoc()" >Get all recipes</button>
<br />
<span id="span" style="visibility:hidden">Downloading the recipes....</span>
<span id="span1" style="visibility:hidden">Please choose a recipe ID to view</span>
<div id="jsonDiv"></div>
<div id="myDiv"></div>
<div id="TableDiv"></div>
The HarvardFood API also supplies a JSONP version. So if you change your URL to this:
http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=jsonp&callback=parseResponse
you can create a parseResponse function to handle the data that comes back, and you can do the AJAX by inserting a script tag.
The problem is that you're running afoul the Same Origin Policy.
I see that you've updated the question to use jQuery AJAX. That offers a jsonp data type, which might be easier than adding a script tag.