[英]Jquery - selecting subset of data from ajax request not working
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请求返回的数据子集替换模式的子集。
$.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. 我正在尝试替换活动模式的子集(即获取模式主体),并用ajax请求中的数据子集替换它。
My response from the ajax request in some cases will be below: 在某些情况下,我对ajax请求的回复如下:
<div class="modal-body"><div class="alert alert-danger">Error</div></div>
But when my ajax request completes, the newbody is empty. 但是,当我的ajax请求完成时,新成员为空。 The selector
($('.modal-body', data);
) returns an empty object. 选择器
($('.modal-body', data);
)返回一个空对象。 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. 我不确定为什么要作为选择器在响应中存在,并且应该将
<div class="alert alert-danger">Error</div>
作为新对象返回。
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. 如果我将响应修改为
<div class="modal"><div class="modal-body"><div class="alert alert-danger">Error</div></div></div>
,选择器然后工作。
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>');
作品:
$('.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>');
不起作用 :
$('.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: 在ajax请求时,我的
placeholderElement
是一个简单的引导程序模式:
<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">×</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>
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. 选择器
$('.modal-body', data)
试图在$('.modal-body', data)
中找到具有该类的现有元素,但是data必须是实际的Element或另一个jQuery实例。 If data
is a string you can try to parse the HTML first: 如果
data
是字符串,则可以尝试首先解析HTML:
var newBody = $('.modal-body', $(data));
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. 首先,jQuery函数有两个参数,一个是字符串(选择器),第二个必须是DOM元素,Document或jQuery元素才能用作上下文。
http://api.jquery.com/jquery/#jQuery1 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." “默认情况下,选择器从文档根目录开始在DOM中执行搜索。但是,可以通过使用$()函数的可选第二个参数为搜索提供备用上下文。”
So it's saying that it's ignoring the root element because says within ^^. 就是说它忽略了根元素,因为它在^^中表示。
I hope i could help you :) 我希望我能为您提供帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.