I have the following code that renders a button and has three states. The initial state, the loading state and the success/failure state.
In the following code I have the following view which renders a button and simulates an ajax call. When the "ajax" call is made I want the button to display the message loading, which it does. But once it times-out after 3 seconds I want the button to display a "tick" symbol and the message sent.
How do I get that done?
I'm having trouble inserting the functionality once setTimeout return after 3 seconds.
HTML:
<!-- 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>
<!-- Api call {% include 'HevnlyApiBundle:icons:tick.svg.twig' %} -->
<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>
Backbone view:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $("#test-buttons"),
template: _.template($("#button-test").html()),
events: {
"click #test-container": "sendAjax"
},
_parent: null,
initialize: function(options){
console.log("Started!");
console.log(this.$el);
this._parent = options.parent;
this.render();
},
render: function() {
// sets whatever markup as the HTML content of the el DOM element using the $el property
this.$el.html(this.template());
console.log("rendered");
return this; // A good convention is to return this at the end of render to enable chained calls.
},
removeMsg: function (event) {
$(this.el).find("p").hide();
console.log("Hiden");
},
addMsg: function (event) {
$(this.el).find(".fnshMsg").show();
console.log("Shown");
},
addBlur: function (event) {
this.$el.blur();
},
addSpinner : function () {
console.log("Spinner");
$(this.el).find(".spinner-container").show();
},
sendAjax: function (event) {
console.log("addMsgSuc");
this.removeMsg();
this._parent.onClick();
this.addSpinner();
},
onSuccess: function() {
if (this._parent.onSuccess() === true) {
this.addMsg();
$(this.el).find("#tick").show();
console.log("tick added");
this.addBlur();
}
}
});
// Ajax simulation class
var AjaxPretend = Backbone.View.extend({
_button: null,
initialize: function(){
this._button = new ButtonView({parent: this});
},
onClick: function() {
setTimeout(_.bind(this.onSuccess, this), 3000);
console.log("Onclick Ajax");
},
onSuccess: function() {
this._button.onSuccess();
console.log("Ajax success");
},
onFailure: function() {
this._button.onFailure();
console.log("Ajax failure");
}
})
var T = new AjaxPretend();
});
