[英]Replace a div on a ajax call using javascript / Jquery
I need some help in order to replace some html inside a div with some other html which I get from the server when making the Ajax call. 我需要一些帮助,以便将div中的某些html替换为在进行Ajax调用时从服务器获取的其他html。
To make this clear for you guys, I have the following code: 为了让大家清楚,我有以下代码:
Code: 码:
<div class="travel-container" id="travel-container">
<div class="travel-content">
@using (Html.BeginForm(new { id = "sbw_travel_form" }))
{
<div class="row">
<div class="routes small-12 large-6 column">
@Html.Label("Departure Route:", new { @class = "label-travel" })
@Html.DropDownListFor(m => m.DepartureRoute, routesSelectList, new { @class = "dropdown", @id = "Outbound-route" })
@Html.Label("Return Route:", new { @class = "label-travel" })
@Html.DropDownListFor(m => m.ReturnRoute, routesConverslySelectList, new { @class = "dropdown", @id = "Return-route" })
</div>
<div class="dates small-12 large-3 column">
@Html.Label("Departure Date:", new { @class = "label-travel" })
@Html.TextBoxFor(m => m.DepartureDate, new { Value = Model.DepartureDate.ToShortDateString(), @class = "textbox datepicker ll-skin-melon", @id = "departureDate" })
@Html.Label("Return Date:", new { @class = "label-travel" })
@Html.TextBoxFor(m => m.ReturnDate, new { Value = Model.ReturnDate.ToShortDateString(), @class = "textbox datepicker ll-skin-melon", @id = "returnDate" })
</div>
<div class="small-12 medium-6 large-3 columns"></div>
</div>
}
</div>
</div>
Here you see that I have put everything inside a class container called travel-container. 在这里,您看到我已将所有内容放入一个名为travel-container的类容器中。
What I'm trying to do is to replace the div with the "routes" class with some same div tag when I get new html from the server. 我想做的是,当我从服务器获取新的html时,用一些相同的div标记将div替换为“ routes”类。 The problem is that I need to keep the rest of the html inside the container.
问题是我需要将其余的html保留在容器内。
The ajax call code: Ajax调用代码:
$.ajax({
type: 'POST',
url: "@Url.Action("FindReturnRoutes", "Travel")",
dataType: "html",
data: postData,
beforeSend: function () {
$(".travel-content").append(res.loader);
setTimeout(delay);
},
success: function (data) {
setTimeout(function () {
$(".travel-content").find(res.loader).remove();
$('.travel-container').html($(data).find(".travel-content"));
datepickerLoad();
Initializer();
}, delay);
}
});
Right now I'm using the find method to find the travel-content div and replace all the content within that div. 现在,我正在使用find方法来查找travel-content div并替换该div中的所有内容。 Have tried putting .routes after and alone but none seem to work.
曾尝试单独放置.routes,但是似乎没有任何作用。 Is find the right solution to use here?
在这里找到合适的解决方案吗?
All I want is to replace the routes div with the new one I get from the ajax call, but still keep the rest of the html without replaceing it all. 我只想用从ajax调用中获得的新路由替换div,但仍然保留其余的html,而不是全部替换。
以下代码段可能对您有所帮助。
$('.travel-container .routes').prepend($(data).find('.routes').html());
你可以试试这个吗:
$('.travel-container .travelcontent').html(data);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.