'Django update bootstrap modal not updating untill refresh

Django bootstrap modal form works when i create new data gets populated and pop up closes automatically without refresh but when updating success message appears but you have to refresh the page to see the new data.

swgindex.htm

{% block extrascripts %}
  <script type="text/javascript">
      $(function () {
          // Create book button opens modal with id="create-modal"
          $("#create-swg").modalForm({
            formURL: "{% url 'create_swimmer' %}",
            modalID: "#create-modal"
          });

          var asyncSuccessMessage = [
            "<div ",
            "style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
            "class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
            "Success: Swimmer was updated.",
            "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
            "<span aria-hidden='true'>&times;</span>",
            "</button>",
            "</div>",
            "<script>",
            "$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
            "<\/script>"
          ].join("");

          function updateModalForm() {
            $(".update-swg").each(function () {
              $(this).modalForm({
                formURL: $(this).data("form-url"),
                asyncUpdate: true,
                asyncSettings: {
                  closeOnSubmit: true,
                  successMessage: asyncSuccessMessage,
                  dataUrl: "/swimminglist/",
                  dataElementId: "#swg-table",
                  dataKey: "table",
                  addModalFormFunction: updateModalForm
                }
              });
            });
          }
          updateModalForm();

          // Read and Delete book buttons open modal with id=".bs-modal"
          // The formURL is retrieved from the data of the element
          $(".bs-modal").each(function () {
              $(this).modalForm({formURL: $(this).data("form-url")});
          });

          // Hide message
          $(".alert").fadeTo(2000, 500).slideUp(500, function () {
              $(".alert").slideUp(500);
          });
      });
  </script>
{% endblock extrascripts %}

Urls.py

path('swimminglist/', views.SWGIndex.as_view(), name="swimminglist"),
path('create/', views.SWGCreateView.as_view(), name='create_swimmer'),
path('update/<int:pk>', views.SWGUpdateView.as_view(), name='update_swimmer'),
path('read/<int:pk>', views.SWGReadView.as_view(), name='read_swimmer'),
path('delete/<int:pk>', views.SWGDeleteView.as_view(), name='delete_swimmer'),


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source