Function load () jQuery + Twig

Question

Function load () jQuery + Twig

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I'm developing a system using PHP , with the idea of having only one page. As? (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:

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

When I click on this link, I load a html file that contains a simple form according to the clicked menu link.

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

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

As links are clicked, a given html is loaded. However,% wc% loaded by the html load function can not access something that is in the index, for example a jQuery of tag , it's like loading twig independent of index, not just including it .

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

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

html jquery twig

asked by anonymous 27.10.2015 / 22:33

2 answers

Check if array is associative in a class Security when sending and retrieving data from a URL

score 1 · Answer 1

To retrieve only one div from a content you can use AJAX to request certain content, then retrieve only the info you want using 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;
});

score 0 · Answer 2

It's not true that case you quoted.

As links are clicked, a given html is loaded. However the jQuery loaded function can not access something that is in the index

When using .load () and load an HTML file and in that HTML contain javascript codes such as this can access any tag of your code. I'll 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><styletype="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 test02.php

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