jQuery object literal or module pattern with jQuery plugins

Question

Let's say we have something like this with the jQuery select2 plugin:

$(function() {

  $('.select2').select2({
    minimumInputLength: 1,
    ajax: {
      dataType: 'json',
      cache: true,
      url: getUrl,
      data: getData,
      processResults: getProcessResults
    }
  });

  function getUrl() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  }

  function getData(params) {
    return {
      q: params.term
    };
  }

  function getProcessResults(data) {
    return {
      results: data
    };
  }

});

.select2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<select class="select2"></select>

But we wanna use an object literal or the module pattern for the jQuery feature and plugin like this:

var myAjax = {

  init: function() {
    var _this = this;

    $('.select2').select2({
      minimumInputLength: 1,
      ajax: {
        dataType: 'json',
        cache: true,
        url: _this.getUrl,
        data: _this.getData,
        processResults: _this.getProcessResults
      }
    });
  },

  getUrl: function() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  },

  getData: function(params) {
    return {
      q: params.term
    };
  },

  getProcessResults: function(data) {
    return {
      results: data
    };
  }
  
};

$(document).ready(myAjax.init);

.select2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<select class="select2"></select>

How can we do that?

Sources:

https://learn.jquery.com/code-organization/concepts/

https://select2.github.io/examples.html#data-ajax

Rory McCrossan · Accepted Answer · 2017-01-06 19:08:08Z

1

The issue you have is that this within the init function will refer to the document, as you run it under the document.ready handler. To fix this you can use the myAjax variable directly to call its properties and methods. Try this:

var myAjax = {
  init: function() {    
    $('.select2').select2({
      minimumInputLength: 1,
      ajax: {
        dataType: 'json',
        cache: true,
        url: myAjax.getUrl(),
        data: myAjax.getData,
        processResults: myAjax.getProcessResults
      }
    });
  },
  getUrl: function() {
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM';
  },
  getData: function(params) {
    return {
      q: params.term
    };
  },
  getProcessResults: function(data) {
    return {
      results: data
    };
  }
};

$(document).ready(myAjax.init);

.select2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<select class="select2"></select>

I'd also suggest you change the name of the object as myAjax isn't very semantic given its purpose.

edited Jan 6, 2017 at 19:08

answered Jan 6, 2017 at 16:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

baker Over a year ago

Thanks but it does not work. I have edited the examples. See above.

baker Over a year ago

If I add (). I get: "message": "Uncaught TypeError: _this.getUrl is not a function"

Rory McCrossan Over a year ago

You're right - my mistake. I've corrected the answer for you. The problem is with the scope of this, so you need to use myAjax directly when dealing with its properties and methods.

Collectives™ on Stack Overflow

jQuery object literal or module pattern with jQuery plugins

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related