Jquery replaceWith(html) not replacing element; appending it to end instead-CodePudding

I have the following HTML. Its a form inside of a modal window:

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ....
            </div>
       </form>
    </div>
</div>

Whenever the form is opened, I want to render a fresh version of the form, free of any old inputs or error messages. The following handler gets the data for hidden fields plus the form's HTML I can obtain the data for the form along with the raw HTML for the form via an Ajax request:

$(document).on('click', '#por-detail-tbl .dropdown-menu', e => {

    // This route will get fresh form HTML also.
    $.get(`/projects/${$(e.target).attr('project-id')}`, res => {
        $('#requestModal').replaceWith(res.html)

        ...more code here to populate hidden fields...
    })
})

I would expect the $('#requestModal') element to be replaced with whatever res.html is (in this case, a new version of the form). Instead, res.html is getting inserted as the last element in the document body. The old $('#requestModal') is still there.

Here is a snippet from res.html:

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ...
            </div>
        </form>
     <div>
</div>

I'm able to use this technique successfully in other Ajax callbacks. Any ideas why this one is behaving strangely?

CodePudding user response：

You actually want jQuery's .html() function here.

In your original code, the replaceWith() function replaces $('#requestModal'). But the element you replaced is the element that's been manipulated by Bootstrap to perform the modal behavior you expect.

So I think you really want to set the content of the div.modal-dialog element to just the form and its children. If you can pare down res.html to just the form and children, you can change $('#requestModal').replaceWith(res.html) to $('#requestModal').find('div.modal-dialog').html(res.html).