CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Mikkel
Mikkel

Reputation: 1811

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.

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.

Upvotes: 0

Views: 57

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Following code snippet may be helpful for you.

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

Upvotes: 1

Franco
Franco

Reputation: 2329

Can you try this please:

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

Upvotes: 0

Related Questions