I am trying to showmodal method, but getting error while taken string. if pass int it calls, how to take string in javascript.
<script>
var table = ' <table id="example" class="table table-striped " width="100%"> <thead>';
table += ' <tr class="success">';
table += '<th>Sender</th>';
table += '<th>Recipient</th>';
table += '<th>Mail Server</th>';
table += '<th>Arrival Time</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
for (var i = 0; i < data.u.length; i++) {
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
table += data.u[i].sender + '</a></td><td>' + data.u[i].receiver;
table += '</td><td>' + data.u[i].mail_server + '</td></tr>';
}
table += '</tbody>';
table += '</table>';
$("#resp1").html(table);
function showModal (id) {
alert("hi ");
}
</script>
You're missing quotation marks in the function call
Change this line
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
To this line
table += '<tr><td><a href="javascript:showModal(\''+data.u[i].sender+'\')">';
Related
I am trying to pass a file name from dynamically created table and getting some Uncaught ReferenceError: Q1_58_English_Resume is not defined
at HTMLAnchorElement.onclick (AddRequirement:1)
Here the file name is "Q1_58_English_Resume"
The script for dynamic table is below
if (filesData.length > 0) {
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}
And the Function is below:
function DownloadAttachment(fileName) {
debugger;
var url = "/RequirementManagement/OpenFile?ids=" + fileName;
window.location.href = url;
}
Try this , should work
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}
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?
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 have a piece of code that I am working with where the user can choose to download a "Slice" of a pie chart or the whole thing.
When they click on a slice, I send a variable called source which tells me which slice it came from.
Right now I am working on the "Download All" button. The source for this will be simply all.
This is what my loop looks like if the user selects slice:
// Loop over our data
$.each(seed.dataset,function(key, value){
if(this[col] == slice){
table += '<tr>';
table += '<td>'+this.escalationID+'</td>';
table += '<td>'+this.escReasonID+'</td>';
table += '<td>'+this.reasonText+'</td>';
table += '<td>'+this.escCreatedBy+'</td>';
table += '<td>'+this.escCreatorFirst+'</td>';
table += '<td>'+this.escCreatorLast+'</td>';
table += '</tr>';
}
});
The IF statement within the loop is what controls the data its including in the table variable. My question is, how can I choose when I want to enforce this IF statement or ignore it (allowing all data to be added to the table var)?
The obvious would be wrapping it in another IF statement but I feel there might be a cleaner way without having to duplicate all of the table data.
End result would be a bool saying if source=All include all the rows else if source=slice enforce the IF statement to include only the data we are looking for.
UPDATE
Essentially I am looking for a more clean way to do this:
// Loop over our data
$.each(seed.dataset,function(key, value){
if(source == 'slice'){
if(this[col] == slice){
table += '<tr>';
table += '<td>'+this.escalationID+'</td>';
table += '<td>'+this.escReasonID+'</td>';
table += '<td>'+this.reasonText+'</td>';
table += '<td>'+this.escCreatedBy+'</td>';
table += '<td>'+this.escCreatorFirst+'</td>';
table += '<td>'+this.escCreatorLast+'</td>';
table += '</tr>';
}
// We are downloading all so ignore the constraint
}else{
table += '<tr>';
table += '<td>'+this.escalationID+'</td>';
table += '<td>'+this.escReasonID+'</td>';
table += '<td>'+this.reasonText+'</td>';
table += '<td>'+this.escCreatedBy+'</td>';
table += '<td>'+this.escCreatorFirst+'</td>';
table += '<td>'+this.escCreatorLast+'</td>';
table += '</tr>';
}
});
You can use another boolean say ignoreAll as "OR" condition with existing if condition as shown below
// Loop over our data
var ignoreAll = true; // change its value as per your requirement
$.each(seed.dataset,function(key, value){
if(ignoreAll || this[col] == slice){
table += '<tr>';
table += '<td>'+this.escalationID+'</td>';
table += '<td>'+this.escReasonID+'</td>';
table += '<td>'+this.reasonText+'</td>';
table += '<td>'+this.escCreatedBy+'</td>';
table += '<td>'+this.escCreatorFirst+'</td>';
table += '<td>'+this.escCreatorLast+'</td>';
table += '</tr>';
}
});
$.each(seed.dataset,function(key, value){
if (source != 'slice' || this[col] == slice){
table += '<tr>';
// etc.
Alternatively:
$.each(seed.dataset,function(key, value){
if (source == 'all' || this[col] == slice){
table += '<tr>';
// etc.
Check out the below code.
If the current item is a slice, it's checked to make sure it is the correct slice. If it is, getSlice() is called and the $.each() loop breaks to avoid unnecessary iterations.
function getSlice(that) {
var table = '';
table += '<tr>';
table += '<td>' + that.escalationID + '</td>';
table += '<td>' + that.escReasonID + '</td>';
table += '<td>' + that.reasonText + '</td>';
table += '<td>' + that.escCreatedBy + '</td>';
table += '<td>' + that.escCreatorFirst + '</td>';
table += '<td>' + that.escCreatorLast + '</td>';
table += '</tr>';
return table;
}
// Loop over our data
$.each(seed.dataset, function (key, value) {
table += source == 'slice' ? (this[col] == slice ? true & getSlice(this) : false) : getSlice(this);
if (table === true) return false; // break out of loop
});
When I use this code, all the information is displayed in only one column. Also, if I check with Google Chrome, there are many <tbody> tags that were added to table.innerHTML .
http://puu.sh/4oLmM.png
How can I make it so it displays the header and each content[i] horizontally?
<table id="table1" border=\"5\" cellpadding=\"10\">
<script>
var table = document.getElementById('table1');
table.innerHTML = '';
var header = ['Method','Gp/Exp','Exp/H']
var content = [
['Kill',1,100],
['Die',42,1222],
['Yo',1,1245]
]
//Header
table.innerHTML += '<tr>';
for(var i in header){
table.innerHTML += '<th>' + header[i] + '</th>';
}
table.innerHTML += '</tr>';
//Content
for(var i in content){
table.innerHTML += '<tr>';
for(var j in content[i]){
table.innerHTML += '<td>' + content[i][j] + '</td>';
}
table.innerHTML += '</tr>';
}
</script>
I suspect this is what Ian meant:
var html = '<tr>';
for(var i in header){
html += '<th>' + header[i] + '</th>';
}
html += '</tr>';
for(var i in content){
html += '<tr>';
for(var j in content[i]){
html += '<td>' + content[i][j] + '</td>';
}
html += '</tr>';
}
table.innerHTML = html;
The way you've done it, you're adding badly formed HTML to the element. The overall string is fine, but my guess is that every time you do table.innerHTML +=, it realises that you're creating a dodgy HTML string, and messes around with it to get something that is valid HTML.