admin 管理员组

文章数量: 1086019

I am trying to create a twitter bootstrap button that changes to 'Loading...' when selected until the javascript loads. However I cannot get it to work...

Here is my html:

<button type="submit" id="sign-up" data-loading-text="Processing..." class="btn btn-sign-up">SIGN UP</button>

Javascript: 

<script>
$('#sign-up').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.ajax(...).always(function () {
    btn.button('reset');
    });
});
</script>

I am trying to create a twitter bootstrap button that changes to 'Loading...' when selected until the javascript loads. However I cannot get it to work...

Here is my html:

<button type="submit" id="sign-up" data-loading-text="Processing..." class="btn btn-sign-up">SIGN UP</button>

Javascript: 

<script>
$('#sign-up').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.ajax(...).always(function () {
    btn.button('reset');
    });
});
</script>
  • javascript
  • jquery
  • html
  • twitter-bootstrap
Share Improve this question edited Feb 5, 2014 at 4:56 Ryan Salmons asked Feb 5, 2014 at 4:37 Ryan SalmonsRyan Salmons 1,45910 gold badges23 silver badges43 bronze badges 7
  • Given that this is an almost exact copy of the Bootstrap example code, I'd say you're simply missing a resource (like jQuery or the Bootstrap JS file) or you've literally got $.ajax(...). What does your error console say? – Phil Commented Feb 5, 2014 at 5:02
  • unexpected token which is to be expected. i am just trying to figure out what needs to be done to make this javascript element functional – Ryan Salmons Commented Feb 5, 2014 at 5:07
  • Try to change button type="submit" to type="button".... I think – ℛⱥℐℰşℎ Commented Feb 5, 2014 at 5:41
  • I don'u know if you ever solved this. If not you probly gave up by now but I am almost sure you need to add your quotes, it worked for me when it wasn't working(ie $.ajax('...').always). – Brandon Clark Commented Dec 10, 2014 at 18:16
  • 1 According to the docs, this feature was deprecated in v3.3.5 and removed in v4. – wolfyuk Commented Feb 28, 2018 at 14:08
 |  Show 2 more ments

2 Answers 2

Reset to default 4

As you're using jQuery and bootstrap, you can follow this example on http://jsfiddle/liuyl/RdpRw/1/

$('button[data-loading-text]')
.on('click', function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
});

OBS: see the full sample on the link. Notice the external libraries on the left menu on jsfiddle, you can't forget to reference them.

Not sure if you've already solved your problem. You should place you script inside $(document).ready() callback so that the $("#sign-up") is available when the click event is registered

$(document).ready(function() {
    $('#sign-up').click(function () {
        var btn = $(this);
        btn.button('loading');
        $.ajax(...).always(function () {
            btn.button('reset');
        });
    });
});

Let's try the updated code here http://jsbin./pamujimise/edit?html,output

本文标签： javascriptbootstrap data loading text not workingStack Overflow

版权声明：本文标题：javascript - bootstrap data loading text not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1743987549a2514130.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。