I have web form in a modal window where a signatory can sign and submit. After submission a 200 response is returned through a JSON request from the controller that handles the form. Now the issue is that when the 200 response is sent over to form, it is displayed on the form but the page needs contents needs to reload because once the form is signed buttons on the change. It does not give a good user experience since the page has to be reloaded manually to get the updated content.

This form uses Odoo’s portal.signature_form template, the request type on the controller is set to json and the form has a CSRF token set

<!-- modal relative to the actions sign -->
              <div role="dialog" class="modal fade" id="agreement_accept">
                  <div class="modal-dialog" t-if="agreement.state != 'signed'">
                      <form id="accept" method="POST" t-att-action="'/my/agreements/%d/accept' % agreement.id" t-att-data-order-id="agreement_id"  class="js_accept_json modal-content js_website_submit_form">
                          <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                          <header class="modal-header">
                              <h4 class="modal-title pb-5">Accept Agreement</h4>
                          </header>
                          <main class="modal-body" id="sign-dialog">
                              <p>
                                  <span>By signing this proposal, I agree to the following terms:</span>
                                  <t t-esc="url" />
                                  <ul>
                                      <li><span>Accept the agreement</span> </li>
                                  </ul>
                              </p>
                              <t t-call="portal.signature_form">
                                <t t-set="call_url" t-value="url"/>
                              </t>
                          </main>
                      </form>
                      
                  </div> 
              </div>

I have added a script to the template that adds an event listener targeted at the form such that when the form is submitted we wait for a 200 response then we trigger a reload. That was not successful then I decided to use the odoo’s Javascript library to achive the same purpose with the code below. I only saw the log accept_form.js loaded when the page loaded but not the other logs even when the submit button was clicked and the confirmation response came to the form saying success. The page did not reload after the form was successfully sigend

odoo.define('agreement.accept_form', function(require) {
    "use strict";
    console.log('************** accept_form.js loaded');

    var ajax = require('web.ajax');
    var core = require('web.core');
    var _t = core._t;

    $(document).ready(function() {
        $('#accept').on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission behavior
            console.log('************** accept_form.js: form submitted');

            var $form = $(this);
            var formData = $form.serializeArray();
            var agreementId = $form.data('agreement-id');

            ajax.jsonRpc('/my/agreements/' + agreementId + '/accept', 'call', formData)
                .then(function(data) {
                    if (data.success) {
                        console.log('***************** Successfully submitted form and got a response');
                        // Reload the page on successful submission
                        window.location.href = data.redirect;
                    } else {
                        // Handle error cases if needed
                        console.error('*************** Error submitting form:', data.error);
                    }
                })
                .catch(function(error) {
                    console.error('************ Error submitting form:', error);
                });
        });
    });
});