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 vcapelli
      Eu sei o que eu vou pedir é meio loucura mas espero que ao menos seja possível. É o seguinte: eu quero fixar um valor X e sempre depois das 18 horas esse valor atualizasse aumentando ou diminuindo de acordo com a bolsa de valores. Exemplo:
      Orçamento 100bi, hoje a bolsa fechou em queda de 2,73% então ela atualizaria para 97,27bi.
      Eu sei que é loucura mas se for possível realizar agradeceria imensamente, não precisam ter pressa também
    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digimons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="CSS/Style.css"> </head> <body class="container"><!-- INICIO DA NOTÍCIA --> <div> <center> <h1><a href=''>Noobmon - Portal de informações de digimons</a></h1> </center> <div class='place'> <center><h4>Gigadramon(ギガドラモン)</h4></center> <img src='IMG/IMG1.jpg' alt="Titulo da foto aqui"> <p> Gigadramon is an Android Digimon. It is a dark dragon Digimon that was developed at the same time as Megadramon. As a combat dragon that was armed to the teeth by further remodeling, its existence is the epitome of a fiendish computer virus. Its arms are equipped with the "Giga Hands". </p> <p> Gigadramon is a purple dragon with purple hair and yellow eyes. It has robotic wings and two arms, and wears a black helmet and black gauntlets on its arms. <a href='noticia.html'>Ler Mais.</a> </p> </div> </div><!-- FIM DA NOTÍCIA --> <div class='sidenote'><!-- INICIO DO MENU LATERAL --> <form class="form-inline my-2 my-lg-0"><!-- BOTÃO PESQUISA --> <input class="form-control mr-sm-2" type="search" placeholder="Digite Aqui" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button> </form><!-- FIM DO BOTÃO PESQUISA --> <hr> <ol> <li>Noticia 01</li> <li>Noticia 02</li> <li>Noticia 03</li> <li>Noticia 04</li> <li>Noticia 05</li> </ol> </div><!-- FINAL DO MENU LATERAL --> <div class="alert alert-dark tamanho"><!-- BOTÕES DAS NOTÍCIAS --> <center><form> <input type="button" value="Voltar" onClick="history.go(-1)"> <input type="button" value="Atualizar" onClick="history.go(0)"> <input type="button" value="Avançar" onCLick="history.forward()"> </form></center><!-- FIM DO BOTÃO DAS NOTÍCIAS --> </div> <div class='footer clear'><!-- FOOTER --> <p>Footer é aqui"</p> </div> </body> </html> CSS:
      body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .container { margin: 0 auto; } .place h4 { border-bottom: 1px dashed #7E9F19; margin: 0; } body { background: #FFF1D6 url(images/noise.png); font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .place { margin-right: 35%; background-color: #FFF; border: 1px solid #CCC; border-color: #CCC #999 #999 #CCC; margin-bottom: 20px; padding: 10px; } .tamanho { margin-right: 35%; margin-bottom: 20px; padding: 10px; } .place a { color: #2C88A7; font-weight: bold; } h1 a { color: #7E9F19; text-decoration: none; } /*h1 a:hover { background-color: #7E9F19; color: #FFF; }*/ .place img { border: 1px solid #7E9F19; float: left; margin: 10px 10px 0 0; padding: 2px; } .clear { clear: both; } .footer { font-size: 12px; text-align: center; } .sidenote h3 { font-size: 14px; margin-top: 0; } .sidenote ol { font-size: 12px; } .menulateral { float: right; width: 660px; } .sidenote { float: right; width: 30%; background-color: #FFFBE4; border: 1px solid #C9BC8F; padding: 10px; width: 345px; } #btn-noticia { float: right; padding-bottom: 0%; } #newn { padding-bottom: 2px; } Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

    • By adriano.eurich
      Tem como recuperar os dados do banco que foram incluídos através do create, e retornar para a mesmo formulário?
      Quando eu inserir o numero da chave e clicar em pesquisar ele traz o resultado do banco referente aquela chave se ela estiver com a situação 1 que é emprestado ai habilitaria os botões editar e deletar, onde o deletar apenas alterava o situação de 1 para 2 .
      Não consigo fazer essa parte de busca no banco e retornar no mesmo formulário, se é que é possível!
       
      cadastro.php
       
      <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 1px;"> <legend><!--<img src="imagens/CadCli.png" alt="[imagem]" style="width:40x; height:40px">--></legend> <br> <?php if (isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Chave --> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input type="text" name="chave" id="chave" maxlength="4" required> <label for="chave">Chave</label> </div> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Instituição --> <div class="input-field col s12"> <i class="material-icons prefix">account_balance</i> <input type="text" name="inst" id="inst" maxlength="40" required autofocus> <label for="inst">Instituição</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:108px; height:35px" value="cadastrar" class="btn green"> <input type="submit"style="width:108px; height:35px" value="Pesquisar" class="btn blue"> <input type="submit"style="width:108px; height:35px" value="Editar" class="btn orange"> <input type="submit"style="width:108px; height:35px" value="Devolver" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/footer.inc.php'; ?> <?php include_once 'includes/script.inc.php'; ?>  
      create.php
       
      <?php session_start(); include_once 'conexao.php'; $id = $_POST ['id']; $nome = $_POST ['nome']; $inst = $_POST ['inst']; $data = date('y-m-d'); $telefone = $_POST ['telefone']; $chave = $_POST ['chave']; $situacao = $_POST ['situacao']; $queryInsert = $link->query("insert into tb_cadastro VALUES ('" . $id . "', '" . $nome . "','" . $inst . "','" . $data . "','" . $telefone . "','" . $chave . "','1')"); $affected_rows = mysqli_affected_rows($link); if ($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>" . 'Cadastrado com Sucesso!' . "<br>"; header("Location: ../cadastro.php"); endif;  
       
       
       
       

    • By frlopes
      Boa tarde, pessoal... 
       
      Tenho o código abaixo e gostaria de saber como faço para alinhar o botão e o título "Login do Sistema" da mesma forma que estão alinhados os inputs...
      Tentei colocar style="align-items:center" em tudo, rsrsrs e não alinhou.
      Se alguém puder me ajudar, agradeço.
       
      <div class="container"> <div class="form-login"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">Login do Sistema</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="result" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } }) @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" }) </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> @Html.EditorFor(model => model.SENHA, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } }) @Html.ValidationMessageFor(model => model.SENHA, "", new { @class = "text-danger" }) </div> <div style="margin-top:10px; align-items:center" class="form-group"> <div class="col-sm-12 controls" style="align-items:center"> <input type="submit" value="Acessar" style="align-items:center" class="btn primary btn-lg" /> </div> </div> </div> </div> </div> </div>  
      Resultado abaixo:
       

       
       
       
       
       
       
×

Important Information

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