Saving a local data in a JQuery function

Question

I want to create two JQuery functions. One of which will use the data created in the other function. Say:

jQuery.fn.myScroller = function (child) {
    var $moveable = this.children(child);
    var $children = this.children(child).children();

    posl = posl.replace('px', '');
    post = post.replace('px', '');
    var varList = [];
    $children.each(function () {
        var currVar = {};
        currVar.w = $(this).width();
        varList.push(currVar);
    });
    // I want to save varList variable somehow.
    this.varList = varList; // (1)
};

jQuery.fn.scrollUnitLeft = function () {
    // Now I need to use this varList if this function called
    // But the following returns undefined.
    // However, I've saved it inside this at (1)
    console.log(this.varList)
// More code...
}


$('#main_div').myScroller("#dummydiv");
$('#main_div').scrollUnitLeft();

As I explained in comments in the code, this doesn't work.

How can I do this?

So, if I understand correctly you aren't actually required to have those two jQuery functions. You may use just one, right? — Alexander
– Alexander, Commented Jan 16, 2013 at 17:46

Ingo Bürk · Accepted Answer · 2013-01-16 17:49:39Z

1

Creating a namespace or global variable as suggested doesn't look clean to me. You're already extending jQuery, so make it a jQuery variable:

jQuery.fn.varList = varList;

Edit: I don't really know the jQuery internals. If fn is meant to be for functions only, either put it into jQuery itself or write a getter

jQuery.fn.getVarList = function () {
    return varList;
}

answered Jan 16, 2013 at 17:49

Ingo Bürk

20.2k7 gold badges72 silver badges103 bronze badges

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

1 Comment

Ingo Bürk Over a year ago

Maybe one thing to watch out for is not to overwrite existing functions. For that a namespace is useful -- I just don't like putting it into the global window context. Plus, after all, your functions aren't in a special namespace either.

Martín Valdés de León · Accepted Answer · 2013-01-16 18:02:06Z

When you run your jQuery functions, this refers to the jQuery object instance used in each case.

In your code you create two jQuery object instances (one for every $(...) call), so the data is set in the first instance, and hence not available to the second instance.

If you were to run both your methods on the same jQuery object instance, they would work as expected.

jQuery.fn.mySet = function(){
  this.myVar = this.attr('id');
};

jQuery.fn.myGet = function(){
  console.log(this.myVar);
}

$('#a_div').mySet();
$('#a_div').myGet(); // outputs 'undefined'

var $other_div = $('#other_div');
$other_div.mySet();
$other_div.myGet(); // outputs 'other_div'

To achieve what you intend, you have to persist the data someplace other than the jQuery object instance. jQuery offers a way to do this via the .data() method. This method allows you to attach data to DOM elements. Check its documentation.

jQuery.fn.myRealSet = function(){
  this.data('myVar', this.attr('id'));
};

jQuery.fn.myRealGet = function(){
  console.log(this.data('myVar'));
}

$('#final_div').myRealSet();
$('#final_div').myRealGet(); // outputs 'final_div'

You can test this snippets here: http://jsfiddle.net/HPjYn/

EDIT: I cannot yet comment on other people's answers, but adding a jQuery prototype varable as suggested will make the data available from any jQuery object instance, which I don't think is what it's intended here.

marteljn · Accepted Answer · 2013-01-16 17:47:26Z

0

You can create a namespace at the global scope:

window.yourNamespace = {};

and then put your varList variable in that namespace:

yourNamespace.varList = []; //Whatever you want here

This way the variable will be available to both of your functions (or any function for that matter).

answered Jan 16, 2013 at 17:47

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Comments

Rutwick Gangurde · Accepted Answer · 2013-01-16 17:48:47Z

0

Your understanding of this looks a little buggy to me (pardon me, you may be a lot more experienced than me)! this refers to the caller of the function. Both the times it is the div main_div. Try using a global variable which is declared outside both the functions or use data attribute on the div in the first function, and access that value in the second.

answered Jan 16, 2013 at 17:48

Rutwick Gangurde

4,93212 gold badges56 silver badges91 bronze badges

Collectives™ on Stack Overflow

Saving a local data in a JQuery function

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related