Passing data using jQuery .data()?

I’ve been working on this all day, and I’m at my wits’ end. I’m using the Twitter Bootstrap with the latest version of jQuery; I have a series of anchor tags that are supposed to pass several data points to create a dynamically generated HTML5 video player in a modal window. Here’s the HTML:

<a data-toggle="modal" 
          href="#modal1" 
         data-modOggSrc="Officiary.ogv" 
         data-modMp4Src="Officiary.mp4" 
         data-modWebmSrc="Officiary.webm" 
         data-modTitle="Web content management application" 
         class="btn btn-primary btn-lg btnVid">View</a>

As you can see, I’m trying to pass different versions of the same video to a JavaScript function that will test for supported video formats in the browser, create a new Video element, then attach the appropriate file name as the .src attribute of the Video element. However, when I write the jQuery .data() elements to the console, they all come back undefined!


        function insertVid() {
            if ($('div.modal-body video')) {
                $('div.modal-body').remove('video');
            } 
            var modOggSrc = $(this).data( 'modOggSrc' );
            var modMp4Src = $(this).data( 'modMp4Src' );
            var modWebmSrc = $(this).data( 'modWebmSrc' );
            console.log(jQuery.hasData(this));
            console.log('modOggSrc = ' + modOggSrc + '; ' + 'modMp4Src = ' + modMp4Src + '; ' + 'modWebmSrc = ' + modWebmSrc);
            // etc., etc.

The curious thing is, jQuery.hasData(this) returns a value of true to the console! I think I may be losing the JavaScript “this” element somewhere along the way. Here’s how I’m calling the function:


        $(document).ready(function() {
            $('a.btnVid').click(function() {
                insertVid();
            });
        });

If only I could pass those video path/file values… and suggestions? TIA!

Hi there,

Two things:

  1. You have to pass a reference to the clicked link to your function, otherwise within the function $(this) will point to the global window object.

  2. jQuery ignores camel casing in data-attributes. More

This should work:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>data-attributes</title>
  </head>
  
  <body>
    <a href="#modal1" 
       data-toggle="modal" 
       data-modOggSrc="Officiary.ogv" 
       data-modMp4Src="Officiary.mp4" 
       data-modWebmSrc="Officiary.webm" 
       data-modTitle="Web content management application" 
       class="btn btn-primary btn-lg btnVid">View</a>
       
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      function insertVid(link) {
        if ($('div.modal-body video')) {
          $('div.modal-body').remove('video');
        } 
        var modOggSrc = link.data("modoggsrc");
        var modMp4Src = link.data("modmp4src");
        var modWebmSrc = link.data("modwebmsrc");
        console.log(jQuery.hasData(this));
        console.log('modOggSrc = ' + modOggSrc + '; ' + 'modMp4Src = ' + modMp4Src + '; ' + 'modWebmSrc = ' + modWebmSrc);
      }
      
      $('a.btnVid').click(function() {
        insertVid($(this));
      });
    </script>
  </body>
</html>

<facepalm>

I knew it had to be something simple like that! Can’t wait to get home and fix it tonight! Thanks a bunch!