how to call function assign in a variable in jquery

Question

I declare a function and assigned it to a Variable, inside the function was other functions. Normally, at first load of the page it loads the functions etc. When i used the variable in an ajax success callback, it says that the init() function is not a function.

This is my sample jquery function assigned to a variable called GRID:

    var Grid = (function() {
       function init( config ) { ... }
         .
         .
         .
       function addItems( $items ) { ... }
      return { init: init, . . . addItems: addItems }
    }

();

and i have a this ajax call

     function updateItems{
      .
      .
      .
      .
       jQuery.ajax({

            type: 'get',
            url:  ajaxURL,
            data: ajaxData,
            dataType: 'json',

            //Ajax call is successful
            success: function ( response ) {
                //Add new posts
               Grid.init();

            },
            error: function () {

            }
        });
        .
        .
        .
        }

What's wrong with the codes? why would the Inspector returns an error that says Grid.init() is not a function? please help

Grid is not a function, nor an object, the function looks like it's an IIFE, otherwise why does it start with a parentheses, that returns undefined unless you explicitly return something, and you can't call that function later on — adeneo
– adeneo, Commented Feb 19, 2016 at 18:49
is var Grid declared in the same scope (containing function, or global scope) as updateItems? — Billy Moon
– Billy Moon, Commented Feb 19, 2016 at 18:56
var Grid is declared as global scope and also updateItems. @billy what's wrong with my code? — karlo jay bueno
– karlo jay bueno, Commented Feb 19, 2016 at 18:58
do you call your grid function whilst defining it... var Grid = (function() { ... })(); <~~ note the calling braces — Billy Moon
– Billy Moon, Commented Feb 19, 2016 at 19:00
Yes. I have the () braces in my codes. I'll edit the question. I totally spaced out putting the question. I have it in my codes, at first load it is working, but when the ajax is called, it won't init the Grid again. @billy — karlo jay bueno
– karlo jay bueno, Commented Feb 19, 2016 at 19:02

Billy Moon · Accepted Answer · 2016-02-19 18:50:34Z

3

var Grid = (function() {
   function init( config ) { ... }
     .
     .
     .
   function addItems( $items ) { ... }

   // explicitly return the functions, or properties you want to be attached to `Grid`
   return {
       init: init,
       .
       .
       .
       addItems: addItems
   }
// assuming you want this to be immediately invoked function expression
})();

answered Feb 19, 2016 at 18:50

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

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

2 Comments

karlo jay bueno Over a year ago

Sorry, i forget to add the part for the return.

karlo jay bueno Over a year ago

I have the return in my var grid, edited the question.

Gabs00 · Accepted Answer · 2016-02-19 18:50:25Z

0

You defined init inside of the scope of the iife, but do not add it as a function of Grid.

you should do

Grid.init = function(){}

answered Feb 19, 2016 at 18:50

Gabs00

1,8771 gold badge13 silver badges12 bronze badges

Comments

Antonio Gonzalez · Accepted Answer · 2016-02-19 19:06:56Z

0

try it like this

var Grid = {
   init  : function( config ) { ... }
     .
     .
     .
   addItems : function( $items ) { ... }
}

you should define init as a property inside Grid and the value of that property is the return of the function, hope it helped

answered Feb 19, 2016 at 19:06

Antonio Gonzalez

508 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

I tried to replicate your case there : JSFiddle

The Grid :

var Grid = (function() {
  function init(config) {
    console.log('--- INIT')
  }
  
  function addItems($items) {
    console.log('--- ADD ITEMS')
  }
  
  return { init: init, addItems: addItems };
})();

Then the function with the Ajax Call :

function updateItems() {
  jQuery.ajax({
      type: 'get',
      url:  ajaxURL,
      dataType: 'json',
      success: function(response) {
         Grid.init();
         Grid.addItems();
      }
  });
}

And I call this function :

updateItems();

Everything is fine for me. The console outputs :

--- INIT

--- ADD ITEMS

Can you spot a difference with your code ?

Are you sure Grid is global or in the same scope as updateItems ?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 19, 2016 at 21:59

OxyDesign

7545 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to call function assign in a variable in jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related