Simulating Ajax call

Question

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();

});

Answer 1

Got it!.

All I had to do was replace

if (this._parent.onSuccess() === true)

in my onSuccess function with

if (this._parent.onSuccess)

and it worked!

Simulating Ajax call

Question

1 answers

solution1
0 2014-10-22 13:45:29

Simulating Ajax call

Question

1 answers

solution1 0 2014-10-22 13:45:29

solution1
0 2014-10-22 13:45:29