Issue embedding multiple flash players into table cells using javascript

illebas

Hi, I am currently having an issue embedding multiple flash audio players. I am using a stand alone audio player: http://wpaudioplayer.com/standalone It works fine until I get past the 10th input. Once past 10 the player breaks. Here is an example of usage:

[code]

Gecko
Alternative content
AudioPlayer.embed("audioplayer_1", {soundFile: "work.mp3"});

Win 95+ / Mac OS 8.6-9.2
1.7
A
[/code]

Any thoughts or help would be greatly appreciated!!

Thanks in advance,

Mike

allan

Hi Mike,

I'm guessing that this is an events issue. Is AudioPlayer using jQuery events? In which case Visual Event might help show what rows have events attached, and which do not: http://sprymedia.co.uk/article/Visual+Event

DataTables will remove rows which are not displayed from the DOM, but this should not effect any attached events. However, I can't quite say what it might do for inline scripts like you have above. You say the player breaks - in what way does it break?

Thanks,
Allan

singhcommerce

Hello,

I am having the same problem, you see I am using a shadowbox script, along with a rollover script (DOM Image Rollover II) within a cell of a tablesorter. You see after the first 10 rows, when I click 2nd page, the url links do not open in the shadowbox link & more importantly, the rollover script does not work.

Here is an example of what I am doing.

[code]

(Republic of Zambia)
Zambia







[/code]


Focus on this...

[code]




[/code]

How do I fix this issue, do I need to tell the datatable script to ignore the data in the column in which the shadowbox link is working. Or do I need to create a function to tell datatable script to allow for inline html to function. I do not know.

allan

Hi singhcommerce,

Most likely you need to add the event listeners slightly differently. See:

http://datatables.net/examples/advanced_init/events_post_init.html
http://datatables.net/examples/advanced_init/events_pre_init.html

The Visual Event bookmarklet mentioned above is also useful for checking if the events have been attached correctly or not.

Regards,
Allan

singhcommerce

Thanks for the explanation and tips, but I am still confused, I have studied them and I am not able to figure out how to get the script to work, what exactly do you want me to do, create a script from scratch that makes the datatable understand what functions are happening within a table cell. Could you please specifiy. I am sorry if I am taking too much of your time, but this is for an important assignment I am working on and have been working on.

allan

The answer to the question will depend on how you are initialising your table and how you are adding the event handlers for the media player. I'm not aware of how you are doing this, so I can't just give the "correct" answer :-)

Perhaps if you can share your DataTables initialisation code and the initialisation code for the media player, that would help.

Basically, as I say, the problem is that you are adding event listeners only to the first page of the table. You need to add it to all pages, and the two links above to the events examples should help with that.

Regards,
Allan

singhcommerce

Ok so I got the rollover issue fixed by simply using css instead of relying on a javascript script from the DOM II site. The only issue that remains is how to get shadowbox to work.

Here is the code that I put in the index.html of my site, since I want shadowbox to be able to be called anytime.

[code]
%header%



%style_variations%

%user_styles%



%user_javascript%







Shadowbox.init({
language: "en",
players: ["flv","html","iframe","img","qt","swf","wmp"]
});


%plugin_header%
[/code]

I believe this is the initialization code. So how can I adapt it to get the datatable to understand that after going from page 1 (1-10) to page 2 (11-20), that 11 should be able to open shadowbox just like say 1 cell did.

[code]

@import "add/datatable/demo_page.css";
@import "add/datatable/demo_table.css";



$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );

[/code]

allan

Hi singhcommerce,

Try this:

[code]

$(document).ready(function() {
Shadowbox.init({
language: "en",
players: ["flv","html","iframe","img","qt","swf","wmp"]
} );

$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );

[/code]
Allan

singhcommerce

Thanks for responding, but this configuration of the script did not work, can you provide other suggestions.

singhcommerce

Also I forgot to add, I used visual link and copied the trigger code that enables any link in page 1 to open shadowbox.

Here is the code

[code]
function handleClick(e) {var link;if(U.isLink(this)){link=this}else{link=S.lib.getTarget(e);while(!U.isLink(link)&&link.parentNode){link=link.parentNode}}S.lib.preventDefault(e);if(link){S.open(link);if(S.gallery.length){S.lib.preventDefault(e)}}}
[/code]

I wonder if this could help.

singhcommerce

I think I found a solution, but I need help understanding how to do it. The same issue I have was mentioned on a "word-press support forum"

Here is what Person A said:

Hello,
I have some praise, a suggestion and a question… in that order :)
1. First, I just want to congratulate you..
Your plugin is AWESOME! Great work.
2. Second, does your plugin support multiple tables?
(i.e. is there a way to navigate between multiple tables on a single page/post?)
3. Lastly, I have a question…
- In WordPress 2.8.6, I am using your plugin to create a list of videos.
- Each row of data includes a small icon, which launches a YouTube video.
- I am also using Shadowbox-JS to play the videos in a modal window.
- But if the extra DataTables Javascript Feature is ‘enabled’, and a user ’sorts’ the data or uses the pagination buttons, my YouTube movies launch inside the ‘parent window’, instead of inside the Shadowbox ‘modal window’. (i.e. Shadowbox works properly on page 1, but if the users opts to display more than 10 videos, or clicks the pagination, then Shadowbox doesn’t work as expected)
I’m not much of a JavaScript coder… but my guess is that shadowbox.js needs to be called/included by DataTables somehow – in order to work on sub-pages if there is a really long list of data.
But I’m not quite sure HOW, or WHERE to add any additional ’shadowbox’ JavaScript so that it does not interfere with any DataTables scripts.
Any help or suggestions are much appreciated.
Once again. Great work!
Cheers!

Here is what Person B responded:

Hi Pete,
thanks for your nice comment!
Yes, the plugins does support multiple tables. You just need to put all the relevant Shortcodes into the post.
Regarding Shadoxbox:
The problem here is, that the Shadowbox JS is loaded after the DataTables JS. Depending on the plugin you use for the Shadowbox, there will be a slight modification of the code necessary. In particular you will need to raise the priority of the Shadowbox inclusion in the wp_enqueue_script call.
Regards,
Tobias

The conversation continues in this link

"http://tobias.baethge.com/2009/09/small-bugfixes-in-wp-table-reloaded-1-4-2/"

Furthermore, I am not using wordpress, I am using rapidweaver. I do not know if this would help, but the logic behind the concept of raising shadowbox inclusion as a higher priority over datatable script, makes sense. I just need help to understand how I would do that.

Again, sorry for asking quite a few questions. I appreciate the support you have provided and I think the solution is very close. I would like to say thank you for working on datatable script. It is amazing.

allan

I think they are basically saying what I've been saying all along. The event handlers for shadowBox must be applied to the table before initialisation DataTables, or after it's initialisation using fnGetNodes. This is shown in the two examples I linked originally.

I'm afraid you will have to give me something more than "did not work" - were there any errors. Did any events get attached at all - etc. I can't see the code you are using so I don't actually know what the problem is, but I'm fairly sure that it's the event handlers as I've said. Please post an example showing what the problem is.

Allan

singhcommerce

I fixed the issue by just adding a ling from "http://developer.yahoo.com/yui/articles/hosting/" to my index.html. Maybe this can help in resolving other issues that many others are experiencing. Thanks again for responding to my questions. I really appreciate it.