ansaurus

Question

Answer 1

+1 A:

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.

Pim Jager 2009-05-14 22:57:22

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

marc-andre menard 2009-05-14 23:28:07

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 !

marc-andre menard 2009-05-15 00:38:33

only the rule appear !...

marc-andre menard 2009-05-15 13:46:51

Then the textes.html contains no #nicolas or #antoine...

Pim Jager 2009-05-15 15:25:18

look by yourself, maybe i have done something wronghttp://tac-o-tak.ca/getm-comediens.htmlhttp://tac-o-tak.ca/textes.shtml

marc-andre menard 2009-05-15 15:41:15

Answer 2

+1 A:

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.

Justice 2009-05-14 22:58:24

is it possible to do the load without the extra div markup... just the plain textand on to of that... i will like to add a rule BETWEEN each load

marc-andre menard 2009-05-14 23:23:26

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.

Justice 2009-05-14 23:48:42

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

marc-andre menard 2009-05-14 23:55:09

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.

Pim Jager 2009-05-15 08:58:47

Answer 3

A:

See the appendTo function.

Paul Morie 2009-05-14 22:59:24

Answer 4

A:

Maybe something like that can be done... it don't work !

$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;

marc-andre menard 2009-05-14 23:40:10

This didn't work becuase .load always replaces the content.

Pim Jager 2009-05-15 15:26:12

Answer 5

+3 A:

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"&gt;&lt;/script&gt;
<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>

brianpeiris 2009-05-15 17:55:20

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

marc-andre menard 2009-05-15 19:23:42

Answer 6

+2 A:

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.

KyleFarris 2009-05-15 18:14:18

Answer 7

A:

I got it working with the REALLY SIMPLE answer of KyleFarris

I even simplified it a little more, and it work fine

Thnaks everyone, here is the final code :

<script>
$.get('textes.shtml', {}, function(data) {
    var $response = $('<div />').html(data);
    $('#right')
    .append($response.find('#nicolas'))
    .append('<hr />')
    .append($response.find('#antoine'));
},'html');
</script>

marc-andre menard 2009-05-15 19:29:03

ansaurus

tags:

views:

answers:

Jquery Multiple load in a DIV

related questions