javascript - Bootstrap Loading State Ajax Issue -

javascript - Bootstrap Loading State Ajax Issue -

issue getting 'loading' state remain until ajax has received response php script. 'loading' works initially, remains second, disappears, , resets after response. wanting have button remain "loading..." until php script finished.

html:

class="lang-html prettyprint-override"><button type="button" class="btn btn-outline btn-info" id="parse_all" data-loading-text="loading..."> <i class="glyphicon glyphicon-refresh"></i> <span>parse data</span> </button> <div id="parse_resp"></div>

javascript:

class="lang-js prettyprint-override">$('#parse_all').click(function() { var btn = $(this) btn.button('loading'); $.ajax({ type: "get", url: "parse_all.php", datatype: 'html', success: function(response){ btn.button('reset'); $("#parse_resp").html(response); } }); });

the bootstrap loading state seems not working on buttons "btn-outline" class. solution: remove "btn-outline" class.

javascript jquery ajax twitter-bootstrap