Replace a div on a ajax call using javascript / Jquery

Question

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.

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.

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. The problem is that I need to keep the rest of the html inside the container.

The ajax call code:

$.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. Have tried putting .routes after and alone but none seem to work. 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.

Answer 1

以下代码段可能对您有所帮助。

$('.travel-container .routes').prepend($(data).find('.routes').html());

Answer 2

你可以试试这个吗：

$('.travel-container .travelcontent').html(data);