Я хочу знать, как я могу обновить модальное окно и отобразить его после обновления данных с помощью вызова Ajax

Как я могу поместить 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');
    }
});

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

Carsten Løvbo Andersen 16.05.2022 15:37

Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.

Community 17.05.2022 03:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если ваш ответ исходит от результатов частичного просмотра (это означает, что ваш ответ представляет собой текст 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">&times;</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

sinda 17.05.2022 12:18

Хорошо, тогда ваше частичное представление должно возвращать только ту таблицу, которую вы хотите. Помните, что макет должен быть установлен нулевым внутри частичного представления.

Serhat MERCAN 17.05.2022 12:34

Я заполняю таблицу следующим образом для (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);

sinda 17.05.2022 12:37

и метод в контроллере был общедоступным JsonResult GetParametresModeC(int idMode) и возвращал return Json("успех", JsonRequestBehavior.AllowGet); // или ошибка в зависимости от случая

sinda 17.05.2022 12:39

Другие вопросы по теме