开发者

Button became disabled after going back in browser history

I have such button:

<button value="1" name="submit" disabled="true" id="signup-bb" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true">

After clicking some radiobutton on that page, "signup-bb" button becaming available

Enabling "signup-bb" button:

        $("signup-bb").removeA开发者_StackOverflowttr('disabled');
        $("signup-bb").attr('aria-disabled', false);
        $("signup-bb").removeClass('ui-button-disabled');
        $("signup-bb").removeClass('ui-state-disabled');

after that my button beaming like that:

<button value="1" name="submit" aria-disabled="false" id="signup-bb" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">

After i clicking this button form getting send to server where after some processing i am redirecting to another controller, all looking good, but then if i am clicking go back browser button i am coming to previous page with the button i made clickable ("signup-bb") but this button in disabled state there:

<button value="1" name="submit" disabled="true" id="signup-bb" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true">

Any thoughts how to fix that, when user click back to display him the state which it was before?


The reason this happens is because when the page first loaded the button was disabled and this is the state at which the page was stored at the browser history. Then you made some changes to the DOM using javascript when a radio button is clicked and enabled the signup-bb button but those changes are not saved to the browser history. When the user clicks the back button the page is loaded from the history at the state it was saved i.e. with the button disabled.


A sort of workaround that I just used to solve this issue is re-enabling the buttons on unload event:

(function ($) {
    // creates the jQuery UI button treatment for all button elements
    $('button').button();
    $(window).unload(function () {
        // re-enables the jQuery UI button treatment on all
        // button elements on the window unload event
        $('button').button('enable');
    });
})(jQuery);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