Question

In the code branch below, when the “my_theme” select menu is changed, I’m making a few $get calls to the server to retrieve the selected theme’s default color options and preview images. During this process, to avoid the user clicking the “Apply Changes” button before the colors are loaded, I’m setting that button to disabled, then resetting it after the operation is done.

However, on one installation, something is apparently failing and the button stays disabled (even though there is no apparent error in the get operations).

How might I better structure this to renable the submit button after the gets are all done?

$('#my_theme').change
(
    function()
    {
        $("#largePreview").hide();
        var myImage = $('#my_theme :selected').val();
        var thisOption = $(this);
        $('.selectedImage img').attr('src','<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/screenshot.jpg');
        $('.selectedImage img').attr('alt',myImage);

        try{
            $('button.save').attr('disabled','disabled');
            $.get('<?php echo get_bloginfo('template_directory') ?>/color.php', {theme: myImage, spot: '1'}, function(data){doColor('#my_theme_header_color', data);});
            $.get('<?php echo get_bloginfo('template_directory') ?>/color.php', {theme: myImage, spot: '2'}, function(data){doColor('#my_theme_sidebar_color', data);});
            $.get('<?php echo get_bloginfo('template_directory') ?>/color.php', {theme: myImage, spot: '3'}, function(data){doColor('#my_theme_spot_color_alt', data);});
            $.get('<?php echo get_bloginfo('template_directory') ?>/color.php', {theme: myImage, spot: '4'}, function(data){doColor('#my_theme_spot_color_alt2', data);});
            $.get('<?php echo get_bloginfo('template_directory') ?>/color.php', {theme: myImage, spot: '5'}, function(data){doColor('#my_bg_attach_color', data);});
        }
        catch(e){
            $('button.save').attr('disabled','');
        }
        $.get('<?php echo get_bloginfo('template_directory') ?>/get-image.php', {template: myImage, action: 'background'}, function(data){
            if(data){$('#currentBackgroundImage').attr('src','<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/background.png');}
            else{$('#currentBackgroundImage').attr('src','<?php echo get_bloginfo('template_directory') ?>/background-missing.png');}
        });

        $.get('<?php echo get_bloginfo('template_directory') ?>/get-image.php', {template: myImage, action: 'header'}, function(data){
            if(data){$('#currentHeaderImage').attr('src','<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/header.png');}
            else{$('#currentHeaderImage').attr('src','<?php echo get_bloginfo('template_directory') ?>/header-missing.png');}

            $('button.save').attr('disabled','');

        });

});

Answer 1

Try either setting the attribute to false:

$('button.save').attr('disabled', false);

Or removing it:

$('button.save').removeAttr('disabled');