Как я могу поместить html-ответ ajax внутри модального окна без обновления всей страницы?
$.ajax({
type: "Post",
url: '@Url.Action("ModifierPM", "Mode")',
data: data,
contentType: false,
processData: false,
success: function (response) {
$("#modalModifPM").modal('hide');
// i want to show reaponse data in this Modal
// within not refresh all the page, just the MODAL will be updated and appeared
$("#modalTMRs").modal('show');
}
});
Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если ваш ответ исходит от результатов частичного просмотра (это означает, что ваш ответ представляет собой текст html), вы можете поместить весь ответ в модальное тело;
$.ajax({
type: "Post",
url: '@Url.Action("ModifierPM", "Mode")',
data: data,
contentType: false,
processData: false,
success: function (response) {
$("#modalModifPM").modal('hide');
// this line finds the modal body in two step and puts the response data inside of it
$("#modalTMRs").find(".modal-body").html(response);
$("#modalTMRs").modal('show');
}
});
Как вы видели в строке комментариев, есть больше и лучшие способы найти модальное тело. Например;
$("#modalTMRs .modal-body").html(response); // one space between parent and child
Другой способ — написать id непосредственно в div модального тела и найти его через id; Если ваш модальный html, как показано ниже;
<div id = "modalTMRs" class = "modal" tabindex = "-1" role = "dialog">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title">Modal title</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body" id = "modalTMRs-modal-body"> THATS THE ID
<p>Modal body text goes here.</p>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
Тогда вы сможете достичь за один шаг;
$("#modalTMRs-modal-body").html(response);
Примеров может быть больше.. :P
Если вы ответите только на список Json, вы можете преобразовать его в клиентскую часть таблицы;
var exampleJsonResult = [
{ "id":1, "name":"test1", "statu":"OK" },
{ "id":2, "name":"test2", "statu":"OK" },
{ "id":3, "name":"test3", "statu":"OK" },
];
И функция результата может быть такой;
function makeTable(json) {
let htmlTable = "<table>";
json.forEach(item=>{
htmlTable += "<tr>";
htmlTable += "<td>" + item.id + "</td>";
htmlTable += "<td>" + item.name + "</td>";
htmlTable += "<td>" + item.statu + "</td>";
htmlTable += "</tr>";
});
htmlTable += "</table>";
return htmlTable;
}
Когда вы отправляете данные результата в эту функцию, это даст вам таблицу. Следующим шагом добавьте таблицу в любое место, как описано выше.
В этом примере вам нужно знать модель данных и вызывать значения по имени.
Если вы хотите сделать конструктор таблиц более гибким, вы должны изменить модель ответа следующим образом;
var exampleJsonResult2 = [
[ 1, "test1", "OK", 234.2 ],
[ 2, "test2", "NO", 345.6 ],
[ 3, "test3", "OK", 456.7 ],
[ 4, "test4", "NO", 678.9 ],
];
Этот json представляет собой список, состоящий из каждого элемента, представляет собой список объектов. Преимущество этой модели; вы можете выполнять итерацию с помощью циклов, вам не нужно знать имена свойств.
function makeTable2(json) {
let htmlTable = "<table>";
json.forEach(item=>{
htmlTable += "<tr>";
item.forEach(prop => htmlTable += "<td>" + prop + "</td>");
htmlTable += "</tr>";
});
htmlTable += "</table>";
return htmlTable;
}
makeTable2(exampleJsonResult2) — это строка таблицы!
Спасибо за ваш ответ, я нахожу этот метод идеальным, но когда я вернусь к своему модальному, я обнаружил, что он пуст, мой модальный выглядит так: <div class = "modal-body" id = "modalTMRs-modal-body"> < table class = "test"> <tr> <th>Номинальный параметр</th> <th>Значение по умолчанию</th> <th></th> <th></th> </tr> </table > </div> /// я заполняю поле вызовом AJAX
Хорошо, тогда ваше частичное представление должно возвращать только ту таблицу, которую вы хотите. Помните, что макет должен быть установлен нулевым внутри частичного представления.
Я заполняю таблицу следующим образом для (var i в ответе) { var ligne = '<tr id=' + response[i].idParam + '><td>' + response[i].nomParam + '</td> <td>' + response[i].valParDet + '</a></td><td><a href = "#" type = "button" onclick = "ModifierPM(' + "'" + response[i ].idParam + "'" + ', ' + "'" + response[i].idMode + "'" + ', ' + "'" + response[i].nomParam + "'" + ', ' + "'" + response[i].valParDet + "'" + ', ' + "'" + response[i].idTMR + "'" + ')" </td></tr>';$(" table.test").append(ligne);
и метод в контроллере был общедоступным JsonResult GetParametresModeC(int idMode) и возвращал return Json("успех", JsonRequestBehavior.AllowGet); // или ошибка в зависимости от случая
Это очень плата, но в зависимости от вашей модальной структуры и не видя этого мы не можем вам сказать наверняка.