Function load() jQuery + Twig

Question

Function load() jQuery + Twig

Asked 9 years ago

Viewed 517 times

3

I’m developing a system using PHP, with the idea of owning only one page. How? (I do not know if it is the best solution, I believe it is not) , I developed a side menu that is fixed and the contents to be changed would be in the center of the page, the side menu contains some "links"ex:

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

By clicking on this "link", I upload a file html which contains a simple form according to the clicked menu link.

I made a script jQuery using the function load():

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

As links are clicked, a certain link is loaded html. But the html loaded by the load function jQuery cannot access something that is on the index, for example a tag of twig, It’s like carrying a html independent of the index, and not only include it.

I wonder if anyone knows a way to solve using the function .load(), bearing in mind that it does not accumulate the files html loaded on the same page, or some other way to properly load this data, without having to make a different page for each system functionality.

NOTE: I use PHP, twig and jQuery in the project.

2 answers

Browser other questions tagged jquery html twig

You are not signed in. Login or sign up in order to post.

by Hiago Souza • **5,837** points · Answer 1 · 2015-10-27T22:42:24+00:00

To recover only a div of a content you can use AJAX to request a certain content, then recover only the info you want using the id!

Follow the code below.

$("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;
});

by SneepS NinjA • **7,691** points · Answer 2 · 2015-10-28T10:36:40+00:00

It’s not true this case you cited.

As links are clicked, a certain html is loaded. However, the html loaded by the jQuery load function cannot access something that is in the index

When using .load() and upload an HTML file and in that HTML contain javascript codes such as this can yes access any tag of your code. I will demonstrate with an example.

index.php file

    <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>

File teste02.php

    <div>
    Ola mundo!<br>
</div>
<script>        
    $('#corpo').css('background','white').text('mudei a cor');
    $('#menu').css('background','blue');
</script>