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
});
Related
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+'\')">';
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 this Javascript function which creates a table in html. Which does exactly what I want.
var thead = '<table><thead><tr><td>#</td><td>Name</td><td>Id</td></tr></thead><tbody>\n';
for(var i=0; i<dataArray.length; i++)
{
tbody += '<tr class="row">';
tbody += '<td>' + (i+1) + '</td>';
tbody += '<td>' + dataArray[i].Device_Name + '</td>';
tbody += '<td>' + dataArray[i].Device_Id + '</td>';
tbody += '</tr>\n';
}
var tfooter = '</tbody></table>';
document.getElementById('dataTableDiv').innerHTML = thead + tbody + tfooter;
Now I want to run some code everytime I click on a certain row. For now it doesn't matter which row is click as long as the code is being executed. Here is the code that should handle the row click. All the other click actions work perfectly inside the $(document).ready(function(){}); But for some reason, the click handler for the table doesn't work.
$(document).ready(function()
{
$(".row").click(function()
{
console.log("Blablabla")
});
});
What am I doing wrong?
Because you are generating HTML dynamically from Jquery so try event delegation as shown below :-
$(document).on('click','.row',function(){
// Your Code...
});
OR
$(document.body).on('click','.row',function(){
// Your Code...
});
OR(adding Jai's useful comment in answer)
$('#dataTableDiv').on('click','.row',function(){
// Your Code...
});
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.
i have this situation:
...
for (var i = 0; i < json.length; i++)
{
output += '<tr>';
for ( var objects in json[i])
{
if (objects == 'amt_1')
{
output += '<td id="amt">' + json[i][objects] + '</td>';
}
}
output += '</tr>';
}
output += '<tr">';
var amt = 0;
$('#amt').each(function() {
amt += $(this).text();
});
output += '<td>' + amt + '</td>';
output += '</tr>';
$('#details').append(output);
}
this is a part of a table that give's me something like this:
<td id="amt">4.58</td>
<td id="amt">55.74</td>
<td id="amt">193.5</td>
<td></td>
and in the last td i would like the sum of the rest of them with the id = amt
what i have seems not to work
any ideas?
Thnaks
The problem is that you are using id's instead of classes, id's are supposed to be unique, so javascript only returns 1 td. Multiple elements however, can share the same class.
Also, the jQuery won't work because the elements haven't been added to the document yet.
for (var i = 0; i < json.length; i++)
{
output += '<tr>';
for ( var objects in json[i])
{
if (objects == 'amt_1')
{
output += '<td class="amt">' + json[i][objects] + '</td>';
}
}
output += '</tr>';
}
output += '<tr">';
$('#details').append(output); //Copied here, this will add the above elements
//to the document subtree, which allows jquery
//to search for them
output = ""; //Reset output
var amt = 0;
$('.amt').each(function() { //Changed to class selector
amt += parseInt($(this).text());
});
output += '<td>' + amt + '</td>';
output += '</tr>';
$('#details').append(output); //Append result
Like they said you should use a class instead of id
output += '<td class="amt">' + json[i][objects] + '</td>';
Then you must add the output to the DOM before your jQuery selector, $('.amt'), can find the elements
$('#details').append(output); //<--append BEFORE you select the .amt elements
var amt = 0;
$('.amt').each(function() {
amt += parseFloat($(this).html()); //parseFloat on the html
});
output = '<tr">'; //<-- reset output here
output += '<td>' + amt + '</td>';
output += '</tr>';
$('#details').append(output);
Still it would be better to just sum the amount in your for loop
var total = 0;
...
if (objects == 'amt_1')
{
var curAmt = json[i][objects];
output += '<td class="amt">' + curAmt + '</td>';
total += parseFloat(curAmt);
}
...
output += '<td>' + total + '</td>';
You can't have more than one element with the same id on a page. $("#someId") will always select at most 1 element. So, your first problem is you don't even have a list of elements. You can solve that by using class instead.
Once you resolve the id issue, the trouble you'll have is you are trying to add text as though it were a number. First, you convert text to a number in one loop, then you loop through your entire collection again and try to add the textual numbers. Just get the total during the first loop. You'll be adding numbers instead of text, and you'll only have to iterate your collection once.
Also, you don't need to iterate the keys of an object just get a property. You can just reference the property directly: json[i].amt_1
While we're at it, let's not build up the html string, but instead just create the DOM elements directly. And take advantage of $.each() to do our looping.
var total = 0;
$.each(json, function (i, item) {
var row = $('<tr>').appendTo("#details");
$("<td>").appendTo(row).addClass("amt").text(item.amt_1);
total += item.amt_1;
});
var row = $("<tr>").appendTo("#details");
$("<td>").appendTo(row).text(total);