Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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