Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

variable recognition in javascript

Hi guys! I've finally managed to got create some neat ajax filters for wordpress, it's a pretty long code:

// ajaxLoop.js
jQuery(function($){
    var page = 1;
    var loading = false;
    var cat = [];
    var sort = 'date';
    var order = 'DESC';
    var thisCat =   $(this).attr('title');
    var filters = $('#buttons button.filter');
    var resetter = $('#buttons button#resetter');
    var loadmore = $('#load-more');
    var disableButtons = $('#buttons button').attr('disabled', true);
    var enableButtons = $('#buttons button').attr('disabled', false);

    filters.click(function(){
        disableButtons;
        if( $(this).hasClass('active') ) {
            $(this).removeClass('active');
            thisCatI = cat.indexOf( thisCat );
            cat.splice(thisCatI, 1);
        } else {
            $(this).addClass('active');
            cat.push( $(this).attr('title') );
        }
        console.log('category__in = ' + cat);
    });
    $('#buttons button.sort').click(function(){
        disableButtons;
        $('button.sort').removeClass('active');
        $(this).addClass('active');
        sort = $(this).attr('title');
        console.log('orderBy = ' + sort);
    });
    $('#buttons button.order').click(function(){
        disableButtons;
        $('button.order').removeClass('active');
        $(this).addClass('active');
        order = $(this).attr('title');
        console.log('order = ' + order);
    });
    resetter.click(function(){
        filters.removeClass();
        cat = [];
        console.log('category__in = ' + cat);
        loadmore.removeClass('active');
    });

    var $content = $('body.blog #main');
    var load_posts = function(){
        $.ajax({
            type       : "GET",
            data       : {
                numPosts:   2,
                pageNumber: page,
                catSlug:    cat,
                orderBy:    sort,
                order:      order,
            },
            dataType   : "html",
            url        : "http://exampledev.com/tester/wp-content/themes/twentyfifteen-child/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    $content.append('<div id="temp_load" style="text-align:center">\
                        <img src="http://exampledev.com/tester/wp-content/themes/twentyfifteen-child/images/ajax-loader.gif" />\
                        </div>');
                }
            },
            success    : function(data){
                $data = $(data);
                if($data.length){
                    $data.hide();
                    $content.append($data);
                    $data.fadeIn(500, function(){
                        $("#temp_load").remove();
                        loading = false;
                    });
                } else {
                    $("#temp_load").remove();
                };
                $('#buttons button').attr('disabled', false);
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    }
    $('#buttons button').click(function() {
        if(!loading) {
            $('#buttons button').attr('disabled', true);
            $('body.blog #main *').fadeOut(500);
            load_posts();
        }
    });
    loadmore.click(function() {
        if(!loading) {
            page++;
            if(Number(page) > 1) {
                disableButtons
                resetter.attr('disabled', false);
            }
            load_posts();
            console.log('page = ' + page);
        }
    });
    load_posts();
});

I set multiple var's at the top, take for example disableButtons this one works in the click handlers before the ajax request, but they DONT work in the ajax request itself. for example, at the end of the success part it is not recognized and I have to use the full $('#buttons button').attr('disabled', false) code as far as I know, am I missing something here? same goes for the two click handler functions below the ajax call, I have to write them out there as well, the disableButtons var does not work

Second question is in my last click handler, for the loadmore var. I've setup an if statement:

if(Number(page) > 1) {
    disableButtons
    resetter.attr('disabled', false);
}

but it does not work.

I need that stuff to disable the buttons at certain moments to avoid for the user to filter while dynamically loading posts with Ajax.

Finally, I would really like to hear what you think of my code, this is just a test example and after (hopefully) some feedback I want to implement it in my websites!

Thanks guys!

1 Answer

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Anybody guys? Dave McFarland, I followed your javascript and Ajax courses prior to this, they were great! can you help me out with this?