Show values from query in a table using php and ajax

Question

I have a problem with my code, So I have an array and I pass to template, the array is like this :

Array
(
[0] => Array
    (
        [ref_article] => 1903
        [ref_fournisseur] => sdsds
        [lien_fournisseur] => www.four.com
        [prix_ht] => 14.00
        [gifts_number] => 3
    )

[1] => Array
    (
        [ref_article] => 1907
        [ref_fournisseur] => sdsds
        [lien_fournisseur] => www.four.com
        [prix_ht] => 12.00
        [gifts_number] => 1
    )

)

Now in template I do :

for (var item in result) {
    document.getElementById('order_information').setAttribute('class','display-on');
    document.getElementById('order_information').setAttribute('class','table');

    var html = '<td>' + result[item]['ref_article'] + '</td>' +
                '<td>' + result[item]['ref_fournisseur'] + '</td>' +
                '<td>' + 'description' + '</td>'+
                '<td>' + result[item]['lien_fournisseur'] + '</td>' +
                '<td>' + result[item]['prix_ht'] + '</td>'+
                '<td>' + 'disponibilite' + 
                '<td>' + result[item]['gifts_number'] + '</td>';
    $("#content-order").html(html);
    console.log(result[item]['ref_article']);
}

The problem is that only the last <td></td> shows on the page, in this case only the article with [ref_article] = 1907. What am I doing wrong? Can you help me please? Thanks in advance

Rory McCrossan · Accepted Answer · 2015-06-29 08:24:30Z

The issue is because you are using html() to add the content - this will overwrite any pre-existing content in the #content-order element. Instead, try using append():

$("#content-order").append(html);

Also note that you can amend your first two lines to use a jQuery selector and the addClass() method:

$('#order_information').addClass('display-on table');

If you want to clear information added from a previous request you can use .empty() before the for loop that appends new content. Here's a full example:

// $.ajax({...

success: function(result) {
    $("#content-order").empty(); // remove existing content
    $('#order_information').addClass('display-on table');

    for (var item in result) {
        var html = '<td>' + result[item]['ref_article'] + '</td>' +
                '<td>' + result[item]['ref_fournisseur'] + '</td>' +
                '<td>description</td>' + // removed redundant string concatenation
                '<td>' + result[item]['lien_fournisseur'] + '</td>' +
                '<td>' + result[item]['prix_ht'] + '</td>'+
                '<td>disponibilite</td>' + // added missing </td>
                '<td>' + result[item]['gifts_number'] + '</td>';
        $("#content-order").append(html);
        console.log(result[item]['ref_article']);
    }
}

Rory McCrossan · Accepted Answer · 2015-06-29 08:24:14Z

0

Try using this code

var html = '<table>';
for (var item in result) {
    html += '<td>' + result[item]['ref_article'] + '</td>' +
        '<td>' + result[item]['ref_fournisseur'] + '</td>' +
        '<td>description</td>' + // removed redundant string concatenation
    '<td>' + result[item]['lien_fournisseur'] + '</td>' +
        '<td>' + result[item]['prix_ht'] + '</td>' +
        '<td>disponibilite</td>' + // added missing </td>
    '<td>' + result[item]['gifts_number'] + '</td>';

    console.log(result[item]['ref_article']);
}
html += '</table>';
$("#content-order").html(html);

edited Jun 29, 2015 at 8:24

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Jun 29, 2015 at 7:11

Namitha

2042 silver badges6 bronze badges

Collectives™ on Stack Overflow

Show values from query in a table using php and ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related