Question

I’m using a Twitter Bootstrap Button JS, Stateful button part.

Everything works as expected, but sometimes when button is clicked – it “blocks” form submit event. Then form is not submitted and button is not changed back to enabled.

Basically at the end I get not submitted form and disabled button.

What is wrong?

Markup – nothing special here, just some wicket markup:

<button class="btn btn-primary" wicket:id="submit" type="submit">
    <i class="icon-white icon-ok"></i>&nbsp;<wicket:message key="label"/>
</button>

And button class. Just appending attributes required for JS to work and executing script when page is loaded:

public class StatefullButton extends Button {

    public StatefullButton(String id, IModel<String> loadingText) {
        super(id);
        setOutputMarkupId(true);
        add(AttributeModifier.append("data-loading-text", loadingText));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.renderJavaScriptReference(BootstrapButtonPluginResourceReference.get());
        response.renderOnDomReadyJavaScript("$('#" + this.getMarkupId() + "').button();");
        response.renderOnDomReadyJavaScript("$('#" + this.getMarkupId() + "').click(" +
            "function(){" +
                "var btn = $(this) \n" +
                "btn.button('loading')" +
            "})");
    }
}

Answer 1

I could not solve the problem using button, but found workaround using SubmitLink and overriding getTriggerJavaScript like this.

@Override
protected String getTriggerJavaScript(){
    String script = super.getTriggerJavaScript();
    String loadingScript = "$(this).button('loading');";
    return loadingScript + script;
}