jQuery data() returns undefined

I use jQuery data() to store meta data, but it seems jQuery 1.4.4 and 1.4.3 both have problems. Some parts work and some other parts do not work.

For instance, I have

const UimConst = {
    NODE_OBJECT: "nodeObject",
    CHILDREN: "children",
    PARENT: "parent",
    SID: "sid",
    COUNT: "count",
    EXCLUDE: "exclude",
    PARENT_COUNT: "pcount",
    HEIGHT: "UimHeight"
};

Workspace.prototype.findAncestor = function(element){
    if(this.ancestor == null){
        this.ancestor = $(element);
        this.ancestor.data(UimConst.HEIGHT, 0);
    } else {
...

}

where element is the DOM element. Then, I get the value I stored as follows,

var height = this.ancestor.data(UimConst.HEIGHT);
logger.debug("Current UI module height " + height);

unfortunately, the return value is undefined.

To further trace the problem, I changed the code to be

if(this.ancestor == null){
    this.ancestor = $(element);
    this.ancestor.data(UimConst.HEIGHT, 0);
    logger.debug("After set the ancestor height, the value is " +   this.ancestor.data(UimConst.HEIGHT));
} else {

The return value in the log is "undefined" as well. Really frustrated.

I used data() in some other places and they worked fine. Not sure what happened. Any hints?

The project is here if anyone wants to take a look:

http://aost.googlecode.com/svn/trunk/tools/tellurium-ide.

Just do subversion check out and run the following command:

mvn install

and then install the generated .xpi file to Firefox.

After that, you can open the Tellurium IDE Firefox plugin and JavaScript debugger Firefox plugin to track the execution.

For this problem, go to workspace.js and set a breakpointer at the beginning of the findAncestor() method.

开发者_StackOverflow中文版More details about Tellurium IDE is here:

http://code.google.com/p/aost/wiki/TelluriumIde080RC1

Thanks in advance,

John

This would happen if element were null, or a string that did not match any elements in the document.

$(element).data(key, value) does nothing if $(element).length == 0.

jQuery also silently refuses to store data on certain elements (embed, applet, and any object except Flash), but that doesn't seem to be your problem.

Update: If this is Firefox add-on code trying to operate on elements in a Web page, it's no big surprise to me that it doesn't work. Elements behave just a bit differently when used from an add-on, so libraries (like jQuery) that work great in normal web pages can fail to work in add-ons.

Update 2: My new advice is to use a development version of jQuery, such as http://code.jquery.com/jquery-latest.js , and step through the data method in the debugger. The interesting parts happen in jQuery.data, which is just over 40 lines long:

data: function( elem, name, data ) {
    [...]

    var isNode = elem.nodeType,
        id = isNode ? elem[ jQuery.expando ] : null,
        cache = jQuery.cache, thisCache;

    if ( isNode && !id && typeof name === "string" && data === undefined ) {
        return;
    }

    // Get the data from the object directly
    if ( !isNode ) {
        cache = elem;

    // Compute a unique ID for the element
    } else if ( !id ) {
        elem[ jQuery.expando ] = id = ++jQuery.uuid;
    }

    // Avoid generating a new cache unless none exists and we
    // want to manipulate it.
    if ( typeof name === "object" ) {
        if ( isNode ) {
            cache[ id ] = jQuery.extend(cache[ id ], name);

        } else {
            jQuery.extend( cache, name );
        }

    } else if ( isNode && !cache[ id ] ) {
        cache[ id ] = {};
    }

    thisCache = isNode ? cache[ id ] : cache;

    // Prevent overriding the named cache with undefined values
    if ( data !== undefined ) {
        thisCache[ name ] = data;
    }

    return typeof name === "string" ? thisCache[ name ] : thisCache;
},

Pasting your code in jslint will help. You can get lots of good hints there.

The const declaration doesn't work with every browser, so changing it to var is a tip.

But there isn't enough code to do very much.

Look at these tips on the Javascript module design pattern you're using for further help.

you must connect your js and jquery files at the end of Html tag.Like this -->

<html>
<head>
</head>
<body>
    <!--your body code goes here-->
    <script src="jquery"></script>
    <script src="js"></script>
</body>
</html>