javascript oop multiple classes

Question

Hi Im having problems with javascript! i have main.js and Model.js. Model.js is a javascript oop class in need to access its functions in main.js how do i do that? I keep getting an error that Model is not defined. Are there tools needed for this to work or something is wrong in the code?

Model.js

Model = {};   

Model.init = function() {
    alert("model");
}

Model.getList = function(){
var list;
$.ajax(
    { 

    url:'???',
    type: 'GET',
    dataType: 'json',

    success: function(data)
    {
    list=data;
    }
    error: function(data)
    {
    alert("error");
    }
    });
    return list;
}

main.js

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    var testins=new Model();
    var list=Model.getList();

    alert("result: "+testins); 
}

I really could use some help.

so I tried MrCode approach and for experimental reasons put the code in one file because main.js still could not access the Model.js file.

main.js

 document.addEventListener("deviceready", onDeviceReady, false);

 function onDeviceReady() {
     alert("aaa"); //first

    var testins=new Model();
    var list=testins.getList(); 

    alert("result: "+testins); // third

    alert("list"+list); //fourth
     }

    function Model()
    {
    this.init = function()
    {
        alert("Model");
    }
    this.getList = function()
     {
      var list;
      $.ajax(
          { 

          url:'??',
          type: 'GET',
          dataType: 'json',

          success: function(data)
          {
          list=data;
          alert("success"+list);  //fifth
          },
          error: function(data)
          {
          alert("error");
          }
          });
      alert("success"+list);  //second
          return(list);
    }
   }

but following the alerts i see the that the $.ajax part is done last.

What do you mean "following the alerts I see the ajax is done last"?? Your alert with the ajax data is last so will always show last. The call happens after the aaa alert but the result may not be retrieved for some time after that depending on the server. — MrCode
– MrCode, Commented Sep 27, 2012 at 10:58

Denys Séguret · Accepted Answer · 2012-09-27 07:33:55Z

2

Do

function Model() { // this is the "constructor"
}

And replace

Model.init = function() {

by

Model.prototype.init = function() { // provide the function to all instances

(and the same for getList)

This will enable

you to call new Model()
the init function to be inherited by the objects you create with new Model().

Use it like this :

var testins=new Model(); // create an instance
var list=testins.getList(); // call the instance method

You may be interested by this MDN document about prototype and inheritance.

edited Sep 27, 2012 at 7:33

answered Sep 27, 2012 at 7:18

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

4 Comments

HellOfACode Over a year ago

did as you said but sill i get an error "Web Console(6382): Uncaught TypeError: Cannot call method 'getList' of undefined at file:///asset/www/jquery/main.js:40 "

Denys Séguret Over a year ago

Did you really call testins.getList() (and not Model.getList()) ?

HellOfACode Over a year ago

really. i have added the scripts in the order so main would be last and made the changes to model.js as well as main.js but still get the error.

Denys Séguret Over a year ago

You have other problems in your code. Read that

MrCode · Accepted Answer · 2012-09-27 07:21:53Z

0

function Model()
{
    // define public methods
    this.init = function()
    {
        alert("Model");
    }

    this.getList = function()
    {
        var list;
        $.ajax(
            { 

            url:'???',
            type: 'GET',
            dataType: 'json',

            success: function(data)
            {
            list=data;
            }
            error: function(data)
            {
            alert("error");
            }
            });
            return list;
    }
}

var testins = new Model(); // create an instance of Model()
var list = testins.getList(); // call its method

answered Sep 27, 2012 at 7:21

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

2 Comments

HellOfACode Over a year ago

Tried your approach but i had problems because every time i try it the $.ajax is done last so the list is empty

MrCode Over a year ago

Sounds like a problem with your logic or ajax call rather than the OOP design. Post your updated code and I'll take a look.

Collectives™ on Stack Overflow

javascript oop multiple classes

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related