KevMoe KevMoe - 2 months ago 7
Javascript Question

Javascript function applied to single div

I have been trying to debug this code... I am trying to limit the function to just one div with the id "left". So far I have tried several variations of $('#left')
$("#left") to $(document.getElementById('left')) all with and without the hashmark.

It is affecting every table in the document rather than the single container.

Here is a link to the jfiddle... jfiddle

$('#left').ready(function() {

promise = $.ajax({
type:"GET",
dataType:"text",
url:"sgi.csv",
cache:false
});

promise.done(function(data){

var dataArr = data.split("\n");

$.each(dataArr,function(){
if (this != "") {

var row = new String("");
valArr = this.split(",");
row += "<tr>"

$.each(valArr, function(){
row += "<td>" + this +"</td>"
});

row += "</tr>"

$('tbody').append(row);

}

});

});

// Run script if request fails
promise.fail(function() {
console.log('A failure ocurred');
});

});

Answer

The problem code is $('tbody').append(row);. You are telling jQuery to append row to all tbody elements it finds.

If you only want to include it in <tbody> elements that are children of #left you need to do

$('#left tbody').append(row)
Comments