Adding a div with data()

Question

I am generating a list of flash SWFs, the information comes from an ajax call which returns a json object which i loop through to create the rows of data using my makeAppRow function.

makeAppRow = function(myData){
        var myStr = '<div class="fileEntry">'
      myStr = myStr +'<div class="appDate">'+dateFormat(myData.date_swf, "dS mmmm, yyyy, h:MM TT")+'</div>'
      myStr = myStr +'<div class="appName">'+myData.name_swf+'</div>'
      myStr = myStr +'<div class="appOptions" data>'
      myStr = myStr +'<div class="gotoAppBtn" data-options="'+myData+'">Open App</div>'
      myStr = myStr +'</div>'
      myStr = myStr +'</div>'
        $('#appData').append(myStr);
    }

I need the json data to be attached to the gotoAppBtn so that when its clicked I can read in the data from the attached json object and use it in my click function, as you can see I've been trying to embed the data using the html5 data but I can't get it to work.

 <div class="gotoAppBtn" data-options="'+myData+'">Open App</div>

I have a function so that when the button is clicked it loads in an swf.

$('.gotoAppBtn').live('click', function(){
        //alert('button clicked')
        var myData = $(this).data("options")
        alert('../userfiles/'+myData.id_ugp+'/'+myData.id_swf+'/'+myData.launchfile_swf+'')
        console.log(myData);
        var flashvars = {};     
        var params = {};
        params.menu = "false";
        params.quality = "best";
        params.scale = "noscale";       
        var attributes = {};
        attributes.id = "flashAppDisplay";
        attributes.name = "flashAppDisplay";
        swfobject.embedSWF(
            '../userfiles/'+myData.id_ugp+'/'+myData.id_swf+'/'+myData.launchfile_swf+'', 'flashAppDisplay', myData.width_swf, myData.height_swf,  myData.version_swf ,"../FAVideo/expressInstall.swf", flashvars, params, attributes)      
    });

but the data does not seem to be there, any pointers on where I am going wrong, or a better way to achieve this?

<div class="fileEntry"><div class="appDate">12th February, 2009, 1:00 AM</div><div class="appName">DAT demo Update Feb 09</div><div class="appOptions"><div class="gotoAppBtn">Open App</div></div></div> — Dizzy Bryan High
– Dizzy Bryan High, Commented Dec 22, 2010 at 20:21

Shurdoof · Accepted Answer · 2010-12-22 19:39:50Z

1

You need to turn the myData javascript object to string before you put it in the attribute. Take a look at JSON.stringify from json2.js.

You can also use the .data() function

$('#appData .gotoAppBtn:last').data("options",myData)

edited Dec 22, 2010 at 19:39

answered Dec 22, 2010 at 19:33

Shurdoof

1,71913 silver badges16 bronze badges

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

1 Comment

Dizzy Bryan High Over a year ago

in the end after trying the other suggestions i ened up using this soloution, using this code: $('.gotoAppBtn:last').data("options",myData)` thanks everyone for your help

Josiah Ruddell · Accepted Answer · 2010-12-22 19:51:04Z

1

If you use jquery to create the HTML you will not need to use the data- attributes because you can set the data using $.data. Here is a strictly jQuery version of your makeAppRow function.

$('<div class="fileEntry"></div>')
    .append('<div class="appDate"></div>')
    .find('.appDate')
        .html(dateFormat(myData.date_swf, "dS mmmm, yyyy, h:MM TT"))
        .end()
    .append('<div class="appName"></div>')
    .find('.appName')
        .html(myData.name_swf)
        .end()
    .append('<div class="appOptions"></div>')
    .find('.appOptions')
        .append('<div class="gotoAppBtn">Open App</div>')
        .find('.gotoAppBtn')
            .data(myData)
            .end()
        .end()
    .appendTo('#appData')

edited Dec 22, 2010 at 19:51

answered Dec 22, 2010 at 19:33

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

4 Comments

Dizzy Bryan High Over a year ago

ooooh really nice, i had seen this on the jquery docs but really didnt understand it, your example is nice and understandable, whats the .end() for never seen that before.

Josiah Ruddell Over a year ago

End returns you to the previous jquery stack. Generally you will use end after you have called find or filter - modifying the current set of matched elements.

Dizzy Bryan High Over a year ago

sorry just another quiky, how do i access the data in my click function? i tried using var myData = $(this).data() but it returns undefined in my alert

Josiah Ruddell Over a year ago

The data will be on the element with class="gotoAppBtn". Make sure $(this) is that element. Or store the data on which ever element makes more sense.

Sandeepan Nath · Accepted Answer · 2010-12-22 19:56:03Z

1

You can store arbitrary data associated with an html element using jquery .data(). Looking at the documentation, you can attach the data like this inside your makeAppRow function -

$('#appData').append(myStr);

//After appending
div = $("div.gotoAppBtn")[0];
$.data(div, "data", { options: myData });

And then retrieve it like this:-

$('.gotoAppBtn').live('click', function(){
   //alert('button clicked')

   div = $("div.gotoAppBtn")[0];
   var myData = $.data(div, "data").options

edited Dec 22, 2010 at 19:56

answered Dec 22, 2010 at 19:38

Sandeepan Nath

10.3k18 gold badges92 silver badges162 bronze badges

2 Comments

Dizzy Bryan High Over a year ago

like this soloution as it works with my existing code, but why use div = $("div.gotoAppBtn")[0]; surely this would only get the first div with the class of the gotoAppBtn, as there are many divs generated from the json $(this) would be preferable to use, thanks for your time to answer.

Sandeepan Nath Over a year ago

you are welcome. I am not yet sure about why use that. I am a little confused with that too. Do let me know if you find the reason. Thanks

Collectives™ on Stack Overflow

Adding a div with data()

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related