1

I am trying to access an html element's prototype through jQuery's .data() function. So far I am very confused.

This is my code:

// start prototype definition for myWidget
var myWidget = function() { 
    console.log('my widget is alive.');
    return this; 
};

myWidget.prototype.chosenSelect = [];

myWidget.prototype.init = function() {
    this.chosenSelect = $('#chooseMe');

    // test 1
    console.log(this.chosenSelect.data());

    // test 2
    console.log(this.chosenSelect.data('chosen'));

    // test3
    console.log(this.chosenSelect.data('Chosen'));

    // test4
    var chosenObject = this.chosenSelect.data();
    console.log(chosenObject.chosen);
};

Test 1 from above returns an object that I was able to look through using Chrome devtools. The object looks like this:

Object
    chosen: Chosen
        changeCallbacks: Array[0]
        etc
        etc
        etc

I want to access the chosen object in that data object. but tests 2 through 4 all return undefined. What could I be doing wrong?

Edit

The prototype is being added to the element from another library. This is an excerpt where the assignment occurs:

Chosen.prototype.init = function(select, zidx, isIE7) {
this.select = select;
this.select.data('chosen', this);
quakkels
  • 11,676
  • 24
  • 92
  • 149
  • What is `#chooseMe`? Does it have data attached to it? – gen_Eric Oct 15 '12 at 21:58
  • Yes it should. Another library is operating on a select html element giving it the chosen prototype. See in `// test 1` it returns a data object with `chosen: Chosen` in it. – quakkels Oct 15 '12 at 21:59
  • 1
    Where do you run `$('#chooseMe').data('chosen', ...)`? – Blender Oct 15 '12 at 22:10
  • @Blender: I assign `$('#chooseMe')` to `this.chosenSelect`. Then I run `this.chosenSelect.data('chosen');` in `// test 2`. – quakkels Oct 15 '12 at 22:15
  • @Blender: I understand what you mean, please see edit. – quakkels Oct 15 '12 at 22:20
  • @quakkels: And when do you create that `Chosen`? – Bergi Oct 15 '12 at 22:43
  • possible duplicate of [console.log object at current state](http://stackoverflow.com/questions/7389069/console-log-object-at-current-state) – Bergi Oct 15 '12 at 22:48
  • 1
    DOM elements are host objects, and host objects don't have to implement any kind of inheritance, much less prototype inheritance. There are browsers in use that don't. You can access an object's internal `[[Prototype]]` property (if it has one) in some browsers using the Mozilla proprietary [`__proto__`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto) property or perhaps using `object.constructor.prototype`, but that may not be the correct object. – RobG Oct 15 '12 at 22:54
  • @RobG: `// test 1` from my post shows that the data object has `chosen` in it. My question is really how to access that `chosen object`. `// test 2` through `// test 4` all show undefined. – quakkels Oct 16 '12 at 13:19
  • What happens if you access it like "this.chosenSelect.data().chosen"? – user1378730 Oct 18 '12 at 10:14
  • See `// test 4`. It returns undefined. – quakkels Oct 18 '12 at 14:22

1 Answers1

1

You can access the data object as follows. Here's a working example.

// Set some data on the widget.
jQuery.data($('#chooseMe')[0], "Chosen", {chosen: "Hello!"});

var myWidget = function() {
    console.log('my widget is alive.');
    return this;
};

myWidget.prototype.chosenSelect = [];

myWidget.prototype.init = function() {
    this.chosenSelect = $('#chooseMe')[0];

    // test 1
    console.log(jQuery.data(this.chosenSelect));

    // test 2
    console.log(jQuery.data(this.chosenSelect, "Chosen"));

    // test3
    console.log(jQuery.data(this.chosenSelect, "Chosen").chosen);

    // test4
    var chosenObject = jQuery.data(this.chosenSelect, "Chosen");
    console.log(chosenObject.chosen);
};


myWidget.prototype.init();
Greg Ross
  • 3,479
  • 2
  • 27
  • 26