CODEWITHSUNDEEP
jqueryajax
Goles
Goles

Reputation: 11799

Jquery loading wrong html via ajax?

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);
});

Upvotes: 1

Views: 818

Answers (5)

Goles
Goles

Reputation: 11799

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!

Upvotes: 0

MAK
MAK

Reputation: 291

<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>

Upvotes: 0

Adam Rackis
Adam Rackis

Reputation: 83358

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());
});

Upvotes: 1

Jon
Jon

Reputation: 1347

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

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

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18568

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>

Upvotes: 0

Related Questions