Как обновить несколько DIV, когда после публикации с помощью JQuery

Question

У меня есть экран с несколькими маленькими виджетами (все с разными элементами div вокруг них). у меня есть одна форма, и когда я публикую (используя jquery) прямо сейчас, он обновляет одну форму, используя ajax.

Я хочу, чтобы обновились и два других div-а (которые находятся вне формы). Каков наилучший способ инициировать обновление нескольких различных div в одном обратном обратном вызове jquery ajax?

Answer 1

Способ 1. Создайте частичное представление после публикации, чтобы оно содержало скрытые данные, которые вы будете использовать для обновления других элементов div. Я думаю, что это намного лучше, чем возвращать специальный код JSON или скриптов. Вероятно, вы можете использовать .detach () вместо .clone ().

<div>Main post result data</div>
<div id="additional1" style="display:none">Moredata</div>

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#additional_div").html($("#result #additional1").clone().show());
}

Способ 2. При успешном завершении формы выполните дополнительные $ .get () для обновления дополнительных элементов div. Работает лучше, если дополнительные данные большие; если оно маленькое, то лучше №1.

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#addiotional_div").load("/additional_action/updated_info");
}

Answer 2

Если вы не измените действие своего сервера для возврата соответствующего HTML-кода для всех элементов div, которые необходимо обновить (возможно, с использованием строки в кодировке JSON), вы не сможете добиться этого в одном запросе AJAX.

---

UPDATE:

Есть еще одна техника, которую я хотел бы показать. Вы можете иметь действие контроллера, которое возвращает JavaScript. Давайте возьмем для примера следующий частичный вид ASCX (RefreshPartials.ascx):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

$('#partial1Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData) %>');
$('#partial2Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial2.ascx", ViewData)%>');

Где отсюда взято RenderPartialToString (Примечание: этот метод, возможно, имеет некоторые недостатки и может работать не во всех случаях, но вы можете попробовать его). Затем вы выполняете AJAX-запрос к действию контроллера, которое просто отображает эту часть:

public ActionResult RefreshPartials()
{
    return PartialView("RefreshPartials");
}

Вам необходимо указать dataType: script в вашем запросе ajax, чтобы оценивать JavaScript, содержащийся в предыдущем фрагменте:

$.ajax({
    url: '/home/refreshpartials',
    dataType: 'script'
});

Последнее замечание - правильно избегать результата метода RenderPartialToString, так как он может содержать символы, которые тормозят JavaScript. Вот один метод, который вы можете использовать:

public static string JsEscape(this HtmlHelper html, string content)
{
    content = Regex.Replace(content, "(\r\n)|(\r)|(\n)", @"\n", RegexOptions.Multiline);
    content = Regex.Replace(content, "(?<!\\\\)\"", "\\\"", RegexOptions.Multiline);
    return content;
}

Итак, наконец, ваш частичный может выглядеть так:

$('#partial1Container').html('<%= Html.JsEscape(Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData)) %>');

Вы можете видеть, что вы можете поместить любой javascript, который вам нравится, в этот RefreshPartials.ascx, чтобы сделать ваш запрос AJAX интересным.

Примечание: Идея взята из Ruby On Rails Javascript Generators .