jQuery + Twig load() function

Question:

I'm developing a system using PHP , with the idea of ​​having only one page. Like? (I don't know if it's the best solution, I believe it isn't), 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" eg:

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

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

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

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

As links are clicked, a certain html is loaded. But the html loaded by jQuery load function can't access something that is in the index, for example a twig tag , it's like loading an html independent of the index, and not just including it.

I would like to know if anyone knows a way to solve using the .load() function, considering that it does not accumulate the html files loaded on the same page, or any other way to correctly load these data, without having to do a different page for each functionality of the system.

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

Answer:

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

Below is the code.

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