如何将main_business.php中的HTML内容插入到JS的$modal变量中？

Got it, let's figure out how to get that PHP-generated modal HTML into your open() function's $modal variable. Here are two solid approaches depending on whether your script.js is a static file or embedded in your PHP page:

Method 1: Directly Inject HTML into JavaScript (for embedded scripts) #

If you can move your open() function into a <script> block inside main_business.php (where PHP can run), you can have PHP render the HTML directly into the JS variable. Just make sure to escape special characters to avoid breaking the JavaScript string—json_encode() is the safest way to do this, since it handles quotes, newlines, and other edge cases automatically.

Here's how to write it:

<script>
function open() {
    // Use PHP to render the modal HTML and encode it for JS
    var $modal = <?php 
        $model = new Form('my-form');
        // The third "true" parameter makes renderPartial return HTML as a string
        $modalHtml = $this->renderPartial('//my/business', array('model'=>$model), true);
        echo json_encode($modalHtml);
    ?>;

    // Now you can use $modal—for example, add it to the DOM and initialize the Reveal modal
    document.body.insertAdjacentHTML('beforeend', $modal);
    const modalElement = document.getElementById('business-modal');
    if (modalElement && window.Foundation) {
        new Foundation.Reveal(modalElement);
    }
}
</script>

Method 2: Use a Hidden DOM Element (for static script.js files) #

If script.js is a standalone static file (PHP won't process it), you can store the rendered HTML in a hidden element in main_business.php, then grab its content in your JS function.

First, update main_business.php to add the hidden template:

<!-- Hidden container to hold the pre-rendered modal HTML -->
<div id="modal-template" style="display: none;">
    <div class="large reveal full-size" id="business-modal" data-reveal> 
        <?php 
            $model = new Form('my-form'); 
            echo $this->renderPartial('//my/business', array('model'=>$model)); 
        ?> 
    </div>
</div>

Then modify your script.js to pull the HTML from this element:

function open() {
    // Grab the HTML from the hidden template
    const templateElement = document.getElementById('modal-template');
    var $modal = templateElement.innerHTML;

    // Clone and add the modal to the DOM (to avoid reusing the hidden template directly)
    const modalWrapper = document.createElement('div');
    modalWrapper.innerHTML = $modal;
    document.body.appendChild(modalWrapper.firstChild);

    // Initialize Foundation's Reveal modal so it works properly
    const modalElement = document.getElementById('business-modal');
    if (modalElement && window.Foundation) {
        new Foundation.Reveal(modalElement);
    }
}

Quick Tips: #

• Always escape HTML when passing it to JavaScript: json_encode() is better than addslashes() because it handles all valid JS string edge cases.
• If you're reusing the modal multiple times, clone the template content instead of moving the hidden element itself—this keeps the template intact for future use.
• Don't forget to initialize the Foundation Reveal component after adding the modal to the DOM, otherwise it won't trigger properly when opened.

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