CODEWITHSUNDEEP
jqueryajax
Bas van de Lustgraaf
Bas van de Lustgraaf

Reputation: 23

jQuery, how to load ajax content after a specified element

I need to load some ajax content after the fieldset with the class address. Using the code below it will replace the content of the .address with the ajax content.

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after().load('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html');
    $(this).next().toggle('slow');
    return false;
}).next().hide();

<div style="display: none;">
<fieldset class="address">
<!-- AJAx CONTENT GOES HERE -->
    <ol>
        <li>Stadhouderskade 78</li>
        <li> Amsterdam-Zuid</li>
        <li>020-5239666</li>
    </ol>
</fieldset>
<!-- BUT THE AJAx CONTENT NEEDS TO GO HERE -->
<span class="tags">Tags: museum</span>
</div>

Upvotes: 2

Views: 4279

Answers (3)

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

Actually after requires the object to append after given element. when you call

$(this).nex().find('addresss').after()

you are returned the reference to:

'address' + [content appended by `after`]

as we have not given anything to after function to append to address so we are still calling load on $('.address').

use this script instead:

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after($("div/>")
     .load('http://test.dev/search/view/IdDaytrip/' + 
         $(this).attr('id') + '.html'));
    $(this).next().toggle('slow');
    return false;
}).next().hide();

this creates new div to wrap the ajax content and show it in right way.

Upvotes: 0

rsilva4
rsilva4

Reputation: 1955

I usually do that this way:

var clicked = $(this);
$.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
function(data){
    alert("Data Loaded: " + data);
    $(clicked).next().find('.address').after(data);
});

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

This should work ..

$('.accordion .head').click(function() {
    $next = $(this).next();
    $.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
          function(data){
                         $next.find('address').after( data );
                        }
         ).end().toggle('slow');
    return false;
}).next().hide()

Upvotes: 0

Related Questions