Jquery Ajax, How to Grab Specific Element(s) of Source Page

Question

Trying to learn Ajax - jQuery through simple code samples I have this two html files as: index.html and source.html.the inex.html is as:

enter code here
<!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   $('button').click(function(){
   $.get('source.html', function(data) {
   $('.result').html(data);
   });
  });
 });
 </script>
 <title>Main Page</title>
 </head>
 <body>
 <button>Load Page</button>
 <div class="result"></div>
 </body>
 </html>

and the source.html as:

enter code here
<!DOCTYPE html>
<html>
<head>
<title>Source Page</title>
</head>
<body>
<div class="test1">Hello Ajax!</div>
<div class="test2"> Again Hello Ajax!</div>
<div class="test1">WoW Ajax!</div>
 <p> The html() method sets or returns the content(innerHTML) of the selected... </p>
 </body>
</html>

now my question is how I can grab specific elements instead of getting all elements in the index page? For example , how I can filter the request object to just get all div with class "test1" or only

from the page source.I also do not really understand what does "data" parameter means in

enter code here
$.get('source.html', function(data) {
$('.result').html(data);

can you please let me know what does it mean?

data from Console:

<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<div class="test">Hello world!</div>
<div class="test1">Hello Ajax!</div>
<div class="test2"> Again Hello Ajax!</div>
<div class="test1">WoW Ajax!</div>
<p> The html() method sets or returns the content (innerHTML) of the selected   elements.When this method is used to return content, it returns the content of the FIRST   matched element. When this method is used to set content, it overwrites the content of ALL matched elements.</p>
 </body>
 </html>

but it is working on my machine

Behseini
– Behseini

2012-11-15 08:41:29 +00:00
Commented Nov 15, 2012 at 8:41 — Behseini
– Behseini, Commented Nov 15, 2012 at 8:41

HungryCoder · Accepted Answer · 2012-11-15 08:40:22Z

1

After getting the response of your ajax call, you can find elements in the following way:

$.get('source.html', function(data) {
   test1_elements = $(data).find('.test1')
});

test1_elements will now contains all the elements with class test1 from your source.html.

answered Nov 15, 2012 at 8:40

HungryCoder

7,6161 gold badge41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Behseini Over a year ago

Hi HungryCoder thanks for your comment but this is not returning anything to page I modify the code to code $.get('source.html', function(data) { test1_elements = $(data).find('.test1') $('.result').html(test1_elements); });code but it doesnt retrun anything to index page

HungryCoder Over a year ago

check in console to see what you actually got. ` test1_elements = $(data).find('.test1') ; console.log(test1_elements)`

Behseini Over a year ago

Ok I am just getting [] @ line 11.

HungryCoder Over a year ago

well, then check whole data using console.log(data)

HungryCoder Over a year ago

are you getting html that matches to source.html? post it somewhere.

|

Adder · Accepted Answer · 2012-11-16 13:22:41Z

0

You can grab specific elements by their id or class:

var $byids= $('#id');
var $byclass= $('.class');

The data parameter in the function contains the entire response data, that is what source.html shows.

You can use

var $div= $(data).find('#divid');

to select stuff from the data.

Updated: You have 2 test1 elements. The following will get the html of each, and stitch it together. The last line displays the summary in all elements with class "test" in the document.

$.get('source.html', function(data) {
    var $test1_elements = $(data).find('.test1');
    var summary= '';
    $test1_elements.each({function(){ summary+= $(this).html(); });
    $('.test').html(summary);
});

edited Nov 16, 2012 at 13:22

answered Nov 15, 2012 at 8:41

Adder

5,8982 gold badges35 silver badges60 bronze badges

1 Comment

Behseini Over a year ago

hi adder but how I can use var $byids= $('#id'); inside the $.get()?

Collectives™ on Stack Overflow

Jquery Ajax, How to Grab Specific Element(s) of Source Page

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related