Skip to main content
edited tags; edited title
Link
200_success
  • 145.7k
  • 22
  • 191
  • 481

Repetition, tried making it into a function but Ajax response wasn't working AJAX call with repetitive success/failure handlers

Source Link
Desi
  • 193
  • 4

Repetition, tried making it into a function but Ajax response wasn't working

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();
});