Formulario passando parametros para o Modal

Tenho um Datatable que tem um botão Detalhar, quando clico nesse botão ele deve abrir um Modal e exibir as informações do Pedido. Porém não estou conseguindo passar essas informações para o Modal. Ele não está carregando as informações que estou enviando. Então gostaria que me ajudassem com algum exemplo ou função para me ajudar a passar essas informações para o Modal.

var myModal = FLUIGC.modal({
        title: 'Detalhamento - Pedido de Consumo Orçamento',
        content: '<p>' +
                 '<form name="form" role="form">' +
                    '<div class="panel-body">' +
                        '<div class="row" id="divModal01">' +
                            '<div class="form-group col-md-3"><label for="detSolicitante">Solicitante</label><input type="text" class="form-control" id="detSolicitante" name="detSolicitante" ></div>' +
                            '<div class="form-group col-md-5"><label for="detHierarquia">Hierarquia</label><input type="text" class="form-control" id="detHierarquia" name="detHierarquia" ></div>' +
                            '<div class="form-group col-md-4"><label for="detDescDespesas">Descriçao Despesa</label><input type="text" class="form-control" id="detDescDespesas" name="detDescDespesas" ></div>' +
                        '</div>' +
                        '<div class="row" id="divModal02">' +
                            '<div class="form-group col-md-1"><label for="detPedido">Pedido</label><input type="text" class="form-control" id="detPedido" name="detPedido" ></div>' +
                            '<div class="form-group col-md-2"><label for="detDataInclusao">Inclusão</label><input type="text" class="form-control" id="detDataInclusao" name="detDataInclusao" ></div>' +
                            '<div class="form-group col-md-2"><label for="detFilial">Filial</label><input type="text" class="form-control" id="detFilial" name="detFilial" ></div>' +
                            '<div class="form-group col-md-4"><label for="detNomeFilial">Nome Filial</label><input type="text" class="form-control" id="detNomeFilial" name="detNomeFilial" ></div>' +
                            '<div class="form-group col-md-3"><label for="detValorPedido">Valor Pedido</label><input type="text" class="form-control" id="detValorPedido" name="detValorPedido" ></div>' +
                        '</div>' +
                        '<div class="row" id="divModal03">' +
                            '<div class="form-group col-md-3"><label for="detFornecedor">Fornecedor</label><input type="text" class="form-control" id="detFornecedor" name="detFornecedor" ></div>' +
                            '<div class="form-group col-md-6"><label for="detRazaosocial">Razao Social</label><input type="text" class="form-control" id="detRazaosocial" name="detRazaosocial" ></div>' +
                            '<div class="form-group col-md-3"><label for="detCnpj">CNPJ</label><input type="text" class="form-control" id="detCnpj" name="detCnpj" ></div>' +
                        '</div>' +
                        '<div class="row" id="divModal04">' +
                            '<div class="form-group col-md-2"><label for="detCodAgenda">Agenda</label><input type="text" class="form-control" id="detCodAgenda" name="detCodAgenda" ></div>' +
                            '<div class="form-group col-md-4"><label for="detDescAgenda">Descriçao Agenda</label><input type="text" class="form-control" id="detDescAgenda" name="detDescAgenda" ></div>' +
                            '<div class="form-group col-md-1"><label for="detCfop">CFOP</label><input type="text" class="form-control" id="detCfop" name="detCfop" ></div>' +
                            '<div class="form-group col-md-5"><label for="detFigFiscal">Figura Fiscal</label><input type="text" class="form-control" id="detFigFiscal" name="detFigFiscal" ></div>' +
                        '</div>' +
                        '<div class="row" id="divModal05">' +
                            '<div class="form-group col-md-2"><label for="detCondicaoPgto">Condiçao Pgto</label><input type="text" class="form-control" id="detCondicaoPgto" name="detCondicaoPgto" ></div>' +
                            '<div class="form-group col-md-3"><label for="detDescCondicaoPgto">Descriçao Cond. Pagamento</label><input type="text" class="form-control" id="detDescCondicaoPgto" name="detDescCondicaoPgto" ></div>' +
                            '<div class="form-group col-md-1"><label for="detVigenciaInicio">Vigencia</label><input type="text" class="form-control" id="detVigenciaInicio" name="detVigenciaInicio" ></div>' +
                            '<div class="form-group col-md-1"><label for="detVigenciaFinal">Até</label><input type="text" class="form-control" id="detVigenciaFinal" name="detVigenciaFinal" ></div>' +
                            '<div class="form-group col-md-1"><label for="detCompetencia">Competência</label><input type="text" class="form-control" id="detCompetencia" name="detCompetencia" ></div>' +
                            '<div class="form-group col-md-2"><label for="detCodServico">Codigo Serviço</label><input type="text" class="form-control" id="detCodServico" name="detCodServico" ></div>' +
                            '<div class="form-group col-md-2"><label for="detSituacao">Situação Atual</label><input type="text" class="form-control" id="detSituacao" name="detSituacao" ></div>' +
                        '</div>' +
                    '</div>' +
                '</form>' +
                '</p>',
        id: 'fluig-modal',
        size: 'large',
        actions: [{
            'label': 'sair',
            'bind': 'data-close-modal',
            'autoClose': false
        }]
    }, 
    function() {
        $('#myModal').on('shown.bs.modal', function () {
            alert("Pedido Detalhamento: " + objeto.PEDIDO);    
            $("detSolicitante").val(objeto.SOLICITANTE);
            $("detHierarquia").val(objeto.HIERARQUIA);
            $("detPedido").val(objeto.PEDIDO);
        });
    },
    function(err, data) {
        if(err) {
            // do error handling
        } else {
            // do something with data
        }
    });
compartilhar
  • Faltou o # antes do nome, exemplo: $("#detPedido").val(objeto.PEDIDO);

    Otto Mostaert   22 de May de 2018
  • Verdade Otto, esqueci o #, porém não está entrando na função, porque o Alert não é executado. Já tentei colocar essa função fora do MyModal, já tentei o $(document).on('show.bs.modal', function (ev), porém em nenhum dos casos ele entra na função ou salva as informações no Modal.

    Alessandro Feitosa   22 de May de 2018
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags modal parametros formulario ou faça a sua própria pergunta.