I am struggling with incorporating a button that has three states - initial, loading, and success/failure - into my code. Specifically, I want the button to display a "tick" symbol and a success message after a timed-out ajax call.
The HTML code below shows the button template and structure:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<div id="test-buttons">
<script type="text/template" id="button-test">
<div id="test-container">
<button class="cta-ajax">
<p class="srtMsg">send message</p>
<p class="fnshMsg" style="display: none">sent</p>
<div class="spinner-container" style="display: none">loading</div>
<span id="tick" style="display: none"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -3 24 24" class="icn-tick">
<path fill="#4D4E52" d="M19.4,4.1c-0.2-0.2-0.5-0.2-0.7,0l-9.1,8.8L5.3,8.7c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l4.6,4.5
l0,0l0,0c0.2,0.2,0.5,0.2,0.7,0l9.4-9.1C19.5,4.5,19.5,4.3,19.4,4.1z"></path>
</svg></span>
</button>
</div>
</script>
</div>
</body>
</html>
Below is my Backbone view code:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// Code for ButtonView
});
var AjaxPretend = Backbone.View.extend({
// Code for AjaxPretend
})
var T = new AjaxPretend();
});