Jquery loading wrong html via ajax?

Question

In my website I have a file called learn-more.html , it's used to load stuff from index.html using AJAX.

learn-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
    Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

I have the following script located in index.html

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html #main-images', function (data) {
                        alert(data);
                });
</script>

Problem: The alert prints the contents of: learn-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

Expected The alert should print the content of: <div id="main-images">

<div id="learn-more-photo" class="span-one-third">
    <img class="thumbnail" src="http://placehold.it/300x180" alt="">
</div>

What could be going on here ?

EDIT: I'm willing to upload a .zip with the real files... it's just index.html plust learn-more.html and the css, if anyone is interested let me know.

EDIT2: This prints out the whole learn-more.html content

$.get('ajax/learn-more.html #main-images', function (data) {            
    alert(data);
});

What are you trying to do with var foo = $(data).html()? You're putting the results of the ajax call into a DOM fragment and then extracting the HTML from that. Why not just alert(data)? — jfriend00
– jfriend00, Commented Jan 11, 2012 at 3:50
@dyelawn Nothing happens if I use $.load (I don't even get an alert by just replacing $.get with $.load — Goles
– Goles, Commented Jan 11, 2012 at 3:58
$.load() is a little bit different than $.get();, so you can't just switch the words in your code. With $.get(); you'd need to be using server-side scripting on the page you're calling (php or asp or etc. instead of html). With $.load() you can get specific elements using the hashtag identifier for the id attribute as you've written it in your code. — dyelawn
– dyelawn, Commented Jan 11, 2012 at 4:02

Adam Rackis · Accepted Answer · 2012-01-11 04:30:09Z

1

I think this is what you're looking for:

$.get('ajax/learn-more.html', function (data) {
    var foo = $("#main-images", data);

    alert(foo.html());
});

EDIT

Hmm, try these alerts to see if we're close:

$.get('ajax/learn-more.html', function (data) {
    var foo = $("#main-images", data);

    alert(foo.length);
    alert(foo.hasClass('hero-unit span-one-third')); 
    alert(foo.html());
});

EDIT

Maybe try wrapping the data variable in the jQuery function?

$.get('ajax/learn-more.html', function (data) {
    data = $(data);

    var foo = $("#main-images", data);

    alert(foo.length);
    alert(foo.hasClass('hero-unit span-one-third')); 
    alert(foo.html());
});

edited Jan 11, 2012 at 4:30

answered Jan 11, 2012 at 3:55

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

7 Comments

Goles Over a year ago

If I do alert(foo) I get [object Object] , if I do : var foo = $("#main-images", data).html(); and then alert(foo) I get 'null'. Any ideas ?

Adam Rackis Over a year ago

@Mr.Gando - not sure - check my edit - maybe that'll help debug this

Goles Over a year ago

Got this: alert(foo.length); => 0 alert(foo.hasClass('hero-unit span-one-third')); => false alert(foo.html()); => null

Adam Rackis Over a year ago

@Mr.Gando - looks like the html coming back isn't what you expected. Add an alert(data); to see exactly what's coming over. You might also inspect firebug / chrome dev tools to see the network calls going across.

Goles Over a year ago

Checkout the EDIT2 in my question, that returned the whole html content of learn-more.html ... maybe could lead to an answer?

|

dku.rajkumar · Accepted Answer · 2012-01-11 04:19:49Z

0

try mentioning response datatype

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html', function (data) {
                        alert($(data).find('div#main-images').html());
                },
               'html');
            });
        });
</script>

edited Jan 11, 2012 at 4:19

answered Jan 11, 2012 at 4:05

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

3 Comments

dku.rajkumar Over a year ago

i have updated the answer and added response datatype.. try it out now.

Goles Over a year ago

still returns null... I edited my question with a small update.

dku.rajkumar Over a year ago

did you try removing extra space in link after .html

Jon · Accepted Answer · 2012-01-11 04:27:05Z

0

Instead of using $.get() to do this, try the load method instead:

$(target).load('ajax/learn-more.html #main-images', function(data){
  alert(data);
});

edited Jan 11, 2012 at 4:27

answered Jan 11, 2012 at 4:01

Jon

1,3471 gold badge14 silver badges32 bronze badges

1 Comment

Jon Over a year ago

Just edited this example to include a target object that you would be loading this content into. So, your target would be an element in your index.html file, and when the load method runs successfully, the contents of the target would be replaced with the contents of the #main-images element in learn-more.html. If it returns nothing, make sure your path to learn-more.html is correct. Would also suggest using console.log(data) instead of alert(data) for unobtrusive debugging in both Web Inspector (WebKit browsers) and Firebug (Firefox).

MAK · Accepted Answer · 2012-01-11 07:32:01Z

0

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html', function (data) {
                        var main_images = $(data).find("#main-images");
                        alert(main_images);
                });
</script>

answered Jan 11, 2012 at 7:32

MAK

2911 silver badge2 bronze badges

Comments

Goles · Accepted Answer · 2012-01-12 12:03:48Z

0

I solved my issue,

$(data) returns an array of elements and not a jQuery object. $(data)[x] contains the element I was looking for.

To retrieve it, I ended up using

$(data).filter('#main-images');

Thanks everyone for your help!

answered Jan 12, 2012 at 12:03

Goles

11.8k24 gold badges81 silver badges142 bronze badges

Collectives™ on Stack Overflow

Jquery loading wrong html via ajax?

5 Answers 5

7 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related