Load a tab into a div

Asked

Viewed 48,118 times

9

I am developing an HTML page for mobile and I have the following question: is it possible to 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 code above I am first loading my list of page options, which so far is just an example.

It has a CSS and a JS behind it, which makes this list load 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: the user clicks on the element home from my list, it must load the page home.html down, in a div.

I took a look but I’m not sure if this is done with Ajax, right? I’m a little lost and since I don’t know much of Ajax, I decided to see if someone here gives me a light.

html5 ajax

  • It wouldn’t be simpler (and faster) to put all the contents of these pages inside the divs and simply change them with jQuery or Javascript? Something like code of this answer Soen (as the fiddle link of this reply was not working, I created one with the code posted: http://jsfiddle.net/gustavox/tcrkcbt8/)

  • Here is another example: http://jsfiddle.net/TLBvx/1/

  • can even be faster put as I increase the page will become a big mess. So I wanted to keep things separate. And I’m already having a hard time with six separate pages

2 answers

5


You can use the ajax post/get, put the URL of your action/page, its parameters if applicable and set the Success Function of the method, in case it takes what was returned and plays inside the div

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

  • I’m answering this by cell phone, so I’m sorry for the bad formatting

  • Valeu brother. I didn’t understand it very well or I don’t know as much as kk but I followed this tip [http://tedk.com.br/blog/html/loada-pagina-dentro-de-umadiv-com-ajax/] but it didn’t work because I had the error: Xmlhttprequest cannot load <my html file>. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https, Chrome-Extension-Resource.

  • the solution found from the link worked, I believe there was some problem in the first navigated

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>

  • I had the following error: Xmlhttprequest cannot load <my page>. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https, Chrome-Extension-Resource.

  • @user24203 merges http protocol with https ?

  • if you have the link in http, your page has to fetch an http, if you are in https you have to search https, you cannot merge

  • Thank you very much guy! you showed what I’ve been looking for for a long time... a code that works without using php! because I am optimizing my servers and the minimum of requests I make, better for my performance! I even made a code a bit similar following the same logic but presented some flaws.. Anyway... Gratefully! Hug!

Browser other questions tagged html5 ajax

You are not signed in. Login or sign up in order to post.