Jquery Multiple load in a DIV

jquery html load

25,834

Solution 1

Maybe I'm missing something but it seems like you all have been missing the fact that this is an ajax call and you are calling functions procedurally and not as a callback function based on a successful ajax response.

Besides, if you are doing anything more complex than loading some (X)HTML into an element, you should probably use one of the more powerful jQuery ajax methods (i.e., get() or post() or ajax()).

Assuming you'll get (X)HTML in the response:

// Only ONE ajax call and very simply parsing... 
$.get('textes.html', {}, function(data) {
    var $response = $('<div />').html(data);
    var $nicolas = $response.find('#nicolas')
    var $antoine = $response.find('#antoine');
    $('#right').append($nicolas).append($antoine);
},'html');

It's really as simple as that.

Solution 2

WHy not load them both in one call:

$('#right').load('textes.html #nicolas,#antoine');

EDIT
Inspired by Justice way I thought of the follwoing:

var $page = $('<div />').load('textes.html #nicolas,#antoine');
var $nicolas = $page.find('#nicolas');
var $antoine = $page.find('#antoine');
$('#right')
 .html($nicolas)
 .append('<hr/>')
 .append($antoine);

This will make only one (or two, depending on what firefox feels like) calls to the server. Thus saving bandwidth. But it also gives you more freedom in how to insert the elements and in which order.

Solution 3

Here's the full source code for a solution.

I've hosted a working sample on JSBin.com: http://jsbin.com/ulodu (Editable via http://jsbin.com/ulodu/edit)

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script>
$(function(){
  $.get(
    'http://jsbin.com/oyuho',
    function(response){
      /* 
        Wrap the response in a <div /> so that we can use
        find() instead of filter(). Also remove <script> tags.
        This is essentially what $.load() does.
      */  
      var responseWrapper = $('<div />').append(response.replace(/<script(.|\s)*?\/script>/g, ""))
      $('#content')
        .append(responseWrapper.find('#nicolas'))
        .append('<hr />')
        .append(responseWrapper.find('#antoine'));
    }
  );
});
</script>
</head>
<body>
  <div id="content"></div>
</body>
</html>

Solution 4

var nicolas = $('<div />').load('textes.html #nicolas');
var antoine = $('<div />').load('textes.html #antoine');
$('#right')
    .append(nicolas.children())
    .append('<hr />')
    .append(antoine.children())
;

Or, Pim Jager's way.

View more solutions

25,834

Author by

menardmam

Updated on July 09, 2022

Comments

menardmam almost 2 years
Here is my code:
```
$('#right').load('textes.html #nicolas');
$('#right').load('textes.html #antoine');
```
The problem is that the content of the div antoine overwrites the content loaded by the div nicolas in the right div
```
div #right : load div nicolas from file textes.html = ok
div #right : load div antoine from file textes.html = overwrite content = No!
```
I'd like to append antoine to nicolas. This is to add nicolas and then add antoine so #right will be nicolas + antoine

I have tried to get the content into a var but it didn't work.

Any idea ?

On top of that... I would like to add a rule <hr> BETWEEN each load

Maybe something like this, but this doesn't work.
```
$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;
```
menardmam about 15 years

is it possible to do the load without the extra div markup... just the plain text and on to of that... i will like to add a rule BETWEEN each load
menardmam about 15 years

you are really smart !... it look way to simple... but what about the <hr>
yfeldblum about 15 years

The div is there to be a container for whatever is being loaded. The div is dynamically created but is not injected into the page. If you're thinking of doing something fancy, I would do it the way I showed here. Also, I edited this to show how to inject a <hr /> in between the two loaded content sections.
menardmam about 15 years

I like it to work, but got that error : Access to restricted URI denied" code: "1012 i think it dont have anything to do with the code, it something about the load
menardmam about 15 years

something bizzare append... $('#right').load('textes.html #a, #b, #c, #d, #e'); the content in the #right div is NOT in the right order. it look like a,b,e,d,c or anything else !
Pim Jager about 15 years

This is a better way then mine because it gives you more freedom. However in the worst case scenario it would make four calls to the server.
menardmam about 15 years

look by yourself, maybe i have done something wrong tac-o-tak.ca/getm-comediens.html tac-o-tak.ca/textes.shtml
menardmam about 15 years

It look really complicated to me, maybe when i will have time, i check that out, but KyleFarris solution look really nice to me, and IT WORK FINE, thanks
user756659 almost 10 years

plus one on this all these years later... just came across a situation where I needed to update multiple divs after an ajax form post... this solution worked great with a little tweaking to fit my usage.
Admin almost 6 years

Found this code very useful, thank you! I have a question regarding it, lets say I have a div inside "#nicolas" and I need it to be removed on this very get call, how can I do this? @KyleFarris