0

Fala galera, beleza?

Pessoal to com uma dificuldade. Eu tenho uma modal, e queria ao fazer o change de um select, carregasse via ajax, alimentasse um multiselect do jQuery. Em um console.log consigo visualizar o resultado das options, mas não consigo inserir elas no bloco do MultiSelect.

Isso acontece por causa do DOM que já carregou e não consigo mais preencher? Não to conseguindo contornar isso. Meu código está assim:

Na modal:

<div class="modal-body">
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="modulo" class="control-label">Nome do Curso</label>
                <input type="text" class="form-control" id="modulo" name="modulo" required/>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="tipo_modulo" class="control-label">Tipo do Módulo</label>
                <select class="form-control" id="tipo_modulo" name="tipo_modulo" required>
                    <option disabled selected value="">Selecione um Tipo</option>
                    <option value="basico">Básico</option>
                    <option value="especifico">Específico</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="carga_horaria" class="control-label">Carga Horária</label>
                <input type="number" class="form-control" id="carga_horaria" name="carga_horaria" required/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="nome_curso" class="control-label">Descrição do Módulo</label>
                <textarea class="form-control" id="descricao_curso" name="descricao_curso" required></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        <div class="form-group">
            <label for="id_disciplina" class="control-label">Disciplinas Disponíveis</label>    
            <select name="id_disciplina" class="multi-select" multiple="" id="my_multi_select3">
                <div class="disciplinas"></div>
        </select>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fechar</button>
    <button type="submit" class="btn btn-info waves-effect waves-light">Cadastrar Módulo</button>
</div>

No meu JS que faz o ajax:

$("#tipo_modulo").change(function(){
    let tipo = $(this).children("option:selected").val();
    $.ajax({
        url: '../../assets/ajax/disciplinas.php',
        method: 'POST',
        data: {modo: tipo},
        dataType: 'html',
        success: function (result) {
            $(".disciplinas").html(result);

        }
    });
});

E no meu arquivo disciplinas.php já faço uma busca no banco com minha classe já imprimindo os options:

<?php
require('../../_app/Config.inc.php');
$post = filter_input_array(INPUT_POST, FILTER_DEFAULT);

if($post['tipo'] == 'basico'){
    $ReadDiscipline = new Read();
    $ReadDiscipline->ExeRead("disciplinas", "WHERE ativo = 1");
    foreach ($ReadDiscipline->getResult() as $disc):
        echo "<option value='{$disc['id']}'>{$disc['nome_disciplina']}</option>";
    endforeach;
}

O que quero preencher é este campo de MultiSelect: https://imgur.com/MjU2PwO

Se alguém conseguir me dar uma luz ficarei muito agradecido kkkk =P Abraço à todos.

2
  • Fala Rafael blz? você precisa dessa <div class="disciplinas"></div> dentro do select? Porque você tenta incluir as opções dentro do select direto acho que desta forma vai dar certo 19/07/2019 às 11:18
  • Blz Thiago e contigo? Eu tentei usar essa <div> pra criar apenas as <options> no lugar. Tentei como mencionou ainda assim não alimenta a caixa. Tentei também no meu php já trazer todo html desde o <select> ainda assim não funciona. É como se a caixa do multiselect só carrega no primeiro load da página.
    – Rafael
    19/07/2019 às 12:29

2 Respostas 2

1

Descobri que o próprio multiSelect do jQuery já tem as funções para adicionar as opções pra dentro do select.

O que precisei fazer, é pegar na documentação o layout do array que preciso passar como parâmetro. No meu arquivo PHP, transformei o resultado em um array, e depois dei um echo com json_encode, assim recebo no retorno do AJAX o array pronto pra ser usado. Ficou assim agora

Select do HTML simples:

<select name="id_disciplina" class="multi-select" multiple="" id="my_multi_select3"></select>

No meu JS apenas troquei o dataType de html para JSON, e adicionei as funções addOption e refresh do multiselect assim adicionando a opção e limpando os campos toda vez que faço uma alteração, assim não duplica. Também coloquei o refresh no error pois se não carregar por algum motivo não deixa a lista com informação falsa.

$("#tipo_modulo").change(function(){
    let tipo = $(this).children("option:selected").val();
    $.ajax({
        url: '../../assets/ajax/disciplinas.php',
        method: 'POST',
        data: {tipo: tipo},
        dataType: 'JSON',
        success: function (result) {                
            $('#my_multi_select3').multiSelect('refresh');
            if(tipo == 'basico'){
                $('#my_multi_select3').multiSelect('addOption', result);
            } else if(tipo == 'especifico') {
                $('#my_multi_select3').multiSelect('addOption', result);
            }
        },
        error: function(){
            $('#my_multi_select3').multiSelect('refresh');
        }
    });
}); 

E meu PHP agora ficou assim:

$arr = [];
if($post['tipo'] == 'basico'){
    $ReadDiscipline = new Read();
    $ReadDiscipline->ExeRead("disciplinas", "WHERE tipo_modulo = 'basico' AND ativo = 1");
    $k = 0;
    foreach ($ReadDiscipline->getResult() as $disc):    
        $arr[$k] = [
            "value" => $disc['id'],
            "text" => $disc['nome_disciplina'],
            "index" => $k                
        ];
        $k++;
    endforeach;
    echo json_encode($arr);
}

No PHP precisei adicionar aquele $k como chave, pois o index é o que diferencia cada um dos options no jQuery, se eu não definir isso, eles ficam todos como um só e não consigo mover de um quadro para outro. Segue as imagens funcionando: DOM Carregado antes de fazer o change Change feito, carregou as opções Funcionando perfeitamnte de um quadro para o outro

Consegui os comandos nesse link: http://loudev.com/

Bom foi isso galera, deixei a resposta completa, se alguém passar pela mesma dúvida foi assim que resolvi =P

0

Você não esta conseguindo incluir as opções dentro do select porque ao renderizar o DOM a <div class="disciplinas"></div> é removida e o JQuery esta tentando incluir um html em um lugar que não existe.

Uma solução para seu problema seria remover essa div e alterar no JQuery:

$("#my_multi_select3").html(result);

Isso deve resolver!

1
  • Infelizmente não resolveu. Parece que uma vez que o multiselect já está carregado no DOM, não consigo recriar ele ou adicionar às options
    – Rafael
    19/07/2019 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .