jQuery to set the value of a hidden field?

Question

I want to be able to set the value of a hidden field to the value of a rel attribute in a link:

$("#currentDir").val($(".jstree-clicked").attr("rel"));

But this doesn't work. This simpler expression works just fine however:

$("#currentDir").val("TEST");

That sets the hidden field with id = currentDir to the value "TEST". But why doesn't the other expression work?

EDIT:

As pointed out, the element with the class jstree-clicked does not exist when this statement is called. And as I commented below, I assume it needs to go in as a callback. But I don't know where (have tried several places, but none of them work).

Here's the JsTree code:

    <script type="text/javascript">
        var url;
        $(function () { 
            $("#demo2")
            .bind("loaded.jstree", function () { 
              alert($(".jstree-clicked").length); //This works as a callback, but unfortunately the cookie seems to not have been set yet...

                $("a").click(function () {
                    url = "?url=" + $(this).attr("rel");
                    $('#result').load('/Customers/Files/' + encodeURI(url));
                    $('#currentDir').val($(this).attr("rel"));    
                });

            }).jstree({
                "html_data": {
                    "ajax": {
                        "url": "/Customers/Directories/"
                    }
                },
                "ui": {
                    "select_limit": 2,
                    "select_multiple_modifier": "alt",
                    "selected_parent_close": "select_parent"//,
                },
                "themes": {
                    "theme": "classic",
                    "dots": true,
                    "icons": true
                },
                "plugins": ["themes", "html_data", "ui", "cookies"]
            });

    });

    </script>

As you can see, I already have a callback that sets the value of currentDir hidden field on click. But since there will be postbacks also, I'm reloading the page with a cookie plugin that sets the JsTree to the same as before, with jstree-clicked signifying a selected folder. So the click function works fine, and sets the currentDir, but after a postback I need to get in another callback (I assume with the statement I originally asked about here, i.e. after the tree has been created.)

I don't think there's really any point posting html source here as several people asked for, it has the class and everything, but I'll give it just the same, from Firebug:

<a rel="HtmlHelpers" class="jstree-clicked"><ins class="jstree-icon">&nbsp;</ins>HtmlHelpers</a>

The problem appears to be it doesn't have it yet when the function is called. So again, any help with getting the statement in the right place (a callback?) appreciated!

EDIT 2:

Ok, so I got a callback in that actually triggers after the tree is loaded (see addition within the .bind part above with comment). But it appears that even though the tree is loaded (confirmed by an alert box showing the number of a elements), the cookies plugin does not seem to have been run, so the statement I'm after is still useless. The statement I have inserted now is the one suggested in one of the replies, to check if the jstree-clicked a element exists, and it still doesn't. So anyone know how I can get this to be invoked after the cookie has set the jstree-clicked class?

Answer 1

It's nothing to do with setting the value but getting the value from the .jstree-clicked attribute.

Try using this code to see if the element exists:

alert($(".jstree-clicked").length);

If it returns anything other than >= 1 you know the element doesn't exist.

Even if you have more than one element, the .attr() method will return the desired attribute for the firsts known element, so perhaps your .jstree-clicked class exists elsewhere without a rel attribute.

http://api.jquery.com/attr/

Answer 2

After a lot of googling, I finally found the answer. If the cookie option is used one must use this instead at the bind part of the jquery:

.bind("reselect.jstree", function () {

Then the callback doesn't trigger until after the cookie has set the selected item, and it works.