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?

Answer 1

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>

Answer 2

DO the Ajax call on the DIV id conteudo