jquerytwitter-bootstraptwitter-bootstrap-3jscriptmixitup

MixItUp random filter on page load in Bootstrap

Been tinkering with MixItUp in Bootstrap.

I have it all working in the col structure adding classes to the lists but I can't get it to load randomly every time the page is refreshed! I've used the following 

$(function(){
    $('#Grid').mixitup({
        load: {
            sort: 'random'
        }
    });
});

I’ve had it working on the mixitup code pen but once I distribute it into columns within bootstrap it doesn't want to play ball!

Is there a work around for this?

Solution

  • If that separate file is referenced in the head it will be loaded before bootstrap or jQuery. Also, you should load jQuery before bootstrap. My advice: put both bootstrap and jQuery in the header, then call your function in document.ready():

    <head>
...
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mixitup/1.5.6/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#Grid').mixItUp({
                load: {
                    sort: 'random'
                }
            });
        });
     </script>
</head>

    Update

    I might have found your problem. You've linked to version 1.5.6 of the MixItUp plugin, while what I copied into the fiddle is version 2.1.7. When I switch versions in any of the fiddles, the new version works while the old one doesn't.