如何通过Ajax触发布局JS函数加载局部视图及模态框事件？

Let's break down how to refine your existing code and complete the modal implementation for a smooth, reliable experience.

1. Refining the Partial View Toggle Function #

Your core logic for toggling the row and loading the partial view is solid, but we can add some robustness and efficiency tweaks:

$('.follow-tasks').click(function (e) {
    e.preventDefault();
    const $btn = $(this);
    const taskId = $btn.data('id'); // Use data() instead of attr() for data attributes
    const $targetRow = $("#tr-" + taskId);
    const $targetContainer = $("#td-" + taskId);

    if ($targetRow.is(":hidden")) {
        $targetRow.show();
        // Only load content if the container is empty (skip reloading on repeated shows)
        if ($targetContainer.is(':empty')) {
            $targetContainer.load($targetContainer.data('url'), function(response, status, xhr) {
                // Add error handling for failed loads
                if (status === "error") {
                    $targetContainer.html(`Oops, failed to load content: ${xhr.status} ${xhr.statusText}`);
                }
            });
        }
    } else {
        $targetRow.hide();
    }
});

Key improvements:

• Stored element references in variables to avoid repeated DOM queries (faster and cleaner).
• Added error handling so users get feedback if the partial view fails to load.
• Added a check to skip reloading content if it's already present (remove this line if you need fresh data every time the row is shown).

2. Completing the Modal Dialog Implementation #

Assuming you're using Bootstrap modals (the most common approach), here's the full working code:

First, add a modal template to your HTML:

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- Ajax content loads here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Then, the JavaScript for the .data-form click handler:

$('.data-form').click(function (e) {
    e.preventDefault();
    const $btn = $(this);
    const modalTitle = $btn.attr('modal-caption'); // Switch to data-modal-caption for HTML compliance if possible
    const modalUrl = $btn.data('url'); // Assume your button has a data-url attribute with the modal content path

    // Get modal elements
    const $modal = $('#dataModal');
    const $modalTitle = $('#modalTitle');
    const $modalBody = $('#modalBody');

    // Set title and show loading state
    $modalTitle.text(modalTitle);
    $modalBody.html('<div class="text-center">Loading content...</div>');

    // Load modal content via Ajax
    $.get(modalUrl)
        .done(function(content) {
            $modalBody.html(content);
            // If your modal content has interactive JS (like form validation), initialize it here
            // Example: $('.modal-form').validate();
        })
        .fail(function(xhr, status, error) {
            $modalBody.html(`Failed to load content: ${error}`);
        })
        .always(function() {
            // Show the modal once content is loaded (or immediately if you prefer)
            $modal.modal('show');
        });
});

3. Critical Best Practices #

• Event Delegation: If your .follow-tasks or .data-form buttons are added dynamically (e.g., after another Ajax call), use delegation to ensure the handler works:

  // Example for dynamic follow-tasks buttons
  $(document).on('click', '.follow-tasks', function(e) {
      // Same logic as above
  });
  

• HTML Compliance: Replace custom attributes like modal-caption with data-modal-caption to follow HTML5 standards (access $btn.data('modal-caption') instead of attr()).
• Modal Cleanup: Clear modal content when it's closed to avoid stale data:

  $('#dataModal').on('hidden.bs.modal', function() {
      $('#modalBody').empty();
      $('#modalTitle').text('');
  });
  

内容的提问来源于stack exchange，提问作者Jourmand