isotope reorder after search not working

Question

I've integrated a jquery search plugin to search through isotope elements, the plugin uses regular expression to sort content, in real-time, based on the search input.

Isotope elements are updating automatically ( I'm using a wordpress plugin which retrieves data from social networks )

My question is, how can I reorder the elements after the search is performed?

L.E : I'VE SOLVED THIS BY USING OTHER PLUGIN FOR SEARCHING: Here is the code:

               $(document).ready(function () {
            $("#id_search").quicksearch(".dcsns-content .isotope-item", {
                noResults: '#noresults',
                loader: 'span.loading',

                'show': function () {
    $(this).addClass('quicksearch-visible');
},
'hide': function () {
    $(this).removeClass('quicksearch-visible');
},
'onAfter': function () {
   $('.dcsns-content .stream').isotope({ filter: '.quicksearch-visible' });
}
            });
        });

Menes

you are using jQuery(window).load(function(){ why not jQuery(document).ready ? Maybe the elements you are looking for aren't yet present at page loading. Also, I don't see any .wall-outer or .stream element in your html – Newfangled

sorry, but this is not helping me; I've asked something else, the search is working, elements are ok, what I need is a method to reorder the elements after search, you just have to check the link – Menes

my bad, I thought it was a problem with ReferenceError. Wmell, the documentation in isotope site talks about getSortData parameter. I suppose you allready tried it. – Newfangled

I've changed to document ready but still the same error with every method I try : $container is not defined. – Menes

Answer 1

as you declare $container into the .load, only .load function will see it

two solutions, you add var $container = $(); in the normal js so .load and .ready will access it

or you merge all into the .ready function :

$(function(){
    var $searchBox = $("#searchbox");
    var $searchFilter = $('.searchFilter');
    var $container = $('.wall-outer .stream');

    $searchBox.on("blur",function(){
        if(this.value === '')
                this.value='Keyword(s)';
    }).on("focus",function(){
        if(this.value === this.defaultValue)
                this.value = '';
        else    this.value = null;
    });

    $searchFilter.simpleContentSearch({
        'active' : 'searchBoxActive',
        'normal' : 'searchBoxNormal',
        'searchList' : 'dcwss-content ul li',        // this is important
        'searchItem' : 'div'                        // this is important
    });

    $(".search-btn").on("click", function(){
        $searchBox.val( $(this).data("search") );
        $searchFilter.keyup();
        $container.isotope('reLayout');
    });

    $(".search-reset").on("click", function(){
        $searchBox.val("");
        $searchFilter.keyup();
        $container.isotope('reLayout');
    });             

    $container.isotope('reLayout');
});

Mansour

Thanks for your response, but I've already found a solution for this! – Menes

Answer 2

I was able to get a one-shot example working by adding the following to the end of your filtercontent.js file:

    // Get isotope container
    $container = jQuery('.dc-wall .stream');

    // Clear out existing isotope class instance
    $container.data('isotope', null);

    // Start a new isotope instance on the container
    $container.isotope({ filter: ':visible', sortBy: 'postDate' });

This only works first time you click on search 1, but shows the concept of restarting isotope is valid. I do not understand enough of how your filtering works, but I hope this does give you a starting point.

There is a problem in that the content filter animates items to display: none using hide() or fade(), so this only worked if the hide was instant (so I also changed the filter to use hide(0)) e.g.

    jQuery(this).parent('.' + settings.searchList).hide(0);

Nates

I've put this in the fiddle but it's strange because is working with just Search 1 if I click on Search 2 is not working proper. What it can work is to ,ake something like when "search 1" is clicked reorder the elements and when "search 2" is clicked first thing is to reset the search input and after do the search and after this reorder again elements.In my opinion this can be a solution that can work. What do you think? is this possible ? – Menes

@Alecs: I am unable to test your site properly with JSFiddle as it pulls down the JS files from your server and overwrites the test JS. The modification needed to go into filtercontent.js, but here it also ran only on Search 1. Looking into the social wall plugin, it barely calls isotope, except to add new items. Have you tried contacting the social plugin writers? – Nates

I've added this but is not working, you can take a look link, I've asked the developers of the plugin also but they don't give any indications just asking for money to do this. I've found a similar question here and I'm thinking to apply the same concept on my code but I don't know how can I make that in my code because there is used another search plugin. – Menes