Cannot init an object in jquery document.ready

Question

I have an javascript object named concept:

function concept() {
    this.ConceptId = 0;
    this.Name = "";
}

I am trying to initiate it in jQuery document.ready:

$(document).ready(function() {
    var concept = new concept;
});

It returns an error:

Uncaught TypeError: concept is not a constructor

If I move the object inside the document.ready, it is working.

$(document).ready(function() {
    function concept() {
        this.ConceptId = 0;
        this.Name = "";
    }
    var concept = new concept;
});

I am still new on javascript, as far as I understood document.ready is run when DOM is completed. I don't understand why it cannot access the object which is defined out of the document.ready scope.

Here it is the fiddle: https://jsfiddle.net/49rkcaud/1/

score 4 · Accepted Answer · answered May 13 '16 at 11:24

4

The issue is because you're redefining concept. You just need to change the name of the variable:

$(document).ready(function() {
    var foo = new concept; // change the variable name here
    alert(foo.ConceptId); // = 0
});

function concept() {
    this.ConceptId = 0;
    this.Name = "";
}

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

answered May 13 '16 at 11:24

Rory McCrossan

331,213
40
305
339

I think execution of function is also necessary like `new concept()` or not? – Mohammad Usman May 13 '16 at 11:33
1

Parentheses are optional when using the `new` keyword. – Rory McCrossan May 13 '16 at 11:34
got it, appreciated also) – Mohammad Usman May 13 '16 at 11:35
1

Why the downvote? Is a working example and explanation of the problem not enough? – Rory McCrossan May 13 '16 at 11:37
And the other answer isn't even thought your answer explain the why. SO is sometimes strange... – A. Wolff May 13 '16 at 11:39
@londondev no problem, glad to help – Rory McCrossan May 13 '16 at 11:41

score 3 · Answer 2 · answered May 13 '16 at 11:30

3

Try this:

Jsfiddle: https://jsfiddle.net/3w284mcs/

  $(document).ready(function() {
    var concept = function() {
      this.ConceptId = 0;
      this.Name = "";
    }

    var concept_obj = new concept();
    alert(concept_obj.ConceptId);  
  });

answered May 13 '16 at 11:30

Jayesh Chitroda

4,987
13
18

1

I know this is working, but I don't want to define my concept object in the jquery scope as it is messy. – londondev May 13 '16 at 11:42

Jitendra Tiwari · Answer 3 · 2016-05-27T09:51:55.123

2

You just need to change variable name where call this function.

Answer

  $(document).ready(function() {
    /*function concept() {
            this.ConceptId = 0;
            this.Name = "";
          }*/

    var concept1 = new concept;
    alert(concept1.ConceptId);  
  });

  function concept() {
    this.ConceptId = 5;
    this.Name = "";
  }

Better Approach

You should create object of function using ()

var objConcetp = new concept();

Also use constructor rather than directly assigning values. Your function look like:

$(document).ready(function(){
   var oConcept = new concept(1, "YourName");
});

function concept(conceptId, name){
   this.ConceptId = conceptId;
   this.Name = name;
}

edited May 27 '16 at 09:51

answered May 13 '16 at 11:40

Jitendra Tiwari

1,651
3
14
28

1

2 answers have solved the problem with good explanation. you haven't added anything new.. – Mohammad Usman May 13 '16 at 11:43
Yes I'm little bit late to answer trying to explain both option :) – Jitendra Tiwari May 13 '16 at 11:44
np, you have answered correctly, so upvote is yours :) – Mohammad Usman May 13 '16 at 11:46

Cannot init an object in jquery document.ready

3 Answers3