We Keep Coding

jquery append not working but working in another function

So.. I have 2 jquery functions that append something to a table.
the first one doesn't work , the second function does work? while in the first function my HTML var is filled with the good information to append, it just doesn't append it??
function buildTable(data) {
var html = "";
$.each(data, function (key, value) {
html += "<tr>";
html += "<td><a class='delete'><i class='fa fa-thrash'></i></a></td>";
html += "<td class='key'>" + key + "</td>";
html += "<td class='val'>" + value + "</td>";
html += "<td></td>";
html += "</tr>";
//$(".table > tbody").prepend(html);
//$(".addrow").append(html);
//$("#parameterTable > tbody").append(html);
});
$('.addrow').prepend(html);
//$(".formTable ").prepend(html);
}
Second function (the one that does work)
function addNewParameter() {
if(!added) {
var html = "<tr>";
html += "<td></td>";
html += "<td><input type='text' class='parameter1' name='Parameter1'></td>";
html += "<td><input type='text' class='parameter2' name='Parameter2'></td>";
html += "<td><a class='save'><i class='fa fa-save'></i></a><a class='undoAdd'><i class='fa fa-undo'></i></a></td>";
html += "</tr>";
$(".addrow").append(html);
added = true;
} else {
showWarning("u heeft al een parameter toegevoegd, sla deze eerst op.");
}
}
The HTML where I need to append it
<table class="formTable table table-striped table-bordered table-hover dataTable" id="parameterTable">
<thead>
<tr>
<td class="col-md-2"></td>
<td class="col-md-4">
Naam
</td>
<td class="col-md-4">
Waarde
</td>
<td class="col-md-2"></td>
</tr>
</thead>
<tbody class="addrow">
</tbody>
</table>
I have been struggling with this for a while, any help would be nice

Have you tried it like this?
function buildTable(data) {
var html = "";
$.each(data, function (key, value) {
html += "<tr>";
html += "<td><a class='delete'><i class='fa fa-thrash'></i></a></td>";
html += "<td class='key'>" + key + "</td>";
html += "<td class='val'>" + value + "</td>";
html += "<td></td>";
html += "</tr>";
});
$('.addrow').append(html);
}

Proper usage of jQuery does not require ending tags:
function addNewParameter() {
if (!added) {
var newHtml = $('<tr>');
newHtml.append($('<td>'));
newHtml.append(
$('<td>').append(
$('<input>'.addClass("parameter1").attr({"name":"Parameter1","type":"text"}))
)
);
html.append(
$('<td>').append(
$('<input>').addClass("parameter2").attr({"name":"Parameter2","type":"text"})
)
);
html.append(
$('<td>').append(
$('<a>').addClass('save').append(
$('<i>').addClass("fa fa-save")
),
$('<a>').addClass('undoAdd').append(
$('<i>').addClass("fa fa-undo")
)
)
);
$('.addrow').append(newHtml);
added=true;
}
else {
showWarning("u heeft al een parameter toegevoegd, sla deze eerst op.");
}
}

It was a problem with a bootstrap dialog , after the dialog was loaded and then the append function it worked

JQuery Drag and Drop from two tables

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

Append and collapse child row

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

JSP and Javascript values and method call

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/

Working with JSON input

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.