Как изменить Ajax генерируется HTML-Content

Question

Привет У меня есть проблемы, чтобы изменить содержимое HTML, который генерируется с помощью AJAX

Это код страницы:

@model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> 

@{ 
    ViewBag.Title = "List"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Übersicht Liste</h2> 


<form method="post" action="List"> 
    <div class="input-group"> 
     <div class="input-group-btn"> 
      <input type="text" class="form-control" name="searchbar" placeholder="Search"> 

      <button class="btn btn-default" type="submit"> 
       <i class="glyphicon glyphicon-search"></i> 
      </button> 
     </div> 
    </div> 
</form> 

<table class="table" id="sorttable"> 
    <thead bgcolor="white"> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.BookingNr) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Arrival) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Departure) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Name) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Appartment) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Adult) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Children) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Total) 
      </th> 
     </tr> 

    </thead> 

</table> 
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" /> 
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('#sorttable').DataTable({ 
      "ajax": { 
       "url": "/OverView/loaddata", 
       "type": "GET", 
       "datatype": "json" 
      }, 
      "columns": [ 
       { "data": "BookingNr", "autoWidth": true }, 
       { "data": "Arrival", "autoWidth": true }, 
       { "data": "Departure", "autoWidth": true }, 
       { "data": "Name", "autoWidth": true }, 
       { "data": "Appartment", "autoWidth": true }, 
       { "data": "Adult", "autoWidth": true }, 
       { "data": "Children", "autoWidth": true }, 
       { "data": "Total", "autoWidth": true }, 
      ] 
     }); 
    }); 

</script> 

Пример того, что генерируется:

<div class="dataTables_filter" id="sorttable_filter"> 
    <label>Search: 
      <input aria-controls="sorttable" type="search" placeholder=""> 
    </label> 
</div> 

И я думаю, что это была моя лучшая попытка:

<script> 
    $(document).ready(function() { 
     $(document).on(function() { 
      $('#sorttable_filter label:eq(1)').text('Suchen:'); 
     }); 
    }); 
</script> 

который я установил ниже сценария AJAX, я попытался поставить его в тот же скрипт-Tag ниже, чтобы убедиться, что AJAX выполняется

Answer 1

Несколько комментариев ...

JQuery на() метод связывает функцию с конкретным событием, например: $ (что-то) .on («click», doSomething), и вы предоставляете там только функцию, поэтому она не знает, к какому событию привязать вашу функцию.

Тогда eq (1) - это метод jQuery, но не селектор CSS, поэтому вы хотели бы использовать «label: first-child» (если вам нужен первый). Однако он уничтожит поле ввода в вашем примере HTML, потому что оно находится внутри элемента метки, поэтому вы (вероятно) хотели бы иметь его снаружи. В случае, когда вы не в состоянии изменить этот вывод HTML можно использовать грязный хак «двигающейся» входной копию за пределы элемента этикетки ... как этого

$(document).ready(function() { 
 
    var labelEl = document.querySelector("#sorttable_filter label:first-child"); 
 
    var inputEl = labelEl.querySelector("input"); 
 
    labelEl.parentNode.appendChild(inputEl); 
 
    labelEl.innerText = 'Suchen:'; 
 
});

То, что я дон 't нравится тот факт, что document.ready() может произойти некоторое время до появления фактического элемента, поэтому вы бы хотели получить внешний вид результата по крайней мере ...