Just grab a div from another page via jQuery

Asked

Viewed 11,472 times

7

Grab content from another page by javascript or jquery

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

In this I wanted through this code to catch only one <div> instead of the entire content. Let’s assume that I wanted to take all the contents of a <div> so-called test.

How to catch only one <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>

    <script type="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) {
                 var headline = $(res.responseText).text();
                 $("#cabecalho").html(headline);
             }
        });
    </script>
    <div id="cabecalho">

    </div> 
</body>
jquery ajax

2 answers

6


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

Behold:

$.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 the .text. 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 in the 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 on 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 search the elements

See how it would work, in a practical way, based on this scenario:

External content:

#externo.html

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

The page where we will insert content from 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>

  • Very good, can you find tags or classes too? Or tags within an ID?

  • Yes, I quoted it above, but I did not put it in the example ^_^

  • @Wallace in this example would var html be the site address? example var html = www.google.com ?

  • No. It would be the content returned by AJAX. The function response $.ajax always falls in the first function parameter success, which is represented by the variable response. I will post example.

  • In this subject ai I was floating even and did not understand, you care to post a full example there please, removing from the site http://www.pauloroberto.info a div wb_element_instance10, for I see this business working, I’ve given up on it in the past because I didn’t understand... If it won’t take up too much of your time.

  • One last question, how do I access the second read in the last element, assuming there are two read?

  • var $lis = $(html). find('#content > ul > li'); if I want to catch the second li

  • var $lis = $(html).find('#conteudo > ul > li').eq(1). For the counting of <li> is from zero.

  • Thanks, I found no tutorial on this, it will help a lot.

Show 4 more comments

6

You can use Jquery load

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

jQuery Load

  • 1

    +1. Simple, beautiful and objective.

  • Exactly, for what you want I think is the most practical.

  • The difference is, with ajax, we have beforeSend, or we could set the request method as POST and other things. I don’t know if you can do load. :)

  • See the latest examples of the jQuery page. But to have more control over what is being done I also prefer .$.ajax

  • great that even ja Ana the damn doubt and in a rsrs code line thanks @azyFox

Browser other questions tagged jquery ajax

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