如何将ColdFusion 2016生成的投票记录内容加载到Bootstrap Modal中？

Hey there! Let's walk through how to load those ColdFusion-generated poll records into a Bootstrap Modal. Here's a straightforward, step-by-step approach:

Step 1: Add the Bootstrap Modal to Your Page #

First, insert the basic Bootstrap Modal structure somewhere in your page (usually near the bottom, before closing the </body> tag):

<!-- Bootstrap Poll Modal -->
<div class="modal fade" id="pollModal" tabindex="-1" aria-labelledby="pollModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pollModalLabel">Poll Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="pollModalBody">
        <!-- Poll content will load here dynamically -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Step 2: Update Your ColdFusion Table Row #

Modify your existing table code to make the "Retrieve Poll" link trigger the modal instead of navigating away. We'll add a custom class and data attribute to pass the POLL_ID:

<tr>
  <td scope="row">#POLL_NAME#</td>
  <td>
    <!-- Updated link: uses data attribute for poll ID instead of direct href -->
    <a href="#" class="retrieve-poll" data-pollid="#POLL_ID#" id="pollQ_#variables.count#">Retrieve Poll</a>
  </td>
  <td>#POLL_START#</td>
  <td>#POLL_END#</td>
  <td>
    <cfif IS_ACTIVE is 1>
      <i class="fa fa-toggle-on" id="activeToggleOn_#variables.count#" data-pollid="#POLL_ID#"></i>
    <cfelse>
      <i class="fa fa-toggle-off" id="activeToggleOff_#variables.count#" data-pollid="#POLL_ID#"></i>
    </cfif>
  </td>
</tr>

(Note: Fixed a small typo in your original code where <td scope="row"> was closed with </th> instead of </td>)

Step 3: Adjust manager.cfm to Return Only Poll Content #

Right now, manager.cfm probably returns a full page with headers/footers. We need it to send just the poll details when called via AJAX. Add this at the top of manager.cfm:

<cfif structKeyExists(url, 'svc') and url.svc eq 'gp'>
  <!--- Output ONLY the poll content here (no layout/headers) --->
  <cfoutput>
    <h3>#POLL_NAME#</h3>
    <div class="mb-3">
      <strong>Start Date:</strong> #POLL_START#
    </div>
    <div class="mb-3">
      <strong>End Date:</strong> #POLL_END#
    </div>
    <div class="mb-3">
      <strong>Status:</strong> <cfif IS_ACTIVE is 1>Active<cfelse>Inactive</cfif>
    </div>
    <!--- Add any other poll details (questions, options, etc.) here --->
  </cfoutput>
  <cfabort> <!--- Stop processing to avoid outputting the rest of the page --->
</cfif>

<!--- Rest of your existing manager.cfm code (layout, etc.) goes below --->

Step 4: Add JavaScript to Load Content into the Modal #

Choose either jQuery (common in ColdFusion setups) or vanilla JS for Bootstrap 5:

Option A: jQuery Version

Make sure jQuery is loaded on your page, then add this script:

$(document).ready(function() {
  $('.retrieve-poll').on('click', function(e) {
    e.preventDefault(); // Stop the link from navigating
    const pollID = $(this).data('pollid');
    const modal = $('#pollModal');
    const modalBody = $('#pollModalBody');

    // Show loading state
    modalBody.html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading poll...</div>');

    // Fetch poll details via AJAX
    $.ajax({
      url: '/customcf/extras/polls/manager.cfm',
      method: 'GET',
      data: { svc: 'gp', pollID: pollID },
      success: function(response) {
        modalBody.html(response); // Insert poll content
        modal.modal('show'); // Open the modal
      },
      error: function() {
        modalBody.html('<div class="text-danger">Oops! Failed to load the poll. Please try again.</div>');
        modal.modal('show');
      }
    });
  });
});

Option B: Vanilla JS (Bootstrap 5)

If you're using Bootstrap 5 and don't want jQuery, use this instead:

document.addEventListener('DOMContentLoaded', function() {
  const retrieveLinks = document.querySelectorAll('.retrieve-poll');
  const modalElement = document.getElementById('pollModal');
  const modalBody = document.getElementById('pollModalBody');
  const pollModal = new bootstrap.Modal(modalElement);

  retrieveLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const pollID = this.dataset.pollid;

      modalBody.innerHTML = '<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading poll...</div>';

      // Fetch poll details using Fetch API
      fetch(`/customcf/extras/polls/manager.cfm?svc=gp&pollID=${pollID}`)
        .then(response => response.text())
        .then(data => {
          modalBody.innerHTML = data;
          pollModal.show();
        })
        .catch(() => {
          modalBody.innerHTML = '<div class="text-danger">Oops! Failed to load the poll. Please try again.</div>';
          pollModal.show();
        });
    });
  });
});

Final Checks #

• Ensure Bootstrap CSS and JS are included in your page (for Bootstrap 5, you don't need jQuery, but if using the jQuery version, make sure jQuery is loaded before Bootstrap JS).
• Test the flow: click "Retrieve Poll"—the modal should open with a loading spinner, then replace it with the poll details from manager.cfm.

That's it! This setup will load your poll records into a Bootstrap Modal dynamically without reloading the entire page.

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