batas batas - 6 months ago 91
jQuery Question

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?

Answer

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.