Django update bootstrap modal not updating untill refresh

Hello 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. Thank You.

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'),

Back to Top