CODEWITHSUNDEEP
jqueryajax
bjohnb
bjohnb

Reputation: 500

Load ajax content into div after the existing content

I need to load the contents of a web page into my existing page, specifically after existing content, not too replace it. I need to do it after the last HR tag in the div i want the content pulled into.

So, the html i have is:

<article>
<p>My content</p>
</article>
<hr>

So i want my content to load in directly after that <hr> tag. But i'm trying to use after, and it's doing something odd with the <hr> tag, trying to make it <hr>my ajax content</hr>

$(document).ready(function(){
  $('.news-ajax-link').click(function(){
    $("article hr").after().load('/news/ajax_news/?offset=2');
    event.preventDefault();
  });
});
</script>

Any help would be great! Thanks!

Upvotes: 0

Views: 2018

Answers (3)

Darren Wainwright
Darren Wainwright

Reputation: 30727

you could try using .append() rather than .after().

Or perhaps add in an html tag and load() into it.

such as

<article>
<p>My content</p>
</article>
<hr>
<span id="loadedContent"></span>


$(document).ready(function(){
   $('.news-ajax-link').click(function(){
     $("#loadedContent").load('/news/ajax_news/?offset=2');
    event.preventDefault();
   });
 });

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

The jQuery .load() function is specifically designed to load content into a container element, so what it's attempting to do is precisely what you told it to: load the content of that URL inside your <hr> element.

If you want to append the content after the <hr> you'll need to use one of the other AJAX functions that jQuery provides - I'd suggest using jQuery.ajax() - and do the appending yourself inside the callback function:

$(document).ready(function(){
    $('.news-ajax-link').click(function(event){ // note the event parameter added here
        $.ajax({
            url: '/news/ajax_news/?offset=2',
            type: 'post',
            success: function(content) {
                $("article hr").after(content);
            });
        });
        event.preventDefault();
    });
});

Upvotes: 1

JDuarteDJ
JDuarteDJ

Reputation: 1104

I think you probably need to close the hr, so use this

<hr />

otherwise jQuery (or possibly the browser) thinks its an unclosed tag

EDIT: ACTUALLY I think the problem is at after()

after() is mean to have an argument so try this:

.after(/*AJAXED content here*/);

Upvotes: 0

Related Questions