Catch only one div from another page via jQuery

Question

Catch only one div from another page via jQuery

Navigation

#1 by (6 votes)
#2 by (6 votes)

6

Paste content of another page by javascript or jquery

In another question I wanted to know how to get content from a page.

In this I wanted through this code to get only a <div> instead of the whole content. Let's say I wanted to get all the contents of a% test call.

How to get only a <div> ?

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script></head><body><script>$.ajax({url:'http://agenciaroadie.com.br/loja.php',type:'GET',success:function(res){varheadline=$(res.responseText).text();$("#cabecalho").html(headline);
             }
        });
    </script>
    <div id="cabecalho">

    </div> 
</body>

jquery ajax

asked by anonymous 17.06.2015 / 16:37

2 answers

6

You can use Jquery's load

$("#cabecalho").load("loja.php #teste");

jQuery Load

17.06.2015 / 16:52

What is the function of the "!" (exclamation) operator? [duplicate] How can I leave half of a side of an element curved inward as in the figure with css?

score 6 · Accepted Answer

I would use the .find method in the response content of your request. It may seem strange at first, this works perfectly.

See:

$.ajax({
    url: 'http://agenciaroadie.com.br/loja.php',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('#id_da_div_que_eu_quero'); 
        $("#cabecalho").html(headline);
    }
});

Note that .text is not required. This is very useful if you want, for example, to select elements of a specific class.

Example:

$(function(){

    // Suponhamos que esse é o conteúdo de outra página

    var html = '<ul>\
                    <li>1</li>\
                    <li>2</li>\
                    <p>Não é uma li</p>\
                </ul>';

    // Quero somente as LI

    var $lis = $(html).find('li');

    $('#element').html($lis);
})

See this on JSFIDDLE

Example with classes:

$(function(){

        var html = '<ul>\
                    <li class="impar">1</li>\
                    <li class="par">2</li>\
                    <li class="impar">3</li>\
                    <li class="par">4</li>\
                </ul>';

    // Quero somente os pares

    var $lis = $(html).find('li.par');

    $('#element').html($lis);
})

See JSFIDDLE

Getting filtered elements from an external content

Suppose we have two pages:

index.html - The page where we are working
externo.html - The external page where we will look for the elements

See how it would work, practically, based on this scenario:

External content:

#externo.html

<div id="conteudo">
   <ul>
      <li></li>
   </ul>
</div>

The page where we will install the contents of another page

#index.html

<!DOCTYPE html>
<html>
<head>
    <title>Testando</title>

    <script type="text/javascript" src="seu_jquery.js"></script>

    <script type="text/javascript">
    $(function(){
       $.ajax({
          url: 'externo.html', // página da requisição externa
          type: 'GET',
          // parâmetro "html" vem com o conteúdo da página completo
          success: function(html) {

           // Pegamos somente <li> da página externa
            var $lis = $(html).find('#conteudo > ul > li');

           // Mandamos para o elemento de id "cabecalho" da nossa página
            $("#cabecalho").html($lis);
        }
      }); 
    });
    </script>
</head>
<body>
     <div id="cabecalho"></div>
</body>
</html>