JQuery .html function

Question

I am using the jquery .get to load the contents of a page. The page loads okay and the ouput is stored in a variable data. I only want to grab a specific div with the id of 'result1' out of that data variable and place it on the page. I am having trouble parsing this specific element from the variable data, it seems that all elements are being placed on the page. I think this is an easy fix but its driving me crazy.

Here is the base code without any parsing attempts:

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
        $("#details1").html(data);
  });

Here is the results of data:

<div id='result1'>
<table>
<tr>
<td>testa</td>
<td>testb</td>
</tr>
</table>
</div>

<div id='result2'>
<table>
<tr>
<td>testc</td>
<td>testd</td>
</tr>
</table>
</div>

You can simply use .load and pass a selector. api.jquery.com/load/#loading-page-fragments — Matt Ball
– Matt Ball, Commented Mar 29, 2013 at 19:00
Try api.jquery.com/load. See the "Loading Page Fragments" section. — j08691
– j08691, Commented Mar 29, 2013 at 19:00
I cannot use load given the nature of the code. I have to parse this data variable for specific elements. — user1886368
– user1886368, Commented Mar 29, 2013 at 19:01
Yes, you can, because .load() specifically allows you to select parts of the returned HTML. — Matt Ball
– Matt Ball, Commented Mar 29, 2013 at 19:02

adeneo · Accepted Answer · 2013-03-29 19:04:02Z

1

You can use load()

$("#details1").load("test.php?id=" + $(this).attr('id') + "&auth=1 #result1");

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

or you can do the same yourself:

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
    $("#details1").append( $('<div />').append(data).find('#result1') );
    $("#details2").append( $('<div />').append(data).find('#result2') );
    $("#details3").append( $('<div />').append(data).find('#result3') );
});

answered Mar 29, 2013 at 19:04

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

user1886368 Over a year ago

What if I wanted to load result1 into a element details1 and result2 into an element details2 in a single http request?

sdespont · Accepted Answer · 2013-03-29 19:04:21Z

0

Use this syntax to load only the result1 div in the details1 element.

$('#details1').load("test.php?id=" + $(this).attr('id') + "&auth=1 #result1');

answered Mar 29, 2013 at 19:04

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Comments

Adrian · Accepted Answer · 2013-03-29 19:08:01Z

0

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
    $("#details1").html($(data).filter('#result1'));
});

answered Mar 29, 2013 at 19:08

Adrian

1906 bronze badges

Collectives™ on Stack Overflow

JQuery .html function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related