2015-12-06 3 views
0

Мне нужна помощь, чтобы заменить некоторый html внутри div на другой html, который я получаю с сервера при вызове Ajax.Замените div на вызов ajax с помощью javascript/JQuery

Чтобы сделать это ясно для вас, ребята, у меня есть следующий код:

Код:

<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> 

Здесь вы видите, что я поставил все внутри контейнера класса под названием путешествия-контейнера.

То, что я пытаюсь сделать, это заменить div классом «маршруты» некоторым тегом div, когда я получаю новый html с сервера. Проблема в том, что мне нужно сохранить остальную часть html внутри контейнера.

код 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); 
      } 
     }); 

Прямо сейчас я использую метод поиска, чтобы найти DIV путешествия-контента и заменить все содержимое в этом дел. Попробовали поставить .routes после и один, но никто, похоже, не работает. Найти подходящее решение для использования здесь?

Все, что я хочу, это заменить маршруты div новым, который я получаю от вызова ajax, но все равно сохраняю остальную часть html без замены всего.

ответ

1

Следующий фрагмент кода может быть полезным для вас.

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

Ну ... удаленная часть права, но метод prepend, похоже, не делает то, что он должен делать. – Mikkel

+0

Я думаю, что «данные» содержат новый .travel-container .. как можно извлечь класс .routes из данных? – Mikkel

+0

ОК. См. Обновленный ответ. – Azim

0

Вы можете попробовать это, пожалуйста:

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

Это не работает вообще. Это просто заменит все это. – Mikkel

Смежные вопросы