Upload a page inside a div

Navigation
10

I'm developing an HTML page for mobile and I have the following question: can you load one page inside another?

For example:

pagina.html : 

        <div class="container22">

        <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
        </div>

        <div class="list bar bar-header">
          <a class="button button-icon icon-right ion-close" onclick="exitFromApp();"></a>
           <h1 class="title">Lwart</h1>

            <a class="button button-icon icon-right ion-gear-b" href="#" data-toggle=".container22" id="sidebar-toggle"></a>
        </div>

In the above code I'm first loading my list of page options, which so far is just an example.

It has a CSS and a JS behind it, which causes this list to be loaded as a side menu. However, I believe that this is not the case, but rather that after that I want to add the loading of external pages.

For example: when the user clicks on the home element of my list, he should load the page home.html below, into a div.

I took a look but I'm not sure if this is done with Ajax, right? I'm kind of lost and as I do not know much about Ajax, I've decided to see if anyone here gives me a light.

    
asked by anonymous 23.07.2015 / 01:56

2 answers

5

You can use the post / get of ajax, put the URL of your action / page, its parameters if applicable and define the success function of the method, in case it takes what was returned and plays into the div 

$.post('home.html', function (html) {
    //Essa é a função success
    //O parâmetro é o retorno da requisição 
    $('#idSuaDiv').html(html);
});
    
23.07.2015 / 02:27
5

Making use of jQuery would look like this: 

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <script type="text/javascript" src="js/js_1.9/jquery-1.8.2.js"></script>  
    <script type="text/javascript" src="js/js_1.9/jquery-ui-1.9.1.custom.min.js"></script>  

    <style type="text/css"> #conteudo { width: 400px; height: 300px;} </style> 
</head>
<body>    
     <div id="sidebar">
        <ul>
            <li><a onclick="carregar('home.html')" href="#">Home</a></li>
            <li><a onclick="carregar('explore.html')" href="#">Explore</a></li>
            <li><a onclick="carregar('users.html')" href="#">Users</a></li>
            <li><a onclick="carregar('signOut.html')" href="#">Sign Out</a></li>
        </ul>
    </div>
    <div id="conteudo"></div>
</body>
<script>
    function carregar(pagina){
        $("#conteudo").load(pagina);
    }
</script>
</html>
    
23.07.2015 / 12:56
What is the difference between setInterval / setTimeout and Web Workers? comparison of floats