Jquery - selecting subset of data from ajax request not working

Question

I am using a modal to submit a form. I have it working correctly. The problem I am having with is replacing a subset of the modal with a subset of the data returned by the ajax request.

$.ajax({ url: actionUrl, method: 'post', data: dataToSend, processData: false, contentType: false })
  .done(function (data) {

   var newBody = $('.modal-body', data);
   console.log(newBody);
   placeholderElement.find('.modal-body').replaceWith(newBody);
   //other stuff
    }

I am trying to replace a subset of the modal that is active (ie get the modal-body) and replace it with a subset of the data from the ajax request.

My response from the ajax request in some cases will be below:

<div class="modal-body"><div class="alert alert-danger">Error</div></div>

But when my ajax request completes, the newbody is empty. The selector ($('.modal-body', data); ) returns an empty object. I'm not sure why as the selector it is looking for exists in the response and it should be returning the <div class="alert alert-danger">Error</div> as the new object.

If I modify my response as <div class="modal"><div class="modal-body"><div class="alert alert-danger">Error</div></div></div> , above selector then works.

My question is, why does one work vs the other not working?

Works: $('.modal-body', '<div class="modal"><div class="modal-body"><div class="alert alert-danger">Error</div></div></div>');

Does Not Work : $('.modal-body', '<div class="modal-body"><div class="alert alert-danger">Error</div></div>');

What do I need to do to simplify this? Any reason why one of the options does not work?

---

My placeholderElement at the point of the ajax request is a simple bootstrap modal:

<div class="modal fade"  tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="loading"></div>
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
//stuff
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-dark text-light" data-save="modal">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

The selector $('.modal-body', data) tries to find an existing element with that class within data, but data must be an actual Element or another jQuery instance. If data is a string you can try to parse the HTML first:

var newBody = $('.modal-body', $(data));

Answer 2

Firstly, the jQuery function takes 2 arguments, one is a string (the selector) and the second have to be a DOM Element, Document, or jQuery element to be used as a context.

http://api.jquery.com/jquery/#jQuery1

Finally, the reason because the second way doesnt works it's because the context takes the root node and ignore him to search the selector. This is a deduction I did >_<.

EDIT:

From the link i just give you:

"By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function."

So it's saying that it's ignoring the root element because says within ^^.

I hope i could help you :)