Выполнение Ajax-вызова при использовании «select-all» для флажков - PullRequest
Новая
       8

Выполнение Ajax-вызова при использовании «select-all» для флажков

0 голосов
/ 01 мая 2019

Я изо всех сил пытаюсь найти лучший способ реализовать вызов AJAX для каждого флажка, который выбран при использовании «select-all».

Я собрал AJAX-вызов при проверке отдельных флажков с помощью следующего кода. Этот подход, вероятно, громоздок, но работает хорошо: 

checkboxes = document.getElementsByTagName("input");

    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = checkboxes[i];
        checkbox.onclick = function () {
            var currentRow = this.parentNode.parentNode;
            var selectedVin = currentRow.getElementsByTagName("td")[1];

            $.ajax({
                type: 'GET',
                url: '/Search?handler=ExportList&vin=' + selectedVin.textContent.trim(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {

                    console.log(JSON.stringify(data));

                },
                error: function (ex) {
                    console.log('Error occurred during processing.' + ex);
                }
            });
        };
    };

Блок кода выше вызывает обработчик RazorPage для сохранения некоторых данных в сеансе.

Я также использую это, чтобы выбрать все 

 $('#select-all').click(function(event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;
            });
        }
        else {
            $(':checkbox').each(function () {
                this.checked = false;
            });
        }
    });

Нужны некоторые указания, чтобы сделать тот же AJAX-вызов для всех флажков на странице после того, как выбран «select-all». Я сделал несколько попыток объединить эти два подхода вместе, и пока что ничего не было близко.

1 Ответ

1 голос
/ 01 мая 2019

Дизайн

Один из подходов состоит в том, чтобы вручную инициировать событие нажатия с помощью element.click().Но поскольку нам нужно выбрать между checked и unchecked, лучше связать событие onchange, как показано ниже: 

someCheckbox.onchange=function(e){
    e.preventDefault();
    if(this.checked){
        onSelected(this);    //trigger event to handle `check` 
    }else{
        OnUnselected(this);  //trigger event to handling `uncheck` 
    }
}

Теперь мы можем установить некоторые флажки следующим образом: 

//  var checkbox is a `Element`
if(checkbox.checked){} // do nothing if already checked
checkbox.checked = true;
onSelected(checkbox);

Мы также можем снять его аналогичным образом.

Реализация

Во-первых, создать функции для обработки check / uncheck event 

function onSelected(selectedElement){
    var currentRow = selectedElement.parentNode.parentNode;
    var selectedVin = currentRow.getElementsByTagName("td")[1];
    console.log("seleced:",currentRow,selectedElement.name,selectedVin);
    // ... ajax call 
}

function onUnselected(unselectedElement){
    // ...
}

function onchange(e){
    e.preventDefault();
    if(this.checked) { onSelected(this); }
    else { onUnselected(this); }
}

И затем зарегистрируйте обработчик onchange для каждого checkbox элемента: 

for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onchange= onchange;
};

Наконец, зарегистрируйте обработчик #select-all.onchange, как показано ниже: 

document.getElementById('select-all').onchange=function(event) {
    if (this.checked) {
        $(':checkbox').each(function () {
            if(this.checked){ return; } // do nothing if already checked
            this.checked = true;
            onSelected(this);
        });
    }
    else {
        $(':checkbox').each(function() {
            if(!this.checked) { return; } // do nothing if already unchecked
            this.checked = false;
            onSelected(this);
        });
    }
};

Как примечание, я не думаю, что было бы хорошей идеей отправлять так много запросов AJAX.Лучше выполнить рефакторинг кода на стороне сервера, чтобы получить список проверенных строк, например {s1:"checked",s2:"unchecked",s3:"checked","s4":"checked"}.Таким образом, браузер будет отправлять только один запрос.Очевидно, это будет намного эффективнее.

...