Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot init an object in jquery document.ready

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/

like image 205
londondev Avatar asked May 13 '16 11:05

londondev


People also ask

What is document ready in jQuery?

jQuery ready() MethodThe ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions.

Where do you put document ready?

So technically it doesn't matter where you put it. Many people like putting script in the head, because it makes sure the script is read before the page is loaded. Other people like putting it at the very end (just before the end body tag) so that all of the elements of the page are loaded before the script reads them.

How do I use document ready in JavaScript?

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.

Which of the following is an equivalent replacement of $( document .ready F )?

Which of the following is an equivalent replacement of $(document). ready(f)? Explanation: The equivalent replacement of $(document). ready(f) is $(f).


3 Answers

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>
like image 96
Rory McCrossan Avatar answered Oct 17 '22 07:10

Rory McCrossan


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);  
  });
like image 3
Jayesh Chitroda Avatar answered Oct 17 '22 06:10

Jayesh Chitroda


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;
}
like image 2
Jitendra Tiwari Avatar answered Oct 17 '22 07:10

Jitendra Tiwari