JQuery - adding multiple values to a single element in a table

Question

I am using flask. I pass 4 different lists into the HTML file, loop through them and put their value in the table

{% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%}
          <tr>
            <td id="task-pid">{{s_pid}}</td>
            <td id="task-name">{{s_name}}</td>
            <td id="task-cpu-percent">{{s_cpu_percent}}</td>
            <td id="task-memory-percent">{{s_memory_percent}}</td>
          </tr>
{% endfor %}

It looks great and I can see every value in the table clearly

I need to update these values every 5 seconds and for that, I am using jquery (using ajax just to get the updated value and put in the values below e.g var task_status_cpu_percent = data["task status cpu percent"];(list))

for(var i = 0; i< task_status_pid.length; i++){
      $("#task-pid").text(task_status_pid[i]);
      $("#task-memory-percent").text(task_status_memory_percent[i]);
      $("#task-name").text(task_status_name[i]);
      $("#task-cpu-percent").text(task_status_cpu_percent[i]);
    }

task_status_pid is a list, in fact, all of the task_status are lists in the same length but when the jquery code accrues it doesn't do anything! I tried using replaceWith and that didn't go well what happened is that all the values were on the first tab.

what do I need to do in order to go through all of the values in task-pd task-name etc' like it is on the loop ({% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%})

@mplungjan what do you mean there are everyone has a different id name — Patch
– Patch, Commented Apr 17, 2020 at 7:58
No. If you have 4 rows, you have 4 times <td id="task-pid"> — mplungjan
– mplungjan, Commented Apr 17, 2020 at 7:58
@mplungjan Oooo I understand so what do I need to do in order to use the jquery on it — Patch
– Patch, Commented Apr 17, 2020 at 8:00
You have to make the IDs not unique. Best would be to use a class — cloned
– cloned, Commented Apr 17, 2020 at 8:14

mplungjan · Accepted Answer · 2020-04-17 08:27:28Z

2

You need to use class or add a counter to the ID. IDs MUST be unique

So EITHER

{% set count = namespace(value=0) %}
{% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%}
          <tr>
            <td id="task-pid{{count.value}}">{{s_pid}}</td>
            <td id="task-name{{count.value}}">{{s_name}}</td>
            <td id="task-cpu-percent{{count.value}}">{{s_cpu_percent}}</td>
            <td id="task-memory-percent{{count.value}}">{{s_memory_percent}}</td>
          </tr>
  {% set count.value = count.value + 1 %}
{% endfor %}

and then

 $("#task-pid"+i).text(task_status_pid[i]);

OR (recommended)

const $tasks = $(".task-pid");

for(var i = 0; i< task_status_pid.length; i++){
  $tasks.eq(i).text(task_status_pid[i]);
   ....
}

using <td class="task-pid" etc

edited Apr 17, 2020 at 8:27

answered Apr 17, 2020 at 8:00

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

6 Comments

Patch Over a year ago

A little fix {% set count = 0 %} {% set count = count + 1 %} to the first option but it still doesn't update it

mplungjan Over a year ago

Please post the HTML that is generated and examples of the data.

Patch Over a year ago

Works perfectly fine. the {% set count = 0 %} {% set count = count + 1 %} isn't good change it to this: {% set count = namespace(value=0) %} {% set count.value = count.value + 1 %} task-pid{{ count.value }}

mplungjan Over a year ago

Yeah I had no idea to how to make a counter since I do not know the framework you are using

mplungjan Over a year ago

I still prefer the class version - no need to mess with counters when creating and easier to update other fields from one field

|

Collectives™ on Stack Overflow

JQuery - adding multiple values to a single element in a table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related