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, Sep 27 '12 at 10:58

Denys Séguret · Answer 1 · 2012-09-27T07:33:55.193

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 '12 at 07:33

answered Sep 27 '12 at 07:18

Denys Séguret

372,613
87
782
758

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 " – HellOfACode Sep 27 '12 at 08:49
Did you really call `testins.getList()` (and not `Model.getList()`) ? – Denys Séguret Sep 27 '12 at 09:02
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. – HellOfACode Sep 27 '12 at 09:07
You have other problems in your code. [Read that](http://stackoverflow.com/questions/12475269/variable-doesnt-get-returned-jquery) – Denys Séguret Sep 27 '12 at 09:14

score 0 · Answer 2 · answered Sep 27 '12 at 07:21

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 '12 at 07:21

MrCode

63,975
10
90
112

Tried your approach but i had problems because every time i try it the $.ajax is done last so the list is empty – HellOfACode Sep 27 '12 at 08:50
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. – MrCode Sep 27 '12 at 08:52

javascript oop multiple classes

2 Answers2