Value set using jquery.data() for newly created node, not accessible in another method - returns undefined!

Question

I create a new 'li' in the HTML document and after completing the AJAX request (after sending the form) I wish to add the following data to li like this:

<li class="issue" data-winbook-issueId="3">My Issue here</li>

I have the reference of the 'li' under question and I try to do the following:

liReference.data("winbook-issueId", returnedJSONObject.issueId);

If I query this the same in the next line like this:

var id = liReference.data("winbook-issueId");

I get the value of id in alert or in the Debugger. But if I try and access this data in another function like deleteIssue() then id seems to return undefined!!

When the li is initially created there is no data attribute. I'm trying to add a new one in the created node (since the 'node' is created using a micro template engine).

Any ideas what I may be missing? I've attached the code below (the above is the conceptual explanation of the code below). I'm trying to access the value "data-winbook-issueId" and "data-winbook-issueStatus"

function postDataToWall(contentType, dataAreaToReplaceWithContent)
{
    var content = dataAreaToReplaceWithContent.children('.dataForm').val();
    var postDetailsContainer = dataAreaToReplaceWithContent.parent();
    var wcid = postDetailsContainer.parents('li.listOfIssues').data('winbook-wcid');

    var postData ="Issue="+content+"&wcid="+wcid; 

    $.ajax({

    type:"POST",
    url:"/Issue",
    data:postData,
    success:function(result, status){

    switch(contentType.toLowerCase())
    {
            case "Issue".toLowerCase():
        dataAreaToReplaceWithContent.remove();
    postDetailsContainer.append('<ul class="postDetails">'+
                                                   '<li class="issueid">Issue '+result.issueid+':<li>'+
                                                '<li class="postData">'+content+'</li>'+
                                                '<li><ul class="actionsNavBar">'+
                                                '<li><a class="actionNavBarLink" data-winbook-action="CloseIssue">Close Issue</a><span class="dotSeparator">.</span></li>'+
                                                '<li><a class="actionNavBarLink" data-winbook-action="Comment">Comment</a><span class="dotSeparator">.</span></li>'+
                                                '<li><a class="actionNavBarLink" data-winbook-action="Option">Suggest Option/Alternative(s)</a></li>'+
                                                '</ul></li></ul>');

                    var postNode = postDetailsContainer.parents('li.post');                     
                    postDetailsContainer.parents('.dataForm').toggleClass('dataForm');
                    postNode.children('.hoverMenu').toggle(); //enable the hover menu for delete/edit
                    postNode.data("winbook-issueStatus","open");
                    postNode.data("winbook-issueId",result.issueid);

                    $.data(postNode,"winbook-issueStatus","open");

                    someData = postNode.data("winbook-issueId");
                    someData2 = postNode.data("winbook-issueStatus");                       
                    break;
                    }
                },//end success function

                error: function(xhr, status){
                    alert("Status: "+xhr.status+" = "+xhr.statusText+": "+xhr.responseText);
                }   
            });//end ajax

EDIT: The function where the data is used:

<li class="post issue" data-winbook-issueStatus="open" data-winbook-issueId="44">

                            <a class="delete" data-winbook-delete="issue">

                            <img class="hoverButton deleteButton" src="http://localhost:8080/Winbook/images/deleteredicon.png"/>

                            </a>

                            <a class="edit" data-winbook-edit="issue">

                            <img class="hoverButton editButton" src="http://localhost:8080/Winbook/images/editpencil.png"/>

                            </a>

                            <div class="postContainer">...</li>

and it's called in the live('click') handler for a.delete:

$('a.delete').live('click', function() {

var issueIdToDelete = $(this).parent().data("winbook-issueId");

//send ajax request for deletion...but issueIdToDelete is undefined!!

}

NOTE: The problem is ONLY for the node that I want to delete immediately after creation. Nodes created at the server and sent work fine...The above EDIT snippet is copied from the source file that "shows" the data-* attributes but are not visible in the DOM tree as mentioned in the comments below (and rightly pointed out so by @Pointy)

Answer 1

Firstly, thanks to Pointy for being persistent and bearing with me.

It seems that the DOM structure was just fine, what I didn't know was setting the data using the $.data(key, value) function only performs the update in the $.cache and doesn't create a new data attribute for the DOM node. You can query it alright, but what will fail is the following:

$('[data-winbook-issueId='+result.issueId+']').fadeOut("slow",function(){
     $(this).remove();
});

Since the data-* attribute that was just created as per the ajax call is stored ONLY in the cache. To actually have it be a part of the page DOM for being referenced in this fashion you need to set it using the .attr(...) function like this:

postNode.attr("data-winbook-issueId",result.issueId);

The explanation for which can be found in the same thread that I had linked to above: Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?

I tried subscribing to the setData and/or changeData events and use that to update, but for some reason it wasn't working so instead of the added overhead of calling the .attr(...) in the event callback I directly set it on postNode.

Hope that helps someone with the same problem :)

Answer 2

Are you using jQuery 1.6+ ?

In that case you need to access the data camel cased. If your html is:

<li data-winbook-issue-id=''>

then access it like:

liReference.data("winbookIssueId");