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.

Ibrahim Khan · Accepted Answer · 2015-12-06 16:56:36Z

1

Following code snippet may be helpful for you.

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

edited Dec 6, 2015 at 16:56

answered Dec 6, 2015 at 16:22

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mikkel Over a year ago

Well.. the remove part is right, but the prepend method does not seem to do what it should do.

Mikkel Over a year ago

I guess the "data" is containing a new .travel-container.. how can retrive the .routes class out of the data?

Mikkel Over a year ago

The other solution you did worked, just have to do it like this line: $('.travel-content .replace').prepend(($(data).find(".routes"))); Thx man for helping me. please edit it back to prepend ;)

Franco · Accepted Answer · 2015-12-06 16:17:50Z

0

Can you try this please:

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

answered Dec 6, 2015 at 16:17

Franco

2,3291 gold badge13 silver badges18 bronze badges

1 Comment

Mikkel Over a year ago

That does not work at all. This will just replace it all

Collectives™ on Stack Overflow

Replace a div on a ajax call using javascript / Jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related