Jump to content
MarKteus

Como carregar uma página externa dentro da div de outra página

Recommended Posts

Estou tentando carregar uma pagina simples só pra teste dentro de uma div em outra pagina, assim:

 

           $('.botaoCarregar').click(function () {
               $('#divContainer').load("pageTeste.html");
          });

 

Mas nada acontece, alias acontece erro 404 not found (mas a pagina está la)
Estou usando nodejs para subir o server e testando em localhost

Alguém sabe o que pode ser ?

Share this post


Link to post
Share on other sites

o teu node não deve estar servindo esse html.

como ele está?

Share this post


Link to post
Share on other sites

Está assim:
MenusFiltros.html está funcionando perfeitamente e sendo aberto no browser, ele contem o botão para ser clicado e exibir a page PassosOperacionais.html (representado pelo pageTeste.html do post anterior).
Mandei o print para você ver que os dois arquivos se encontram na mesma pasta.

e já tentei como  no post anterior e das maneiras a seguir também
 $('#divContainer').load("./views/pageTeste.html")

 $('#divContainer').load("/views/pageTeste.html")
 $('#divContainer').load("http://localhost:5000/views/pageTeste.html")  

 

MenuFilt.png

Share this post


Link to post
Share on other sites

você consegue acessar pelo browser:

http://localhost:5000/pageTeste.html

 

?

 

caso continue com problemas, poste o código do NodeJS.

Share this post


Link to post
Share on other sites

Não consegui acessar pelo browser print 1

Só conseguir acessar pelo comando View in Browser do VsCode print 2
 

1.png

2.png

Share this post


Link to post
Share on other sites

não.. sem a pasta views, só:

 

:5000/pageTeste.html

Share this post


Link to post
Share on other sites

você tem um middleware de estáticos?

 

então poste o projeto NodeJS para vermos o que está faltando.

 

Share this post


Link to post
Share on other sites

Segue rar do projeto

Na linha abaixo (869) deveria ser carregado o conteudo da pagina PassosOperacionais.html após clique no botão via javascript

anexo a classe botaoPassoOperacionais linha 774

   

        <div id="sctPassosOperacionais"></div>
  
 

nodeProject.rar

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 Jefferson andre
      Saudações mestres,
       
      Como faço para ajustar o programa abaixo para calcular a diferença entre duas variaveis que armazenam horario no ajax quando ocorre um evento onblur?
       
      O programa funciona com numeros mas nao com tempo, depois que eu pegar a diferenca entre os horarios quero multiplicar por uma terceira variavel.
       
      <html> <body> <script> function calcular() { var num1 = Number(document.getElementById("hora_saida").value); var num2 = Number(document.getElementById("hora_entrega").value); var elemResult = document.getElementById("resultado"); if (elemResult.textContent === undefined) { elemResult.textContent = "O resultado eh " + String(num1 + num2) + "."; } else { // IE elemResult.innerText = "O resultado eh " + String(num1 + num2) + "."; } } </script> <label>Horario de saida</label> <input type ="time" name="hora_saida" id="hora_saida"onblur="calcular();"> <label>Horario da entrega</label> <input type ="time" name="hora_entrega" id="hora_entrega"onblur="calcular();"> <div id="resultado"></div> <span id="resultado"></span> </body> </html>  
    • By ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By Gniusplay
      Olá pessoal, eu tenho um sistema de comentários que quando um "player" preenche esse comentário, ele vai direto para pagina inicial, funciona como um feedback, só que ele pode usar isso várias e várias vezes, eu queria que ele usasse apenas uma vez e não pudesse mais utilizar, sendo assim só seria possível usar uma vez.
      Ou q só poderia usar se tivesse x quantidades de pontos no banco de dados(eu tenho uma coluna com pontos) e a cada vez que ele usasse esse formulário(comentário), ele perderia 1 ponto,e  quando não tivesse mais pontos, ele não poderia comentar.
      Alguém tem alguma ideia de como posso fazer isso? e qual funções utilizar?
      VALEUU!!!
    • By tii3030
      Olá pessoal, desenvolvi um pequeno código em PHP com a função de verificar e validar usuário e senha de um formulário, juntamente com o meu banco de dados MySql.
      Gostaria de saber como aprimorar o meu código para torna-lo mais seguro e mais próximo de algo "profissional". Lembrando que minha senha no banco está criptografada (PASSWORD_BCRYPT).
       
      <?php
          #----------------- INCLUDING FILE --> "conf.php"
          include('conf.php');
              if (isset($_POST['submit'])) {
             
      #--------------------------------INPUTS ---------------------------------------------#
                  $email = mysqli_real_escape_string($conexao, $_POST['email']);
                  $password = mysqli_real_escape_string($conexao, $_POST['password']);
      #-----------------------#----------------------#-----------------_#-------------------#
                  $query_select_email = "SELECT email FROM usuarios WHERE email = '$email'";
                  $select_email = mysqli_query($conexao,$query_select_email);
                  $query_select_password = "SELECT password FROM usuarios";
                  $select_password = mysqli_query($conexao,$query_select_password);
                  while($array = mysqli_fetch_array($select_password)) {
                  $logarray = $array['password'];
                  
                      if (password_verify($password, $logarray)) {
                          if (mysqli_num_rows($select_email) == 1) {
                              
                          $_SESSION['email'] = $email;
                          header('location: XXX.html');
                          exit();
                          }
                      }
                      else {
                          echo "Loguin ou senha incorretos";
                      }
                  $logarray = '0';
                  }
              }
      ?>
    • By michelmir
      Olá!
       
      Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.
       
      Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:
       
       
       
      Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.
       
      Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:
       

       
      Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:
       
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html>  
      No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :
       
      $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); });  
      Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:
       
      <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 
       
      Como posso proceder? Desde já agradeço a atenção de todos.
×

Important Information

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