Use include with Jquery Mobile?

Question

Use include with Jquery Mobile?

Asked 9 years, 5 months ago

Viewed 329 times

0

I would like to make a page as it is done with Razor MVC (_Layout) with header, and footer, and make inclusion of it in the other pages, as I could do this?

I want to do the AJAX Load Content Look at the example I made:

_Layout.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Treinamento</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.3.0.min.js"></script> 
	<script src="js/controle.paginas.js"></script> 
 
    <script>
        //exemplo do marcos vinicius
        $(function () {
            $("conteudo").load("pagina_teste.html");
        });
 
    </script>
 
 
</head>
 
<body>
 <!--inicio da página de cardápio--> 
    <div id="cardapio" data-role="page">
 
         <!--cabeçalho-->
		<div data-role="header" data-theme="e" data-position="fixed" data-id="vs.header">
            <h1>Cardápio</h1>
            <a href="#home" data-transition="fade" data-icon="back" data-iconpos="notext" >Home</a>
		</div>
        <!--cabecalho-->
 
 
        <!--conteúdo-->
        <div data-role="content" id="conteudo">
            <P>adicionar o conteúdo de todas as páginas externas  </P>
        </div>
        <!--conteúdo-->
 
       
 
        <div data-role="footer" data-position="fixed" data-theme="e" data-id="vs.footer">
           <div data-role="navbar">
                <ul id="nav">
                      <li><a href="pagina_teste.html" data-icon="home">Página de Teste</a></li>
               </ul>
           </div> <!--fim do navbar-->
        </div> <!--fim do footer-->
 
    </div> <!--fim da página-->  
 
</body>
 
 
</html>

pagina_teste.html
<p>esté é o conteúdo da página</p>

control.paginas.js

$(document).ready(function () {
    $('#conteudo').load('conteudo/pagina_teste.html');
 
    $('ul#nav li a').click(function () {
        var page = $(this).attr('href');
        $('#conteudo').load('conteudo/' + page + '.html');
        return false;
    });
 
});

From what I understand, you want to customize one Layout for web and another for mobile, that’s it?

– Leonel Sanches da Silva

2015/06/03 at 21:13
You included the tag Asp.net-mvc. Are you using this framework? If so, why not use Razor then?

– Marcus Vinicius

2015/06/03 at 21:24
I am using only pure Jquery, I am wanting to do an AJAX Load Content, I changed the content of my question, see if can help me. thanks

– Harry

2015/06/04 at 00:06

1 answer

Browser other questions tagged javascript jquery-ui

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

by Marcus Vinicius • **4,826** points · Answer 1 · 2015-06-03T21:40:55+00:00

One way to do what you want is to use the load jQuery.

Let’s say you have the files:

header.html

<div>
    <img src="meulogo.png" alt="Meu Logo" />
    <h1>Minha página</h1>
</div>

footer.html

<p>
     Conteúdo do rodapé
</p>

So in your main file:

<html>
  <head>    
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script> 
        $(function(){
            $("#header").load("header.html"); 
            $("#footer").load("footer.html"); 
        });
    </script> 
  </head>
  <body>
    <header id="header">        
    </header>

    <footer id="footer">
    </footer>
  </body>
</html>

Thus, the contents of the file header.html will be included within the tag <header id="header"> and the archive footer.html on the tag <footer id="footer">.

If you want to use links, as in your code, you will have to stop the default navigation event using the method preventDefault():

$(document).ready(function () {
    $('#conteudo').load('conteudo/pagina_teste.html');

    $('ul#nav li a').click(function (event) {
        event.preventDefault();
        var page = $(this).attr('href');
        $('#conteudo').load('conteudo/' + page + '.html');
        return false;
    });

});