How to update a table from Ajax post callback Symfony 3

Question

I have a table that needs to be updated by Ajax callback, I'm really struggling to find the right way to do so.

Here is a picture how the table should look like:

I cannot find the right way to so, here is my current HTML script:

    <table class="table table-striped">
<thead>
<tr>
    <th>#</th>
    <th>12NC</th>
    <th>Object Description</th>

</tr>
</thead>
<tbody>
    <tr>
        <th scope="row"><input id="ID"></th>
        <td><input id="NC"></td>
        <td><input id="Des"></td>
    </tr>

</tbody>

And here is the callbacks from Ajax:

                        person_name:$('#input_text').val()
                     } ,
                     function (data)
                     {
                         obj1 = data[0];
                         obj2 = data[1];

                          var obj =  JSON.parse(obj2);
                          var obj1 =  JSON.parse(obj1);



                         $('#ID').val(obj1[1].id);
                         $('#NC').val(obj1[1].n_c);
                         $('#Des').val(obj[1].description);
                     }
                 );
             })
            }
        );

Can someone please tell me if I'm doing it right and how I can send all the values from because now I can send only value 1 from the array.

NO, but I find that is not needed to put all the code, beceuse here I'm trying to send the data to the table — Metio_1993
– Metio_1993, Commented Nov 10, 2016 at 9:54

Mohamed Athif · Accepted Answer · 2016-11-10 10:45:04Z

2

you need a success function in ajax. easier option would be to echo the value from the php page where ajax response is sent. such as

echo '<tr>
        <td scope="row">' . $idValue . '</th>
        <td>' . $12ncValue . '</td>
        <td>' . $descriptionValue . '</td>
      </tr>';

and in the success function you can append to the tbody after you give it a class or id.

<tbody id="tbody">


success: function (response) {
                    $('#tbody').append(response);
                   }

as for another approach would be declare an array of variables, and

echo json_encode($array)

and with .each function you can loop the data from the ajax success function.

Edit: if you get the value. you need to append them. give id to tbody

</tbody id="tbody">

and in function(data)

 $('#tbody').append('<tr><td>'+obj1[1].id+'</td><td>'+obj1[1].n_c+'</td><td>'+obj[1].description+'</td></tr>');

edited Nov 10, 2016 at 10:45

answered Nov 10, 2016 at 10:07

Mohamed Athif

4622 gold badges6 silver badges19 bronze badges

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

8 Comments

Metio_1993 Over a year ago

Mohamad thank you for your answer, but is there way I can send it directly to the a twig loop.

Metio_1993 Over a year ago

basically if i return and array of data to the Ajax post, then I can send the object to twig {% for connector in connectors %} <tr id="{{ connector.id }}"> <td>{{ connector.nC }}</td> <td>{{ connector.description }}</td> </tr> {% endfor %} Ho I can send it to the twig loop.

Mohamed Athif Over a year ago

you can use twig loop on the echo if you decide not to use json. but twig loop being php as far as my knowledge goes. success function being javascript. you can do a twig loop. but you can do a javascript .foreach loop if you decide to go with json.

Mohamed Athif Over a year ago

i don't follow what you are trying to achieve here

Mohamed Athif Over a year ago

You can do $('#tbody').empty(). Append() where empty removes all child elements and contents of tbody before appending

|

Collectives™ on Stack Overflow

How to update a table from Ajax post callback Symfony 3

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related