AJAX call with repetitive success/failure handlers

Question

There's some repetition in here. I tried making it into a function but then the response wasn't filling up the #project-container div. Is there a way to condense this code to make it more elegant?

// Activate projects
$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel'),
        ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

    function projectShow() {

        // Initiate the Ajax call
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('<span class="loading-icon"><img src="' + site.theme_path +'/img/loading.gif" height="32" width="32" alt="Loading..."></span>').insertBefore($(e.currentTarget));
            },
            success: function(response) {
                $('.loading-icon').remove();

                if ($(window).scrollTop() != 0) {
                    $('html, body').animate({
                        scrollTop : 0
                    },200, function() {
                        $('#project-wrapper').addClass('activated');

                        // Keep the rest of the projects grey while #project-wrapper is activated
                        $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

                        // Load up the response from the Ajax call
                        $('#project-container').html(response);

                        // Make the max-height of the container exact for smoother animations
                        var containerHeight = $('#project-container').outerHeight();
                        $('#project-wrapper.activated').css('max-height', containerHeight);

                        // CSS effects
                        $('.post-container').addClass('fadeInUp');
                        $('.close-button').addClass('fadeInDown');

                        // Remove pesky, sticky 'hover' class
                        $('article').removeClass('hover');

                        // Shuffle letters and update the title of the page
                        $('#project-wrapper .entry-title').shuffleLetters({
                            callback:function(){
                                var title = $(e.currentTarget).closest('#main').find('h1').text();
                                $('head').find('title').text('Keebs | ' + title);
                            }
                        });
                    });
                } else {
                    $('#project-wrapper').addClass('activated');

                    // Keep the rest of the projects grey while #project-wrapper is activated
                    $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

                    // Load up the response from the Ajax call
                    $('#project-container').html(response);

                    // Make the max-height of the container exact for smoother animations
                    var containerHeight = $('#project-container').outerHeight();
                    $('#project-wrapper.activated').css('max-height', containerHeight);

                    // CSS effects
                    $('.post-container').addClass('fadeInUp');
                    $('.close-button').addClass('fadeInDown');

                    // Remove pesky, sticky 'hover' class
                    $('article').removeClass('hover');

                    // Shuffle letters and update the title of the page
                    $('#project-wrapper .entry-title').shuffleLetters({
                        callback:function(){
                            var title = $(e.currentTarget).closest('#main').find('h1').text();
                            $('head').find('title').text('Keebs | ' + title);
                        }
                    });
                }

                return false;
            }
        });
    }

    // The call
    projectShow();
});

Jamal · Accepted Answer · 2015-02-01 09:49:56Z

Here's a shot at it. I don't have a demo environment to test with, so let me know if I had any typos etc. I also wrapped it in a self-executing function to keep things from being in the global scope. If you already have it scoped then the self-executing function is unnecessary.

I pulled out the duplicated code into a function so the code is no longer duplicated. This helps with maintainability and shrinks the file size.

(function() {
    function doWork(event, response) {
        $('#project-wrapper').addClass('activated');

        // Keep the rest of the projects grey while #project-wrapper is activated
        $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

        // Load up the response from the Ajax call
        $('#project-container').html(response);

        // Make the max-height of the container exact for smoother animations
        var containerHeight = $('#project-container').outerHeight();
        $('#project-wrapper.activated').css('max-height', containerHeight);

        // CSS effects
        $('.post-container').addClass('fadeInUp');
        $('.close-button').addClass('fadeInDown');

        // Remove pesky, sticky 'hover' class
        $('article').removeClass('hover');

        // Shuffle letters and update the title of the page
        $('#project-wrapper').find('.entry-title').shuffleLetters({
            callback: function(){
                var title = $(event.currentTarget).closest('#main').find('h1').text();
                $('head').find('title').text('Keebs | ' + title);
            }
        });
    }


    // Activate projects
    $('.post-link').click(function(e) {
        e.preventDefault();

        var post_id = $(this).attr('rel'),
            ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

        // Initiate the Ajax call
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('<span class="loading-icon"><img src="' + site.theme_path +'/img/loading.gif" height="32" width="32" alt="Loading..."></span>').insertBefore($(e.currentTarget));
            },
            success: function(response) {
                $('.loading-icon').remove();

                if ($(window).scrollTop() != 0) {
                    $('html, body').animate({
                        scrollTop : 0
                    }, 200, function() {
                        doWork(e, response);
                    });
                } else {
                    doWork(e, response);
                }

                return false;
            }
        });
    });
})();

Stack Exchange Network

AJAX call with repetitive success/failure handlers

1 Answer 1

You must log in to answer this question.

Hot Network Questions

AJAX call with repetitive success/failure handlers

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions