using Jquery.load() with javascript content

Question

I am trying to grab items, organized with Javascript, and put them on the content of my page. The issue I am coming across is that when I use .load(), it does not grab any javascript, so the images I grab are not in the right organization.

Here is the function I use to grab the content:

function loader(url) {
    $.get(url, function(data) {
        $('#posts').fadeOut('normal',function(){$('#posts').html(data);});
        $('#posts').fadeIn('normal');
    }).error(function(url) {
        alert('error');
    });
};

After researching, it seems that in order to get the javascript I need to use Ajax

Here is the thing:

I have the exact same javascript code on my page that is the javascript for the other page that is not getting applied. Is there a way that I can apply this javascript on the items loaded with .load()?

Jsfiddle

SpenserJ · Accepted Answer · 2013-06-22 00:44:44Z

Masonry requires that you tell it when you add or remove elements, so that it can resort itself accordingly. There are two ways of doing this:

Destroy the Masonry of $wall, Replace $wall's HTML, Construct Masonry on $wall
Use Masonry to destroy $wall's children, Use Masonry to add new children to $wall - I had trouble implementing this, as it failed to align properly

Following the first example, there are a few changes that I've made. JSFiddle

Changed all instances of id="entry" to class="entry", and #entry to .entry. An ID may only be used by one element at a time, while a class exists for this purpose.

Filtered the returned HTML to only include the children of #posts. We don't want to include the <html>...<head>...</head><body>....

$newPosts = $(data).filter(function(){
    return this.id === 'posts';
}).children();

Destroyed Masonry, Updated the HTML, Reloaded Masonry

$wall.masonry('destroy');
$('#posts').html($newPosts);
$wall.masonry({
    itemSelector: '.entry, .entry_photo',
    isAnimated : false
});

mrksbnch · Accepted Answer · 2013-06-21 23:51:56Z

0

jQuery Masonry is taking care of the layout of the different items. But you are only calling the masonry function once on page load. To fix your problem you just need to call masonry again after the new items are loaded - so inside your AJAX Call in the function "loader" write something like you already did:

$wall.masonry({
   itemSelector: '#entry, #entry_photo',
   isAnimated: false
});

You could also improve your code, for example by using your $wall variable instead of $("#posts").

answered Jun 21, 2013 at 23:51

mrksbnch

1,8423 gold badges29 silver badges48 bronze badges

1 Comment

Ryan Saxe Over a year ago

Could you show me how that is done, because I tried adding the masonry into my function, but that didn't do anything...

Collectives™ on Stack Overflow

using Jquery.load() with javascript content

Jsfiddle

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related