Dynamically adding rows with jQuery with PHP outputs

Question

I'm fetching data from a PHP file with jQuery and I want it to be displayed dynamically in a table. Is there another way of doing this, so that the jQuery itself creates the table rows? This is my attempt..

Part from the html file:

<table id="tejbl">
<tr id="naslov">
<td><h3>NAME</h3></td>
<td><h3>FAT</h3></td>
<td><h3>FIBER</h3></td>
<td><h3>SUGARS</h3></td>
</tr>


<tr>
<td id="table_0"></td>
<td id="table_1"></td>
<td id="table_2"></td>
<td id="table_3"></td>
</tr>

</table>

Part from the js file:

$('#jedinice_butt').click(function(){
var odabrano = $("#dropdown option:selected").text();

var uneseno = $("#input_jedinica").val();
$('#tablica').show();
//$('#add_button').show();


if(odabrano === "g"){ 
    $.post('name.php', {
        value: value
    }, function (data) {

      $('#table_0').html(data);
    });


    $.post('nutritional_value.php', {
        value: value
    }, function (data) {

      $('#table_1').append( data * (parseFloat(uneseno,10)/100));
    });

    $.post('fiber.php', {
        value: value
    }, function (data) {

        $('#table_2').append(data * (parseFloat(uneseno,10)/100) );
    });

    $.post('sugars.php', {
        value: value
    }, function (data) {

        $('#table_3').append( data * (parseFloat(uneseno,10)/100) );

    });



}

The problem I'm trying to solve is, that once I click the button again it just adds the values in the same 's and I want it to add in a new row.. So basically how do you dynamically add rows for these outputs I tried with a few methods with no success I event tried doing it without the 's in the html file so it's generated from the jQuery but I'm doing something wrong apparently.

potato25 · Accepted Answer · 2013-06-01 14:28:12Z

1

To achieve this, you could modify the DOM.

First get rid of the

<tr>
<td id="table_0"></td>
<td id="table_1"></td>
<td id="table_2"></td>
<td id="table_3"></td>
</tr>

You can dynamically add elements to the document. You could do something like this:

if(odabrano === "g"){ 

$.getJSON("SCRIPT_URL.php?value="+encodeURI(VALUE_VARIABLE),function(data){

    var ttr = document.createElement("tr");
    var dt = ["fat","fiber","sugar"];
    var ttd = document.createElement("td");
    ttd.innerText=data["name"];
    ttr.appendChild(ttd);
    for(var i=0,l=dt.length;i<l;i++){
        var ttd = document.createElement("td");
        ttd.innerText = data[dt[i]] * (parseFloat(uneseno,10)/100);
        ttr.appendChild(ttd);
    }
    $("#tejbl").append(ttr);

});

}

A note for the php-script: Send the data like this:

$results = array();
$results["name"]=$NAME_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["fat"]=$FAT_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["fiber"]=$FIBER_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["sugar"]=$SUGAR_YOU_JUST_GOT_FROM_SOMEWHERE;
//Send it to the client in json format:
echo(json_encode($results));

edited Jun 1, 2013 at 14:28

answered May 31, 2013 at 9:37

potato25

1865 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Filkatron Over a year ago

I get this error: [12:24:54.296] TypeError: w is null @ localhost/tust/index2.html:141

potato25 Over a year ago

Oh, my bad... I have updated the answer, take a look add the post requests to sugars and fibers, i had used the wrong id, it should work now.

Filkatron Over a year ago

Thanks for helping me out but I get the same error even with the edited code :S

Filkatron Over a year ago

I read the documentation and it says: Returns null if no matches are found; otherwise, it returns the first matching element. So what could be the reason it returns NULL (why can't it find a match) ?

potato25 Over a year ago

Hmmm, strange... Try to change the line $.tdf.addedData=0 to $.tdf.addedData=1. If that does not work, could you try to combine the 4 php scripts?

|

Collectives™ on Stack Overflow

Dynamically adding rows with jQuery with PHP outputs

1 Answer 1

12 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Related