Dynamically update HTML images from Flask+Ajax

Question

I have a problem similar to this one: Flask+AJAX+Jquery+JINJA to dynamically update HTML Table but can't figure out how to apply the solution to mine. What I need is to automatically update the images displayed in the template based on the response obtained using AJAX for communicating with the Flask backend without reloading it. For this purpose I started using AJAX (but if there are other useful libraries tell me please).

Instead of the {{field}} var in the linked question, I had something like this to be updated (the {{image}} var below) in the HTML:

<ul>
{% for image in list%}
  <li>
  <img src="{{image}}" height="150" width="150"></img>
  </li>
{% endfor %}
</ul>

I did an AJAX call to the Flask entrypoint to get an updated list of images to substitute to the original list:

$.ajax({
    url: "...", // Flask entrypoint
    type: "POST",
    dataType: 'json',
    data: {...}, // data I need
    success: function(resp){
       // Here the resp var contains the new list of images' path.
       // but I dont't know how to "replace list var with resp"
    }
});

What I would like to do is take the result ("resp") and replace it in place of the images that were there before, as if you replace the "list" variable in HTML with the new "resp" variable. (The "resp" variable, may contains less images than the original ones.)

Update Thanks to Pavlo reply, I did something like this (working):

$.ajax({
            url: "/...",
            type: "POST",
            dataType: 'json',
            data: {...},
            success: function(resp){
                $("ul").children().remove();
                for (var i = 0; i < resp.length; i++) {
                    var elem = "<li><img src=" + resp[i] + "></li>";
                    $("ul").append(elem);
                }
            }
        });

NEW PROBLEM: The css tags after the Ajax returns, fails to work.

You need to replace the old images list markup with a new one. Have you tried to do it? — Pavlo Zhukov, Mar 23 '21 at 11:21
Basically yes, I need to replace "list" with "resp". But I dont know how to do that. Or rather, I know how to do it in python using render_template function, but that would reload the page. Instead I want the update to be asynchronous — igor, Mar 23 '21 at 11:25
1. Select your target container using a browser DOM API. 2. Cleanup its inter content: `container.innerHTML = ''` or whatever you prefer. 3. Build new elements. There are several options: a) build HTML string and assign in to innerHTML. b) creating DOM nodes and appending that to container: `container.appendChild(document.createElement('li'))`. — Pavlo Zhukov, Mar 23 '21 at 11:30
Or send html and simply replace the contents of the whole `
`.... `$('ul#myListId').html(resp)` — charlietfl, Mar 23 '21 at 11:31
All of this in the AJAX success section, right? Thanks anyways! — igor, Mar 23 '21 at 11:33
I updated the question inserting the solution, but a new problem came out, any suggestion? — igor, Mar 23 '21 at 14:26

score 1 · Accepted Answer · answered Mar 23 '21 at 14:27

This accomplish the task:

$.ajax({
        url: "/...",
        type: "POST",
        dataType: 'json',
        data: {...},
        success: function(resp){
            $("ul").children().remove();
            for (var i = 0; i < resp.length; i++) {
                var elem = "<li><img src=" + resp[i] + "></li>";
                $("ul").append(elem);
            }
        }
    });

Dynamically update HTML images from Flask+Ajax

1 Answers1

Linked