Ajax调用后维持Div原有高度及移动端Bootstrap模态框高度设置失效问题咨询

Hey Jeremy, let's tackle these two frontend issues one by one—they're pretty common with dynamic content and Bootstrap modals, so I've got some solid fixes for you:

The core issue here is that every Ajax call replaces the entire cart HTML, wiping out any inline styles (like your custom height) you added earlier. The fix is to save the current height before the Ajax request runs, then reapply it once the new HTML is inserted.

Here's how to implement it:

// Step 1: Save the current height right before making the Ajax call
const cartContainer = document.querySelector('.your-cart-div-selector');
// Use offsetHeight to get the actual rendered height (in pixels)
const savedHeight = cartContainer.offsetHeight;

// Step 2: Run your Ajax request
// (Using fetch here, but this works with jQuery Ajax too)
fetch('/your-cart-api-endpoint')
  .then(res => res.text())
  .then(cartHtml => {
    // Insert the fresh cart HTML
    cartContainer.innerHTML = cartHtml;
    // Step 3: Restore the saved height
    cartContainer.style.height = `${savedHeight}px`;
    
    // Pro tip: If you want the div to auto-expand if new content is taller
    const newContentHeight = cartContainer.scrollHeight;
    if (newContentHeight > savedHeight) {
      cartContainer.style.height = 'auto'; // Let it expand naturally
    }
  });

This way, you retain the user's previously set height unless the new cart content needs more space.

You’re exactly right—this is 100% related to the modal’s default display: none state. When an element is set to display: none, browsers don’t render it at all, so any attempts to read child element dimensions (like offsetHeight or scrollHeight) will return 0. Your calculation function can’t do its job without those values.

The fix is to run your height calculation only after the modal is fully visible. Bootstrap provides a dedicated event for this: shown.bs.modal, which triggers after the modal has finished animating and is fully rendered.

Here’s how to hook into it:

document.addEventListener('DOMContentLoaded', function() {
  // Get your modal element
  const cartModal = document.getElementById('your-cart-modal-id');
  
  // Bind your height function to the modal's shown event
  cartModal.addEventListener('shown.bs.modal', function() {
    // Your existing height calculation logic here
    document.querySelectorAll('.target-div-class').forEach(div => {
      // Example: Calculate height based on child element data
      const childHeight = parseInt(div.querySelector('.cart-item').dataset.itemHeight);
      const totalHeight = childHeight * div.children.length + 30; // Adjust to your logic
      div.style.height = `${totalHeight}px`;
    });
  });
});

If you ever need to run logic right before the modal opens (but after it’s started rendering), you can use the show.bs.modal event instead—but shown.bs.modal is almost always safer for dimension-related tasks, since it waits for all animations and layout to finish.

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