jQuery .html() from object returns undefined

Question

I'm using the following javascript function to load content from another url to the current document. Why are contentHtml and menuHtml undefined, what did I wrong? I also don't know what the [prevObject.. means, does this look ok or is there already something wrong?

    function exhibitload(url) {
        $.get(url, {}, function (data) {
            console.log(data);
            var content = $(data).find('#exhibit');
            var menu = $(data).find('#index');

            console.log(content); // [prevObject: n.fn.init[47], context: undefined, selector: "#exhibit", jquery: "2.1.3", constructor: function…]
            console.log(menu); // [prevObject: n.fn.init[47], context: undefined, selector: "#index", jquery: "2.1.3", constructor: function…]

            var contentHtml = $(content).html();
            var menuHtml = $(menu).html();

            console.log(contentHtml); // undefined
            console.log(menuHtml);  // undefined

            $('#exhibit').html(contentHtml);
            $('#index').html(menuHtml);
            $('body').removeClass('loading');
        });
    }

@NaeemShaikh , no, it doesn't work - jsfiddle.net/28abyns7/2 — Artur Filipiak
– Artur Filipiak, Commented Feb 19, 2015 at 15:03

Artur Filipiak · Accepted Answer · 2015-02-19 15:26:26Z

3

You're trying to .find() the element within the element (jQuery objects set containing the element) itself. You have to search for the element in one of its parents, which is a separate jQuery object (<div> in the example below)

Try this one:

var html = $('<div/>').append(data);
var content = html.find('#exhibit');
var menu = html.find('#index');

DEMO

edited Feb 19, 2015 at 15:26

answered Feb 19, 2015 at 14:47

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

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

Comments

PeterKA · Accepted Answer · 2015-02-19 17:39:51Z

0

Change find():

        var content = $(data).find('#exhibit');
        var menu = $(data).find('#index');

To filter():

        var content = $(data).filter('#exhibit');
        var menu = $(data).filter('#index');

DEMO

var data = $('body').contents();
console.log( data );
var exh = $(data).filter('#exhibit');
console.log( 'Exhibit' );
console.log( exh[0] );
var ind = $(data).filter('#index');
console.log( 'Index' );
console.log( ind[0] );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Here's all the data:
<div id="exhibit">Exhibit Div</div>
<div id="index">Index Div</div>

edited Feb 19, 2015 at 17:39

answered Feb 19, 2015 at 15:25

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery .html() from object returns undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related