Jump to content
AlexandrePrezzi

Abrir modal que está em outro arquivo

Recommended Posts

Seguinte:

 

Em um arquivo  teste.php  tem  um monte de coisas e  também tem um modal la pelo meio.

<div class="modal fade" id="myModalDadosBasicos" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_DadosBasicos" aria-hidden="true" data-backdrop="static">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel_DadosBasicos"></h4>
                        </div>
                        <div class="modal-body">
                          ....

Em outro arquivo  "principal.php"   criei um botão.

 

Gostaria de saber como posso far para quando eu clicar nesse botao,  abrir o modal que esta no outro arquivo.

 

Codigo do botão

<button type="button" title="Abre Modal" class="btn btn-xs btn-success tp btnAbreModal">Transformar em Pedido Novo</button>

O que eu tentei fazer baseado em dicas de outros:

 

$('.btnAbreModal').on('click', function(e){
                     $.ajax({
                        type: 'POST',
                        //Caminho do arquivo do seu modal
                        url: 'teste.php',
                        success: function(data){              
                          alert(data);  
                          $('#myModalDadosBasicos').modal('show');
                     }
                     });    
                });

A questão é .... como defino que o que eu quero abrir na minha  página  seja somente o modal "myModalDadosBasicos".

Share this post


Link to post
Share on other sites

Fiz um teste colocando somente o modal no arquivo .... e mesmo assim nao funcionou... 

 

A tela fica cinza (como se fosse abrir o modal) ... mas o modal nao abre.

 

Fiz um "alert(data)"  e no alert aparece o código do "modal" .....

 

Sabe me dizer o q pode acontecer ?

Share this post


Link to post
Share on other sites

você se refere a este trecho?

$('.btnAbreModal').on('click', function(e){
                     $.ajax({
                        type: 'POST',
                        //Caminho do arquivo do seu modal
                        url: 'teste.php',
                        success: function(data){              
                          alert(data);  
                          $('#myModalDadosBasicos').modal('show');
                     }
                     });    
                });

Neste alerta aparece o conteúdo do modal? Caso sim, você precisa dar um append, dentro do success.

alert(data); 

$('body').append(data); // você pode substituir o body pela div onde o conteúdo deve ser carregado.

