CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
twan
twan

Reputation: 2659

Re apply javascript after pageload

I have an issue with my masonry code.

It works fine on pageload, but the items that are inside the masonry can be filtered, I am doing this using ajax and I'm replacing the entire div with elements to show the filtered items.

After this happens, the masonry code is not applied again and it falls apart.

How can I make sure the masonry stays applied even when content changes after pageload?

In my footer I have the following code:

<script type="text/javascript">
  $(document).ready(function() {
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
  });
</script>

Then in my custom.js I have the following:

$( document ).ready(function() {

   /* Ajax code voor aanbiedingen */
  $("#branche").on('change', function() {
    var option = $('#branche > option').filter(':selected');

    if(option.val() == 'default'){
      $.post("includes/ledenall.php", {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);

      });
    }else{
      $.post("includes/leden.php?option=" + option.val(), {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);
      });
    }
  });
});

Which returns my php file, but this time without the masonry being applied.

What can I do about this?

Upvotes: 0

Views: 74

Answers (2)

Paul
Paul

Reputation: 26

Add your code to a function

function func() {
    $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
    });
}

Then you can call the function and apply your isotope at any point you want

Upvotes: 0

arbuthnott
arbuthnott

Reputation: 3819

You can try reapplying your isotope library after changing the DOM:

/* Ajax code voor aanbiedingen */
$("#branche").on('change', function() {
  var option = $('#branche > option').filter(':selected');

  if(option.val() == 'default'){
    $.post("includes/ledenall.php", {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }else{
    $.post("includes/leden.php?option=" + option.val(), {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }
});

I don't know if .gridlist is totally replaced in your updated DOM. If not, you may need to somehow "remove" the old isotope instance, but something like this is what you need to do.

Upvotes: 1

Related Questions