How to update a block without reloading the page?

M

motya882021-01-22 15:45:02

JavaScript

motya88, 2021-01-22 15:45:02

Good afternoon!
Tell me how to update (without reloading the page) only the table, and not the entire page.
HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
{% for table in tables %}

            {{ table|safe }}
{% endfor %}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
function mode() {
      $.ajax({
      url: "/hello",
      type: "get",
      success: function(response) {
        $("#test").html(response);
      },
      error: function(xhr) {
        //Do Something to handle error
      }
    });
};

setInterval(mode, 2000);
</script>

</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anvar Shakhmaev, 2021-01-22
@RxR

You display tables on the whole page in a block<div id="test">

<div id="test">
{% for table in tables %}

            {{ table|safe }}
{% endfor %}
</div>

and then in the block, <div id="test">replace all the content with what's in the response . try$("#test").html(response);
$("#test").append(response)