Home/ Questions/Q 6631815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:35:58+00:00

I’m trying to write a client script to use .load in a non-typical way.

  • 0

I’m trying to write a client script to use .load in a non-typical way. I’m working with another site and I don’t have access to change their generated code, so I have to do everything on the client side.

The page looks something like

<html>
  <!-- the head -->
  <body>
    <div id="body">
      <!-- the content -->
    </div>
  </body>
</html>

Now, I want to update the page with an XHR. I want to replace the contents of #body with the new contents of #body from the XHR. My first instinct was to do this:

$('#body').load('/ #body')

But that gives me a DOM that looks like this:

<html>
  <!-- the head -->
  <body>
    <div id="body">
      <div id="body">
        <!-- the content -->
      </div>
    </div>
  </body>
</html>

That’s clearly not what I want. I want <!-- the content --> from the newly fetched copy to just overwrite <!-- the content --> from the current copy.

I have also tried things along the lines of 

$.get('/', function(data) {
  $('#body').html($(data).find('#body').html());
}

to no avail. When I play with it, I find that $(data).find('#body') never finds anything.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can wrap the result of your XHR, assuming it is html in a jquery object, grab the body of the calling page and use replaceWith.

    //snip
var xhrResult = $("<html><div id='body'>blah</div></html>"), // pretend this was returned
    newContent = xhrResult.filter("#body"),
    placeHere = $("#body");
placeHere.replaceWith(newContent);

    Edited Based on this fiddle:
    http://jsfiddle.net/bstakes/VmhBW/

    • 0