How do I pull content via AJAX from a site that has a menu header and a fixed audio player?

Question

How do I pull content via AJAX from a site that has a menu header and a fixed audio player?

Navigation

#1 by (8 votes)
#2 by (7 votes)

5

How can I create a site that uses AJAX to load pages?

What is the best way to do this without bugs and really functional?

I have plans to create some sites that have a player de áudio , which can not stop when a person goes to another page.

Example site: link

I would like to create a site similar to esse.

On the page it would look something like this:

<body>
    <div class="meu-player">Aqui fica o player</div>
    <div class="meu-menu">Aqui fica o menu</div>
    <section>Aqui fica o conteúdo que é puxado via ajax e exibido</section>
</body>

I would like to get (in code) functional examples of how to do this.

javascript html jquery ajax

asked by anonymous 15.07.2014 / 05:52

2 answers

8

You can split your site into multiple parts:

HTML

<head>
    <!-- Sempre importe as bibliotecas antes de tentar trabalhar com elas. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       // Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
        $(document).ready(function(){
            $("#home").on("click", function(){
                $("main").empty(); //Limpa para poder colocar o conteúdo.
                $("main").load("home.html"); //Faz uma requisição http para o servidor.
            });
            $("#sobre").on("click", function(){
                $("main").empty();
                $("main").load("sobre.html");
            });
        });
    </script>
</head>
<body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li id="home">Home</li>
            <li id="sobre">Sobre</li>
        </ul>
    </header>
    <main>
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>
</body>

Remember that this only works if you have a server, the browser does not allow you to do this kind of thing directly on the filesystem.

15.07.2014 / 07:34

Identify browser and its version The logic behind how PHP interprets the concatenation of string and numbers?

score 7 · Accepted Answer

To change the URL of the page without compromising content (refresh) just use the following code.

Javascript

window.history.pushState("objeto ou string", "Titulo", "/url");

DEMO of the code above working

HTML Adapted with the code @Patrick .

<head>
    <!-- Sempre importe as bibliotecas antes de tentar trabalhar com elas. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
       // Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
        $(document).ready(function(){
            $(".ajax").on("click", function(e){
                e.preventDefault(); //eliminamos o evento
                var path = $(this).attr("href"); //Pegamos o caminho
                var titulo = $(this).attr("title"); //pegamos o titulo da página
                document.title = titulo; // Alterar o titulo da página
                window.history.pushState("", titulo, path);   
                $("main").empty(); //Limpa para poder colocar o conteúdo.
                $("main").load(path); //Faz uma requisição http para o servidor.
            });
        });
    </script>
</head>
<body>
    <!-- No caso, o header é a parte fixa, que não muda. -->
    <header>
        <div>"Aqui fica o player de audio."</div>
        <ul>
            <li><a href="home.html" class="ajax" title="Meu site">Home</a></li>
            <li><a href="sobre.html" class="ajax" title="Meu site - Sobre">Sobre</a></li>
        </ul>
    </header>
    <main>
        <!-- Aqui é onde o conteúdo vai ser carregado. -->
    </main>
</body>

To use the data- parameter and retrieve the value with JQuery you must use $ .data

Jquery

$(function(){
    var texto;

    //Recuperar do data-value
    texto = $('a.value').data('value');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-titulo
    texto = $('a.titulo').data('titulo');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-target
    texto = $('a.target').data('target');
    $('.resultado').append('<li>' + texto + '</li>');

    //Recuperar do data-meuVar
    texto = $('a.meuVar').data('meuvar');
    $('.resultado').append('<li>' + texto + '</li>');
});

This is my example HTML

HTML

<a href="#" class="value" data-value="texto do data-value"></a>

<a href="#" class="titulo" data-titulo="texto do data-titulo"></a>

<a href="#" class="target" data-target="texto do data-target"></a>

<a href="#" class="meuVar" data-meuvar="texto do data-meuvar"></a>

<ul class="resultado"></ul>

This code will show list

data-value text

date-title text

data-target text

date-myvar text

You can keep track of the code working at DEMO