How to receive back the data via ajax call in my modular js structure?

Question

Its a very basic java-script with modular structure, basically what I'm trying to do is , requesting a random quote via an API, printing them on the HTML page via Mustache.js. Earlier without using the modular structure way, I managed to accomplish this task, but I wanted to try the modular way too.

The problem i'm facing now is that whenever i try to render my data (i.e quote + author) , I recieve an error on my console that the function is not defined.

Please check my code ~

        (function (){
      var quoting ={
        quotei : [],
        template : $("#quoteTemplate").html(),
        init: function (){
          this.cacheDom();
           this.bindEvents();
          this.createQuote();
          this.recieve();
          this.renderx();

        },

        cacheDom: function(){
          this.$el = $('#quotez');
          this.$button = this.$el.find('button');
          this.$template = this.$el.find('#quoteTemplate').html();

        },

        bindEvents: function(){
          this.$button.on('click',this.createQuote.bind(this));

        },

        renderx: function(data){

            this.$el.html(Mustache.render(this.template,data));

          },

        createQuote: function(){

        $.ajax({
           url:'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
           type:'GET',
           data:{},
           dataType:'json',
           success : function(data){;
               this.render(data)

            },
           beforeSend: function(xhr){
             xhr.setRequestHeader("X-Mashape-Authorization","cvkQkHJurZmshuIhXxwXzIjBchHVp1yk0rDjsnNambAJ9duu7v");
             }
            });

          }, 

      };
      quoting.init();

      })()

Please help me out and pardon for any mistakes , as this is my first time posting on StackOverflow.

Two things to check out--in your success function you call `this.render()` but it is spelled `renderx()` before that...a mistake most likely? Also, keep in mind that inside the `success` hander, `this` refers to the `xhr` object, not your outer function. You would need to bind the appropriate `this` for it to work. — mherzig, Sep 06 '16 at 21:59

score 2 · Accepted Answer · edited Sep 06 '16 at 23:17

Here is the refactored code

Working Demo: here Output: [object Object] { author: "Martin Luther King Jr.", category: "Famous", quote: "In the End, we will remember not the words of our enemies, but the silence of our friends." }

Code:

(function ($) {

  function quoting() {

    this.quotei = [];
    this.template = $("#quoteTemplate").html();
    this.init();
  }

  quoting.prototype = {
    init: function () {
      this.cacheDom();
      this.bindEvents();
      this.createQuote();
      //this.recieve(); 
      //this.renderx(); 
    },

    cacheDom: function(){
      this.$el = $('#quotez');
      this.$button = this.$el.find('button');
      this.$template = this.$el.find('#quoteTemplate').html();
    },

    bindEvents: function(){
      this.$button.on('click', this.createQuote.bind(this));
    }, 

    renderx: function(data) {
        console.log(data);
        //this.$el.html(Mustache.render(this.template,data));
    },

    createQuote: function(){
    var self = this;
    $.ajax({
       url:'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
       type: 'GET',
       dataType: 'json',
       beforeSend: function(xhr) {
         xhr.setRequestHeader("X-Mashape-Authorization","cvkQkHJurZmshuIhXxwXzIjBchHVp1yk0rDjsnNambAJ9duu7v");
       }
     }).done(function(data) {
          self.renderx(data);
    })

   } 

  };

var myQuote = new quoting();

})(window.jQuery);

You should explain what the problem was in addition to making code changes, they won't be obvious unless you have seen the problem before — Ruan Mendes, Sep 06 '16 at 23:56
Can you explain what the changes were, since the code is working perfectly. — Saurav Tiru, Sep 07 '16 at 03:16
@SauravTiru: there were multiple problems with the code. First init() method this.recieve(); - this methode was undefined, so commented the code this.renderx(); - this methods needs to be called when ajax call is successful so commented out as well. Second: `this` be careful when you deal with this magic keyword, its scope is limited inside the function. Ajax success method - scope of the `this` was changed to ajax callback. so first I cached it createQuote: function(){ var self = this; }); Third: Minor: Changed the code from literal object to a factory pattern — Waseem Siddiqui, Sep 07 '16 at 08:15

How to receive back the data via ajax call in my modular js structure?

1 Answers1