CODEWITHSUNDEEP
jquery
RegEdit
RegEdit

Reputation: 2162

jQuery disabled form element will not turn back on after $get() operations

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','');

        });

});

Upvotes: 0

Views: 180

Answers (4)

Maktouch
Maktouch

Reputation: 3247

Use .prop().

.attr() is the old way of doing it.

$('button.save').prop("disabled", false);

http://api.jquery.com/prop/#prop2

To differentiate when to use prop or attr, consider this trick: 

<tag anything=value> is an attr
<tag value> is a prop

For example

<input disabled>
<input type="checkbox" checked>
<option selected>

Upvotes: 0

Michael D. Irizarry
Michael D. Irizarry

Reputation: 6302

You can take advantage of http://api.jquery.com/jQuery.when/ So you can do many ajax requests and when they are all done execute what you want.

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
        page1 and page2 ajax requests, respectively */
   var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
   if ( /Whip It/.test(jqXHR.responseText) ) {
      alert("First page has 'Whip It' somewhere.");
   }
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337627

Try either setting the attribute to false:

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

Or removing it:

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

Upvotes: 2

Evan Davis
Evan Davis

Reputation: 36592

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

"disabled" is a boolean attribute, so it's either there (true) or it isn't (false).

Upvotes: 2

Related Questions