0

I am using ajax request to retrieve some data from the database, and on success, I update an html table with the data retreived. the problem is that when I select an element using document.getElementByClassName(className)[0].innerHTML = newValue I see in the console that the newValue appears in the table I selected, but in the UI, nothing changed.

my code:

for(var i = 0; i < document.getElementsByClassName('tablesorter').length; i++){
    var table = document.getElementsByClassName('tablesorter')[i];
    exp_id = table.getAttribute("data-exp_id");
    var that = this;
    $.ajax({
        url : 'get_something.php',
        dataType : 'json',
        data : { 
            expression : exp_id
        }, 
        success : function(data) {
            something= "";
            for (var i = 0; i < data.length; i++) {
                value = data[i];
                something+= '<tr><td>' + value.a + '</td><td>' + value.b + '</td><td>' + value.c + '</td><td>' + value.d+ '</td></tr>';

            }

            table.getElementsByTagName("tbody")[0].innerHTML = something;
            console.log(ailleurs);
        }
    });
}
kdureidy
  • 960
  • 9
  • 26
  • why are you using jQuery for ajax and not for DOM stuff? – markasoftware Mar 20 '14 at 00:01
  • also, please provide a [jsFiddle](http://jsfiddle.net) so we can try it ourselves – markasoftware Mar 20 '14 at 00:02
  • a jQueryish solution will be http://jsfiddle.net/arunpjohny/5Qt8S/1/ – Arun P Johny Mar 20 '14 at 00:04
  • 1
    The problem is with your loop. All your callback functions are updating the last table, not the `i`th. – Barmar Mar 20 '14 at 00:09
  • @Markasoftware I tried jquery for DOM, and I had the same issue – kdureidy Mar 20 '14 at 00:11
  • What @Barmar said, there's no special scope in a for loop, variables are overwritten and ajax is async. – adeneo Mar 20 '14 at 00:11
  • @adeneo you have accedentally answered the question, the solution was to set the ajax as async: false – kdureidy Mar 20 '14 at 00:25
  • add it as an answer, give an explanation to this issue if possible, and I will accept the answer – kdureidy Mar 20 '14 at 00:25
  • Nope, that was not the correct answer, you just made **asynchronous** javascript synchronous. – adeneo Mar 20 '14 at 00:29
  • @kdureidy - please don't set this to `async: false`. That will just lock up the browser during the ajax call. Learn how to program your loops correctly inside the ajax handlers by creating a closure. The referenced duplicate shows how to do it. Or, if you use jQuery for the iteration, it already creates an independent scope that will also help you solve the issue. – jfriend00 Mar 20 '14 at 00:34
  • 2
    What @jfriend00 said would look something like this -> http://jsfiddle.net/7vefm/1/ – adeneo Mar 20 '14 at 00:38
  • I tried the jQuery "each" but I had the same issue, nothing changed to the UI, while in the log, I see the tables objects are updated with the values I've got from the AJAX request – kdureidy Mar 20 '14 at 01:08
  • OK, Now i understand what you mean, and you are right, problem solved. I created a function that will do the AJAX request, and then called this function within a loop without setting asynq: false. please add it as answer so I can I accept it. – kdureidy Mar 20 '14 at 01:32

0 Answers0