$('#myModalDadosBasicos').modal('show');

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera já verifiquei vários páginas do google mas não encontrei o que precisava. Temos um sistema a qual no final temos a opção d imprimir os dados. que até aí está perfeito utilizo bootstrap para o layout e está ok. Porém preciso colocar a opção de pdf também aí não sai de jeito nenhum com o bootstrap. preciso gerar algo neste formato.
       

       
      Se alguem puder me dar um norte referente a isso agradeço demais.
    • By violin101
      Caros amigos
       
      saudações...
       
      Sou um pouco novato em JAVASCRIPT, gostaria de tirar uma dúvida com os amigos.
       
      Tenho uma Tabela onde o usuário escolhe o Produto e através de um botão agregar, o sistema cria a Tabela. ATÉ AQUI TUDO BEM.
       
      Minha dúvida:
      como consigo verificar se o Código de algum produto já foi incluído ?
      caso foi, o sistema avisa que já foi informado o código anteriormente.
       
      Código em Javascript
      //Status dos Botões LIMPAR | AGREGAR | ADICIONAR - iniciar como desabilitado. document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; document.getElementById("adicionar").disabled = true; /*---Função para Capturar o Produto selecionado---*/ $(document).on("click",".btn-prod",function(){ prd = $(this).val(); infoprd = prd.split("*"); $("#idProdutos").val(infoprd[0]); $("#cod_interno").val(infoprd[1]); $("#descricao").val(infoprd[2]); $("#prd_unid").val(infoprd[3]); $("#vlr_unit").val(infoprd[4]); $("#qtd_prod").val(infoprd[5]); $("#vlr_total").val(infoprd[6]); $("#modal_prod").modal("hide"); //Função para Atualizar o Status do Botão statusLimparAgregar() }); //Nessa parte do AGREGAR gostaria de veririfcar //se houve ou não duplicidade de código do produto //informado $("#btn-agregar").on("click",function(){ //Monta a Tabela dos Produtos a serem Devolvidos html = "<tr>"; html += "<td width='10%' height='10'><input type='hidden' name='id_prds[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td width='32%' height='10'><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='esp[]' value='"+infoprd[3]+"'>"+infoprd[3]+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'><input type='hidden' name='qtd_prod[]' value='"+infoprd[5]+"'>"+infoprd[5]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_unit[]' value='"+infoprd[4]+"'>"+infoprd[4]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_total[]' value='"+infoprd[6]+"'>"+infoprd[6]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#prd_unid").val(null); $("#vlr_unit").val(null); $("#qtd_prod").val(null); $("#vlr_total").val(null); //Desabilita Buttons document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; });  
      Grato,
       
      Cesar
    • By manigold
      Estou com um pequeno problema nessa parte:
      $monsters = simplexml_load_file($otdir . '/data/monster/monsters.xml') or die('<b>Could not load monsters!</b>'); foreach($monsters->monster as $monster) { $loot = simplexml_load_file($otdir . '/data/monster/' . $monster['file']); if($loot) { if($item = $loot->loot->item){ A pagina mostra a lista de items corretamente mas se eu tenho um item dentro de outro item ,como nesse exemplo:
      <loot> <item id="2148" countmax="100" chance="33750" /> <item id="2148" countmax="100" chance="33750" /> <item id="2672" countmax="5" chance="80000" /> <item id="7399" chance="80" /> <item id="2392" chance="1428" /> <item id="2033" chance="3190" /> <item id="2547" countmax="7" chance="6700" /> <item id="5948" chance="3040" /> <item id="1987" chance="100000"> <!-- bag --> O PROBLEMA É NESSA PARTE <item id="5882" chance="5920" /> <item id="2498" chance="888" /> <item id="7378" countmax="3" chance="8800" /> <item id="2146" chance="5300" /> <item id="2414" chance="1500"/> <item id="2528" chance="2333" /> <item id="7402" chance="2000" /> <item id="2492" chance="730" /> </item> </loot> Os items dentro do item com id 1987 não são mostrados .
      Me desculpem se a explicação não esta muito boa , não entendo nada de php e xml ,eu agradeço se alguem puder me ajudar.
    • By gersonab
      Bom dia.
      utilizava um código para completar o endereço conforme o cep, funcionando perfeitamente, só que preciso pegar o cep caso não tenha, pelo endereço digitado, pesquisando pela internet encontrei o código abaixo, funciona perfeitamente para os dois casos, só que .... no meu formulário tenho dois campos de endereço, um residencial e outro de trabalho, o código que utilizava antes funcionava para os dois campos, erá só mudar o id do campo do formulário, tipo se eu tinha id="logadouro" em um campo no outro id="logadouro1", só que .... no código atualizado para ambas as pesquisas esta forma não funciona, gostaria da ajuda de vocês para este problema.
      código antigo:
      function limpa_formulário_cep() { $("#logradouro").val(""); $("#bairro").val(""); $("#localidade").val(""); $("#uf").val(""); } $("#cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#logradouro").val("..."); $("#bairro").val("..."); $("#localidade").val("..."); $("#uf").val("..."); $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#logradouro").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#localidade").val(dados.localidade); $("#uf").val(dados.uf); } else { limpa_formulário_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulário_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulário_cep(); } }); como podem ver era só duplicar e mudar o id, agora neste ja não consigo
      var inputsCEP = $('#logradouro, #bairro, #localidade, #uf'); var inputsRUA = $('#cep, #bairro'); var validacep = /^[0-9]{8}$/; function limpa_formulário_cep(alerta) { if (alerta !== undefined) { alert(alerta); } inputsCEP.val(''); } function get(url) { $.get(url, function(data) { if (!("erro" in data)) { if (Object.prototype.toString.call(data) === '[object Array]') { var data = data[0]; } $.each(data, function(nome, info) { $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info); }); } else { limpa_formulário_cep("CEP não encontrado."); } }); } // Digitando RUA/CIDADE/UF $('#logradouro, #localidade, #uf').on('blur', function(e) { if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) { inputsRUA.val('...'); get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/'); } }); // Digitando CEP $('#cep').on('blur', function(e) { var cep = $('#cep').val().replace(/\D/g, ''); if (cep !== "" && validacep.test(cep)) { inputsCEP.val('...'); get('https://viacep.com.br/ws/' + cep + '/json/'); } else { limpa_formulário_cep(cep == "" ? undefined : "Formato de CEP inválido."); } }); desde já agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.