We Keep Coding

How to add a dropdown list to each rows with values using jquery datatable in asp.net c#

I want to add the dynamic dropdown list to each row when I click the add button and I have written this below code to achieve this and values are coming but not like dropdown list
example code is :-
var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>");
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
//var option = $("<option />");
var option = $("<option></option>");
option.html(value.TypeData);
option.val(key);
ddlInputParameters.append(option);
}
});
//Initially When the page is loaded I'm checking the length and adding the records to jquery table
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {
var trd = "";
trd += "<tr>";
//trd += "<td hidden='hidden'><button class = 'btn btn-danger btn-sm'> delete </button></td>";
trd += "<td>";
//trd += "<select class='input-small' id='ddltype'><option value='1'>Pts</option><option value='2'>%</option></select>";
trd += ddlInputParameters.html(); //Here I want to add(bind)that dropdown list
trd += "</td>";
trd += "<td>";
trd += "<select class='input-small' id='ddlexit'><option value='1'>None</option><option value='2'>Sq Off Leg</option><option value='3'>Sq Off Strategy</option><option value='4'>Partial Exit</option></select>";
trd += "</td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "</tr>";
$("#EntryParametersTableRightDataID tbody").append(trd);
}
Output is coming like values not like dropdown list this :-
Suggest me where I did the mistake and how can I achieve this.
I'm very new to this jQuery logics.

Try using ddlInputParameters.outerHTML() instead of ddlInputParameters.html() in trd += like below.
trd += ddlInputParameters.outerHTML(); //Here I want to add(bind)that dropdown list
The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.

The outerHTML attribute is not worked in my scenario and I have changed the existing logic like below and it's work well to me
var optionsdata = '';
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
optionsdata += "<option value="+key+">"+value.TypeData+"</option>";
});
var ddlInputParameters = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";
And I have added this ddlInputParameters to <td> like this trd += ddlInputParameters;

Issues with Porto Theme basic tables with Advance Tools

I have JSON data and from that i am building my Table. Below is an extract of my code.
var table = '';
table = " <table class='table table-bordered table-striped mb-0' id='datatable-tabletools'>";
table += "<thead>";
table += "<tr>";
table += "<th> <i class='glyphicon glyphicon-wrench'></i> Actions</th>";
table += "<th>PAX</th>";
table += "<th>Group No</th>";
table += "<th>Group Name</th>";
table += "</tr>";
table += "</thead>";
table += "<tbody>";
for (var j = 0; j < data.length; j++) {
table += "<tr>";
table += "<td>" + data[j]["PAX"] + "</td>";
table += "<td>" + (data[j]["GroupNo"] == undefined ? '' : data[j]["GroupNo"]) + "</td>";
table += "<td>" + (data[j]["GroupName"] == undefined ? '' : data[j]["GroupName"]) + "</td>";
table += "</tr>";
}
table += "</tbody>";
table += "</table>";
$('#gridContainer').html(table);
$("table#datatable-tabletools").dataTable();
As you can see in the code above I am trying to append it to a div with id="gridContainer". Up till here I have things up and running as required but the issue is my EXPORT bar doesn't appear at all. Currently, the searching, sorting functionalities and the table structure are all fine. Below is a screenshot of how it looks currently.
But when i declare a static table instead of appending the table to a DIV tag it appears fine and the exporting options also appear and are functiona. This is how the top header looks then
How to resolve this issue?

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

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/

Insert array values in table cell with javascript

I need to insert some values ​​in a table. All values are contained in a returned array from an Ajax/php request like this:
var data = [];
//Consider that the number of the object (in this case only 3) obtained from the server are equal to the number of rows in tbody (6 rows in tbody = 6 object from server).
data[0] = {From: '01/01/2012', To: '01/01/2013', Interest: 80.00, Residual: 0, Capital: 1000.00, Days: 366};
data[1] = {From: '01/01/2013', To: '01/01/2014', Interest: 85.00, Residual: 0, Capital: 980.00, Days: 365};
data[2] = {From: '01/01/2014', To: '29/04/2014', Interest: 20.00, Residual: 75.00, Capital: 980.00, Days: 118};
It's a bit tricky to explain how the values must to be inserted in the table, so I created a fiddle with the result I would like to get.
I do not expect you to give me the final result (of course, would be welcome :) ), but at least some idea from which to start.
FIDDLE
**EDIT
I assigned id to cells and now all values are right inserted. That's the updated fiddle, do you think code can be written more elegantly?
UPDATE FIDDLE

I can see the data returned from ajax/php request is in JSON format. So to insert them in HTML table you can use JQuery.
Example (as you given sample data):
function buildDataTableHtml(data){
var tableHtml = "<table><tr>";
tableHtml += "<th>From</th>";
tableHtml += "<th>To</th>";
tableHtml += "<th>Interest</th>";
tableHtml += "<th>Residual</th>";
tableHtml += "<th>Capital</th>";
tableHtml += "<th>Days</th>";
tableHtml += "</tr>";
$.each(data, function(i, v){
tableHtml += "<tr>";
tableHtml += "<td>" + v.From + "</td>";
tableHtml += "<td>" + v.To + "</td>";
tableHtml += "<td>" + v.Interest + "</td>";
tableHtml += "<td>" + v.Residual + "</td>";
tableHtml += "<td>" + v.Capital + "</td>";
tableHtml += "<td>" + v.Days + "</td>";
tableHtml += "</tr>";
});
tableHtml += "</table>";
return tableHtml;
}
If you use this JavaScript function (along with JQuery) then this function will return the HTML of a table you wanted. Hope this will be helpful for you
NOTE: I just write it down in answer box, didn't try to make sure this is working. But hope the code will work. :)