3

Estou desenvolvendo um sistema utilizando PHP, com a idéia de possuir apenas uma página. Como? (Não sei se é a melhor solução, acredito que não seja), desenvolvi um menu lateral que é fixo e os conteúdos a serem alterados ficariam no centro da página, o menu lateral contem alguns "links" ex:

<li class="treeview">
   <a id="menuPerfil">
     <i class="fa fa-user"></i>
   <span>Perfil</span>
    </a>
</li>

Ao clicar nesse "link", carrego um arquivo html que contem um formulário simples de acordo com o link do menu clicado.

Fiz um script jQuery utilizando a função load():

$("#menuPerfil").click(function () { 
   $('#principalContent').load("formPerfil.html.twig");
});

Conforme os links são clicados, é carregado um determinado html. Porém o html carregado pela função load do jQuery não consegue acessar algo que está no index, por exemplo uma tag do twig, é como se carregasse um html independente da index, e não apenas o incluísse.

Gostaria de saber se alguem conhece um modo de resolver utilizando a função .load(), tendo em vista que ela não acumula os arquivos html carregados na mesma página, ou alguma outra forma de fazer corretamente o carregamento desses dados, sem ter que fazer uma página diferente para cada funcionalidade do sistema.

OBS: utilizo PHP, twig e jQuery no projeto.

2 Respostas 2

1

Para recuperar apenas uma div de um conteúdo você pode usar o AJAX para solicitar um determinado conteúdo, depois recupere apenas a info que deseja usando o id!

Segue abaixo o código.

$("body").on('click', '#menuPerfil', function () { 

   $.ajax({
     url : "arquivo_com_conteudo_que_quer_pegar.html",
     success : function (retorno) {
           var conteudo =  $('<div>' + retorno + '</div>').find('#ID_DO_CONTEUDO').html();

           $('#principalContent').html(conteudo);
     },
     erro : function (a,b,c) {
           alert('Erro: '+a['status'] + ' ' + c);
     }
   });

   return false;
});
2
  • Hiago, tentei usar o que sugeriu e não funcionou pra mim, além de que ele insere o código no html toda vez que eu clico em um menu (possível visualizar no F12 do Chrome). Agradeço pela ajuda Commented 27/10/2015 às 23:33
  • ah, ele está recarregando a página? é um link né... faltou um return false na função .click o id #menuPerfil já esta no seu DOM ou é adicionado via javascript? Vou editar a resposta para que possa fazer mas um teste. Commented 28/10/2015 às 11:19
0

Não é verdade esse caso que você citou.

Conforme os links são clicados, é carregado um determinado html. Porém o html carregado pela função load do jQuery não consegue acessar algo que está no index

Ao usar .load() e carregar um arquivo HTML e nesse HTML conter códigos javascript tal qual este pode sim acessar qualquer tag do seu codigo. irei demonstrar com um exemplo.

Arquivo index.php

    <html>
<head>        
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
    <style type="text/css"> 
        #menu{ background: red; width: 100px; height: 400px; float: left; }
        #corpo{ background: green; width: 400px; height: 400px; float: left; }        
    </style> 
</head>
<body>        
    <div id='menu'>
        <button id="botao">Me clica</button>
    </div>
    <div id='corpo'></div>    
</body>
    <script>
        $('#botao').click(function(){ $('#corpo').load('teste02.php'); });
    </script>
</html>

Arquivo teste02.php

    <div>
    Ola mundo!<br>
</div>
<script>        
    $('#corpo').css('background','white').text('mudei a cor');
    $('#menu').css('background','blue');
</script>
1
  • SneepS NinjA, obrigado pela ajuda. Faço um render do twig em um arquivo index.php da página index.html.twig, nesse index.php, passo um array contendo o perfil de usuário autenticado, com a chave 'perfilUsuario'. Se eu for na index, e colocar uma tag do twig : {{perfilUsuario.nome}}, é exibido o nome que está no array passado para o twig, porém se tento usar {{perfilUsuario.nome}} nesse form que carreguei com o .load(), o mesmo é exibido como um texto comum. E se eu der apenas um include no lugar do .load(), consigo exibir as tags do twig normalmente. Commented 28/10/2015 às 12:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .