Javascript singleton class isn't getting values from DOM attributes?

Question

The data attributes are set using jinja rendered by Django. When I try to access the data-url attrib the value is assigned to the class's URL object.

I have two issues with this code. Firstly, When I try to access data-default attribute it returns null or undefined value. Secondly, when I try to assign response from the ajax call to the this.data it is not getting assigned.

Below is my code

    <select id="value" data-url="api/values" data-default="1">
</select>

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   this.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (this.default==value.id){        //Error here this.default is always undefined 
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

There is no such thing as a "singleton class". [Don't ever use `new function() { … }`!](https://stackoverflow.com/questions/10406552/is-it-right-to-think-of-a-javascript-function-expression-that-uses-the-new-key-as-static) — Bergi, Jun 03 '18 at 14:39
@Bergi You are saying there are no such as singleton class in javascript? Well, when I researched about classes I ended up creating one of these. Should I consider this is just a global variable which can be considered as singleton approach but in turn, it isn't for the real definition of the singleton class? — Shahabaz, Jun 03 '18 at 22:39
No reason to make a global variable, your `var value = …` isn't one either. You just should use a simple object literal instead of that `new function` syntax. — Bergi, Jun 04 '18 at 09:41

Ahmed Nour Eldeen · Answer 1 · 2018-06-03T12:55:14.553

You have two different scopes so you need to do as the following:

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    var outerScope = this;
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   outerScope.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (outerScope.default==value.id){        
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

Javascript singleton class isn't getting values from DOM attributes?

1 Answers1