SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

    Code:
    <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!

    Code:
            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:

    Code:
            $(document).ready(function() {
                $('a.btnVid').click(function() {
                    insertVid();
                });
            });
    If only I could pass those video path/file values... and suggestions? TIA!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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>

  3. #3
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    <facepalm>

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •