Amaze UI provides versatile ways to handle user interactions within modal components. Depending on the application requirements, developers typically choose between standard synchronous form submissions or asynchronous AJAX requests. This guide explores both implementation patterns.

Method 1: Synchronous Form Submissoin

This approach treats the modal as a wrapper for a standard HTML form. When the user clicks the submit button, the browser performs a traditional POST request, resulting in a page refresh or redirection.

<!-- Modal Structure with Form -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="form-submit-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Update Configuration</div>
    <form method="post" action="/submit-handler" id="modal-data-form">
      <div class="am-modal-bd">
        <table class="am-table">
          <tr>
            <td>Category:</td>
            <td>
              <select name="category_id" data-am-selected="{btnWidth: '100%'}">
                <option value="1">Option A</option>
                <option value="2">Option B</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <div class="am-modal-footer">
        <button type="submit" class="am-btn am-btn-primary">Submit</button>
        <button type="button" class="am-btn am-btn-default" data-am-modal-cancel>Cancel</button>
      </div>
    </form>
  </div>
</div>

To trigger this modal via JavaScript, you can initialize it within a function:

function openFormModal() {
  $('#form-submit-modal').modal({
    relatedTarget: this,
    onCancel: function() {
      console.log('User cancelled the form submission.');
    }
  });
}

Method 2: Asynchronous AJAX Confirmation

In modern web applications, it is often preferable to submit data without a full page reload. Amaze UI supports this through the onConfirm callback, which allows you to intercept the confirmation action and perform custom logic like an AJAX POST.

<!-- Modal Structure for AJAX -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="ajax-confirm-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Data Confirmation</div>
    <div class="am-modal-bd">
      <p>Please select the items to process:</p>
      <select id="target-selection" data-am-selected="{btnWidth: '100%'}">
        <option value="item1">Item 1</option>
        <option value="item2">Item 2</option>
      </select>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-modal-btn" data-am-modal-confirm>Confirm</span>
    </div>
  </div>
</div>

The JavaScript logic uses the modal's callback system to handle the data transmission:

function triggerAjaxSubmission() {
  $('#ajax-confirm-modal').modal({
    relatedTarget: this,
    onConfirm: function(e) {
      const selectedValue = $('#target-selection').val();
      const payload = {
        id: selectedValue,
        timestamp: new Date().getTime()
      };

      $.ajax({
        url: '/api/update-records',
        type: 'POST',
        data: payload,
        success: function(response) {
          if (response.status === 'success') {
            window.location.reload();
          } else {
            alert('Processing failed: ' + response.message);
          }
        },
        error: function() {
          alert('A network error occurred.');
        }
      });
    },
    onCancel: function(e) {
      // Logic for cancellation
      return false;
    }
  });
}

Comparison

• Form Submission: Best for simple applications or when the subsequent view is completely difefrent. It relies on native browser behavior.
• AJAX Confirmation: Provides a smoother user experience. It is ideal for dashboards or complex interfaces where only partial state updates are needed, though it requires more manual error handling.