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!