MultiSelectQueryParams

Passar parâmetros MultiSelect via QueryParams

Bootstrap Multiselect

Foi utilizado a implementação David Stutz

Motivação

Após realizar algumas pesquisas encontrei um post onde apresentava o mesmo problema stackoverflow com a necessidade de passar os valores selecionados de um DropDown do tipo MultiSelect para o método via QueryParams identifiquei que os valores são passados via url.

example.com?aParam[]=value1&aParam[]=value2&aParam[]=value3

Quando passamos o array somente o primeiro valor do array é passado, para conter esse problema é necessário passar o array com a posição e valor.

example.com?aParam[0]=value1&aParam[1]=value2&aParam[2]=value3

Obs: Na documentação não encontrei nada que informe a maneira correta de passar os parâmetros.

Contribuição

Juliano Duarte utiliza o trecho de código a baixo, para enviar os parametros.

function getFormData($form) {
    let unindexed_array = $form.serializeArray();
    let indexed_array = {};
    let x = 0;
    let item;
    let newItem;
    $.map(unindexed_array, function (n, i) {
       indexed_array[n['name']] = n['value'];
    });
    return indexed_array;
}

Onde serializa os campos e retorna um objeto.

Exemplo

A versão orignal da function monta o parâmetro do seguinte formato:

Realizamos a implementação, quando encontrar um elemento do tipo object ele monta o elemento inserindo a posição e valor.

if (typeof $(`#${n['name']}`).val() == 'object') {
    if ((indexed_array[n['name']] == undefined)) {
        newItem = n['name']
        if (newItem != item)
            x = 0
        indexed_array[`${n['name']}[${[x++]}]`] = n['value'];
    }
}
else {
    indexed_array[n['name']] = n['value'];
}
item = n['name'];

A function ficou assim:

function getFormData($form) {
    let unindexed_array = $form.serializeArray();
    let indexed_array = {};
    let x = 0;
    let item;
    let newItem;
    $.map(unindexed_array, function (n, i) {
        if (typeof $(`#${n['name']}`).val() == 'object') {
            if ((indexed_array[n['name']] == undefined)) {
                newItem = n['name']
                if (newItem != item)
                    x = 0
                indexed_array[`${n['name']}[${[x++]}]`] = n['value'];
            }
        }
        else {
            indexed_array[n['name']] = n['value'];
        }
        item = n['name'];
    });
    return indexed_array;
}

Agora temos os parâmetros da maneira correta:

O método esta esperando no seguinte formato:

Passando os valores da maneira correta, então preenchemos nossa classe:

Autor

• Fábio Trindade