CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3jscriptmixitup
batas
batas

Reputation: 65

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?

Upvotes: 4

Views: 2540

Answers (1)

Max Leske
Max Leske

Reputation: 5125

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.

Upvotes: 3

Related Questions