Question

I am a total beginner with Javascript and JQuery, and am trying to achieve the following:

In TinyMCE, I wish to be able to type the following:

• Click here to watch video 1
• [popup]path/to/file1.mp4
• Click here to watch video 2
• [popup]path/to/file2.mp4

JQuery would then use the [popup] hook to identify instances of where I want a dialog window, place an anchor to call that dialog, populate the dialog with a call to JWPlayer, and feed the path given in each instance to it. It is in the storing of each URL, and subsequently giving that exact URL to the player that I am having great difficulty.

Managed to get it going in the end – no doubt more elegant solutions exist. Thx to Ben below for bringing me along.

UPDATED WITH WORKING SOLUTION: The current code:

$(document).ready(function(){

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    //this leaves only the path to file in that list item.
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr
    var splitpath = $(this).text().split("[popup]");
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path");
    //alert($(this).attr("path"));

    //Get the previous list item (the call to action), and give it general and unique classes also.
    $thisArrow = $(this).parent().prev();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

    //Make the call to action an anchor link, with a general class identifier.
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');

    //store path to poster as var, and hide the .popup li's
    $('li.popup').parent().hide();
});

$('.opener').click(function() {
    var Header = $(this).text();
    var popupURL = $(this).attr("path");
    var popupBG = "../contents/css/images/white-nontrans.jpg";

var thisDialog = $('<div></div>')

   //N.B. THE FOLLOWING HTML SHOULD BE ENTIRELY INCLUDED IN THE SINGLE .HTML() CALL
   //Otherwise Jquery will automatically close the <object> after the first line

   .html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420">')
.append('<param name="movie" value="../mediaplayer/player.swf">')    
.append('<param name="allowfullscreen" value="true">')
.append('<param name="allowscriptaccess" value="always">')
.append('<param name="bgcolor" value="#FFFFFF">')
.append('<param name="wmode" value="opaque">') 
.append('<param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '">') 
.append('<embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" />')
.append('</object>')

.dialog({ autoOpen: false, title: Header, modal: true, width:570 });
thisDialog.dialog('open');
    return false;
});
});

Answer 1

Relatively straightforward. In the function that converts your [popup] hooks, define a var counter = 0 prior to your .each loop. Inside the loop, iterate the counter, and use that number to generate the unique data/markings, which you apply from within the loop.

This is a pretty brief description of the solution. If you need more detail, just let me know.

edit: It seems like the problem would not be in the storage itself, but in identifying and getting control of the URL. You should be able to store the url in an arbitrarily named attribute in the anchor tag. It will be a technically “illegal” tag, so it won’t do anything, but it will be there, it won’t interfere with anything, and you’ll be able to pull it out easily with the jquery .attr() function.

Getting the URL itself so that you can put it into your attribute of choice is probably best done using javascript’s split(). First, split on “[popup]”. This will give you an array where the first element begins at the beginning of the text block, and each subsequent element begins immediately after a “[popup]”. Then split each of those (other than the first) on ‘ ‘. This will give you an array of that element, split by spaces – meaning that the first element in the array (as you’ve described it to me) should be the URL you’re looking for.

edit2:

$("li:contains('[popup]')").each(function() {
    var text = $(this).text();
    //by my understanding of split(), the [0] element in the array would be the
    //bit before the "[popup]" string, so we want the [1] element. 
    var splittext = text.split("[popup]")[1];
    var splitsplittext = splittext.split[" "];
    //by my understanding of the way you've presented the use rules, the [0]
    //element of splitsplittext ought to contain your path now.  If you want
    //to make it more robust (say, allowing the user to put an optional space
    //between the "[popup]" and the path) then the logic here gets more
    //complicated.
    $(this).attr("pathHolder", splitsplittext[0]); 
}

Once you’ve done that, any time you have the <li>, you can call $liNode.attr("pathholder") to get back the address string

edit3: a few thoughts…
– You’re setting multiple classes by adding in spaces manually. My understanding of good coding practice suggests that you should just call addClass multiple times.
– You’re doing a lot of things with selectors that you should be doing with variables. For example, you use $('li.pop'+nextnumber) when you could just continue to use $(this). You add a class to an arrow just so you can use $('li.arr'+nextnumber) when you could just say something like $thisArrow = $(this).prev() and then used $thisArrow when you needed to refer to the thing.
– when you’re defining the dialog, you don’t need to use var $dialog = – you only ever need var or the $. var means it’s a javascript variable, which means it’s strongly scoped. The $ means it’s a JQuery object, which means that it’s essentially scoped to the page. Unfortunately, neither would work well for you here, as your code is written. The javascript version would destroy itself almost immediately, as you cane to the end of the function, and the JQuery version would overwrite itself on the next cycle of the each loop. In order to preserve it properly, you’re going to have to actually write it in somewhere. Also, I’m pretty sure that JQuery is going to look at $('<div></div>') and just get confused. It looks like it’s trying to be a selector and failing.