Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Philippe Luis

Como chamar pagina com Ajax e executar função apos a página ser iniciada?

Recommended Posts

Quero chamar uma pagina via ajax, não dentro de uma div nem nda, mas uma pagina completa, não se isso é possivel e se ajax funciona assim.

E quero que execute uma função apos a página ser totalmente aberta. Tipo um jQuery(function($){...});

 

Se poder dar um exemplo funcional agradeço !!

 

Obg. Boa Noite!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, é possível.

No callback do teu ajax após o .html(), você executa o que você quer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

você vai ter que trocar pelo $.get ou $.ajax, pois o .load não te dá a opção que você precisa. (controle sobre o fluxo do script)

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tava dando uma pesquisa aqui e vi sobre isso mesmo.

Eu consigo pegar resultados do host e tudo mais so que o problema que encalhei nessa parte de chamar a página com ajax. da uma olhadinha no código.

$.ajax({ 
        type: 'POST',
        dataType: 'html',
        url: urll+"procuraPadaria.php",
        data: position,
        success: function(data){ 
            if(data == 0){
                alert('Infelizmente não temos estabelicimento para atendelo(a) no momento.');
            }else{
                lojas = JSON.parse(data);
                $.ajax({
                    // ENCALHEI AQUI
                    url: 'lojas.html',
                    success: function( data ){
					// ENCALHEI AQUI
                }
                });
                
               //$('#princ').load('lojas.html'); 
            }
        }
    });

O codigo é mais ou menos esse, eu queria carregar a página via ajax, mas passando o os elementos da vareavel lojas como elementos da pagina, como você disse em uma função de callbeck.

Irei fazer uma função para criar a página lojas com o que eu quero, mas como carregar essa página com ajax e com a função de callbeck?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não entendi ainda oq você pretende fazer...

 

agora respondendo pelo titulo do post...

 

Citar
Como chamar pagina com Ajax e executar função apos a página ser iniciada?
$(document).ready(function() {
	//Só é ativado após a resposta.
	$( document ).ajaxComplete(function( event, xhr, settings ) {
		if(settings.url == '/url_do_ajax'){
			
		}
	);
});

 

Recomendo fortemente a leitura:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ment0r
      Boa tarde à todos.
      Pessoal, estou com o seguinte problema: preciso imprimir uma ficha mensal de trabalho, mas quando vou imprimir, a página para impressão sai "cortada".
       

       
      A imagem acima representa a ficha que preciso imprimir, está tudo ok com essa (tirei o cabeçalho, pois não vinha ao caso)
       

       
      Vejam como fica na impressão: com aproximadamente 2/3 da largura.
       
      <style> body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ .cliente { margin-top: 30px; font-size: 20px; } th {font-size: 14px; } td {font-size: 12px; } .logo {height: 64px; margin: 20px 0px 0px 20px;} .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;} @page { width: 100%; height: 100%; margin: 0; padding: 0; } @media print { html, body { width: 210mm; height: 297mm; } .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> Código CSS da página.
       
      O que pode ser? Como faço pra deixar a página de impressão igual à página PHP? Obrigado desde já à todos.

      Um abraço.
       
    • Por Sapinn
      Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.
      Meu codigo:
       
      CSS: 
      *{     padding: 0;     margin: 0;     box-sizing: border-box;     font-family: "Rubik",sans-serif; } body{     background-color: #f5f8ff; } .container{     background-color: #ffffff;     width: 60%;     min-width: 450px;     position: relative;     margin:  50px auto;     padding: 50px 20px;     border-radius: 7px;     box-shadow: 0 20px 35px rgba(0,0,0,0.05); } input[type="file"]{     display: none; } label{     display: block;     position: relative;     background-color: #025bee;     color: #ffffff;     font-size: 18px;     text-align: center;     width: 300px;     padding: 18px 0;     margin: auto;     border-radius: 5px;     cursor: pointer; } .container p{     text-align: center;     margin: 20px 0 30px 0; } #images{     width: 80%;     position: relative;     margin: auto;     display: flex;     justify-content: space-evenly;     gap: 20px;     flex-wrap: wrap; } figure{     width: 45%; } img{     width: 100%; } figcaption{     text-align: center;     font-size: 2.4vmin;     margin-top: 0.5vmin; }  
      HTML:
         <div class="container">         <input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>         <label for="file-input">             <i class="fas fa-upload"></i>   Escolha seus arquivos         </label>         <p id="num-of-files">Nenhum arquivo escolhido</p>         <div id="images"></div>     </div>     <div class="container">         <input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>         <label for="file-input">             <i class="fas fa-upload"></i>   Escolha seus arquivos         </label>         <p id="num-of-files">Nenhum arquivo escolhido</p>         <div id="images"></div>     </div>  
      JAVASCRIPT:
      let fileInput = document.getElementById("file-input"); let inputFile = document.querySelectorAll("#file-input"); let imageContainer = document.getElementById("images"); let numOfFiles = document.getElementById("num-of-files"); function preview(input){     imageContainer.innerHTML = "";     numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`;             for(i of fileInput.files){         let reader = new FileReader();         let figure = document.createElement("figure");         let figCap = document.createElement("figcaption");         figCap.innerText = i.name;         figure.appendChild(figCap);         reader.onload=()=>{             let img = document.createElement("img");             if(figCap.innerText.split('.').pop() == 'pdf'){                 img.setAttribute("src","pdf.png");             }else{                 img.setAttribute("src",reader.result);             }             figure.insertBefore(img,figCap);         }         imageContainer.appendChild(figure);         reader.readAsDataURL(i);     } }  
    • Por clovis.sardinha
      Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois. 
      Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
      No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
      a página mostrada é esta:
      <div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este:
      /* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; }  
      Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
      Coisa interessante: tanto faz colocar ../imagens/foto.png  ou imagens/foto.png e funciona no local e não no servidor.
      Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
       
       

       

    • Por stefanyprs
      //modelo.html <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hora do dia</title>     <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()">     <header>         <h1> Hora do dia </h1>         </h1>     </header>     <section>         <div id="msg">             msg         </div>         <div id="foto">             <img class="imagem" src="fotomanha.jpg" alt="foto do dia">         </div>     </section>     <footer>         <p>&copy; Rodapé </p>     </footer>     <script src="script.js"></script> </body> </html>   //script.js function carregar () {     var msg = window.document.getElementById('msg')     var img  = window.document.getElementsByClassName('imagem')      var data = new Date()     var hora = data.getHours()          msg.innerHTML = 'Agora são ' + hora + ' horas'          if (hora >= 0 && hora < 12){         //Bom dia         img.src = 'fotomanha.jpg'         } else if (hora >= 12 && hora < 18){         //Boa tarde         img.src = 'fototarde.jpg'      } else {         //Boa noite         img.src = 'fotonoite.jpg'     } }   //estilo.css body{     background-color: aqua;     font: normal 15pt Arial; } header{     color:rgb(255, 255, 255);     text-align: center; } section{     background: white;     border-radius: 10px;     padding: 15px;     width: 500px;     margin:auto;     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);      } footer{     color:white;     text-align: center;     font-style: italic;   } div{     text-align: center; } .imagem{     width: 500px;    /* largura da imagem */     height: 350px;   /*  altura da imagem  */     margin-top: 10px; /* margem do topo */ }
    • Por Wanderson Moreira
      Opa, blz?
      Alguém me da um help?
       
      Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas.
       
      No html as fotos saem com a orientação normal(em pé) conforme foi inserida
       
      alguém sabe o que pode ser?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.