Load some PHP link within a specific div in HTML page?

Question

I made a side menu with these links:

<div id="menu_lat">
    <a href="http://localhost:8080/sgf/form_proposta.php">Orçamentos</a>
    <a href="relatorios.html">Relatórios</a>
    <a href="proximos.html">Próximos Eventos</a>
    <a href="chat.html">Chat</a>
</div>

When I open one of these, the content is opened in another div (which, in the first page, already has some content, which is an image):

<div id="conteudo">
    <img src="img/foto_inicial.jpg">
</div>

How could I load the PHP file inside this layer when I click that link?

You can do a 'frame' setup, but I don't recommend that. You can also assign a javascript function to run and change the html contents of the conteudo div to the html returned from that page. Don't have time to do the code for you atm, but those are my ideas. — JClaspill, May 30 '13 at 15:46
You won't be able to include any PHP directive(s) in your `.html` files, unless you use `AddHandler application/x-httpd-php .html .htm` in your `.htaccess` file. You could use an iframe, but that could complicate things. It will be far more easier, if you changed your entire file structure to `.php`. Using JS is ok, but what will you do if the user disables JS? Then you're up `that creek`. ;-) — Funk Forty Niner, May 30 '13 at 16:02

fullybaked · Accepted Answer · 2013-05-30T16:08:48.163

4

Use jQuery and the load() function

Update you links with a class

<div id="menu_lat">
    <a class="loader" href="http://localhost:8080/sgf/form_proposta.php">Orçamentos</a>
    <a class="loader" href="relatorios.html">Relatórios</a>
    <a class="loader" href="proximos.html">Próximos Eventos</a>
    <a class="loader" href="chat.html">Chat</a>
</div>

Then in your <script> tags add this to handle the click event on your links with the class loader.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.loader').click(function(event) {
        event.preventDefault(); // stop the link loading the URL in href
        $('#conteudo').load($(this).attr('href'));
    }); 
});
</script>

edited May 30 '13 at 16:08

answered May 30 '13 at 15:50

fullybaked

4,117
1
24
37

I just add that to my script tags and I'm able to use jQuery in my page? I didn't study it yet, neither Ajax. :/ – Rasshu May 30 '13 at 16:00
Link is loading the URL in the entire page – Rasshu May 30 '13 at 16:02
1

You will also need to include the jQuery library itself, see updated answer – fullybaked May 30 '13 at 16:07
Had to include jQuery locally, but now nothing is happening when I click the link. – Rasshu May 30 '13 at 18:15
Oops, I guess nothing was happening because the folder was outside htdocs. Now it's working perfectly. :D Many thanks, sir! – Rasshu May 30 '13 at 18:24

score 1 · Answer 2 · answered May 30 '13 at 15:46

1

DO the Ajax call on the DIV id conteudo

answered May 30 '13 at 15:46

vanurag

297
2
19

Load some PHP link within a specific div in HTML page?

2 Answers2