Search code examples
javascriptjqueryhtmlhistory.js

Dynamically fill div with same ID using jQuery

I am using History.js to dynamically fill the body of my html pages in order to prevent entire page refreshes. However, I am having trouble getting data and filling a div if they are the same ID. All of my pages are structured:

<div id="content">
    <div id="container">
        ...

Here is my current jQuery/history.js

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    $.get(State.url, function(data) {
        $('#content').fadeTo(600, 0, function() {
            $('#content').html($(data).find('#container').html()).delay(200).fadeTo(600, 1);
        });
    });
});

I want to be able get data from 'content' and also fill the 'content' div, but when I change the variable in find() to 'content', it will return nothing.

Solution

  • Figured it out!

    Was able to create a work around by using $(data).find('#container').parent().html()