Как повторно выполнить функцию JavaScript после формы reRender?

Мне нужно повторно выполнить JavaScript сразу после того, как форма будет перерисована. Проще говоря, добавление javascript после содержимого XHTML не поможет, так как это частичный запрос. Кроме того, я не могу использовать "onComplete", поскольку commandButton, из которого я перерисовываю форму, находится в компоненте JSF, используемом в нескольких местах. Мне нужно, чтобы исправить это на месте.

Там в любом случае? Мне было интересно, поможет ли f: ajax в этом случае.

Пожалуйста, дайте мне знать, если кто-нибудь знает об этом.

Источник

3 ответа

Решение

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

<h:form>
    ...
    <h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>
    <h:outputScript>someFunction();</h:outputScript>
</h:form>

Таким образом, он выполняется при загрузке страницы, а также при обновлении формы с помощью ajax.

Что касается <f:ajax> сам, вы также можете использовать его onevent приписывать.

<f:ajax ... onevent="handleAjax" />

с

function handleAjax(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            someFunction();
            break;
    }
}

Вы можете добавить глобальный хук, jsf.ajax.addOnEvent() так что вам не нужно указывать его в каждом onevent атрибут <f:ajax> если функциональное требование применяется к каждому запросу ajax.

jsf.ajax.addOnEvent(handleAjax);

Альтернативой является использование служебной библиотеки OmniFaces JSF, которая предлагает <h:onloadScript> именно для этой цели. Вы можете поместить это в голову так, как вы хотите.

<h:onloadScript>someFunction();</h:onloadScript>

Это автоматически выполняется повторно при каждом отдельном запросе ajax в представлении, так что вам не нужно копировать его в несколько отдельных мест в представлении, которое может быть обновлено ajax, или повторять его родительский идентификатор в каждом <f:ajax render>,

Источник

Первый ответ BalusC является наиболее подходящим, если вы хотите выполнять сложные операции с JQuery/JS и не особенно обеспокоены этим

Для более сложных JS, если вы решили использовать глобальный обработчик событий и, например, вы используете JS для bind функции к элементам, эти функции будут перепривязаны (следовательно, выполняются дважды), поэтому вам нужно каким-то образом определить, что нужно выполнить повторно.

В конце концов я получил идентификаторы из обратного вызова события и выполнил только соответствующий JS/JQuery:

jsf.ajax.addOnEvent(ajaxCompleteProcess);


function ajaxCompleteProcess(data) {
    if (data.status && data.status === 'success') {
        var children1 = data.responseXML.children;
        for (i = 0; i < children1.length; i += 1) {
            var children2 = children1[i].children;
            for (j = 0; j < children2.length; j += 1) {
                var children3 = children2[j].children;
                for (y = 0; y < children3.length; y += 1) {
                    if (children3[y].id.indexOf('javax.faces.ViewState') != -1)
                        continue;
                    elementProcess(('#' + children3[y].id.replace(/\:/g, '\\:')));
                }
            }
        }
    }
}

Примечание: эти уродливые for циклы, вероятно, не требуются (вы могли бы использовать clildren[0]), но я еще не нашел время для проверки спецификации.

Источник

Вы можете добавить jQuery в ваше приложение и сделать что-то вроде:

$(#yourComponentId).load(function(){
   //execute javascript.
});

Вы можете посмотреть здесь http://api.jquery.com/load/

LE: это быть на

$(document).ready(function(){
}

ОФК.

Источник
Другие вопросы по тегам