Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Jplayer Module creation help needed.


Go to End


7 Posts   2669 Views

Avatar
Matty Balaam

Community Member, 74 Posts

15 June 2010 at 5:04am

Edited: 17/06/2010 11:15am

Firstly I'd like to thank UncleCheese for this great a flexible module. I can't begin to understand how to get the most of it at the moment, but even for people with little coding knowledge such as myself (I'm primarily a designer) it is impressive what can be achieved.

I like the fact that MP3 playing is included, but I need a player I can style and amend easily with CSS, and which doesn't rely on flash.

I've been trying all day to make a module making use of the Jplayer code, and in partcular basing it on the playlist demo:

http://www.happyworm.com/jquery/jplayer/latest/demo-02.htm

The problem is that in the supplied code the playlist appears to need to be hardcoded into the .js config file (is this the right term or it?). As far as I know it isn't possible to use Silverstripe markup inside javascript?

So, I've tried a workaround which uses Silverstripe to generate the required code inside a hidden div (pretty ugly in terms of accessibility - I told you I was a designer not a coder!), and then jquery pulls that into 'var myPlayList' inside the config file.

I've been able to get the page to then display the string 'myPlayList' to check it is formatted correctly - which it appears to be, and if then copy and pasted into the config file it works, but I'm guessing the raw data is not just text as this then results in a load of links on the page called: undefined (mp3)

I've attached a link to a zip of the files so you are able to see my attempts so far, and would be very grateful if someone can tell me where I'm going wrong.

Is there a way to get this to work, or even better work in a much more elegant fashion not using the evil hidden content, or is it a much harder job than I originally anticipated?

http://www.matthewbalaam.co.uk/j_player/j_player.zip

Avatar
Matty Balaam

Community Member, 74 Posts

15 June 2010 at 10:24pm

Edited: 17/06/2010 11:15am

So, I've been researching into this a bit more and it would appear I need to create a JSON string which JQuery can then pull in.

I'm not at all sure if what I'm doing is correct, but I've added inside JPlayerPage_Controller this extra code:

	 public function JSON()
	 {
		 array( 
         'Name' => 'Name', 
         'mp3' => 'JPlayer', 
      );
		  return json_encode($myPlayList); 
	 
	}

and then inside jplayer.config.js I've added:

      $.ajax({ 
            type: "GET", 
            url: "json", 
            dataType:"json", 
            async: false, 
            success: function(msg) 
              { 
             myPlayList = msg; 
               } 
          }); 
           return myPlayList ;

Am I getting anywhere close to something which could possibly work? Would be handy to know if I'm warm at least, otherwise I'll be falling back onto hardcoding the playlist.

Thanks.

Avatar
Willr

Forum Moderator, 5523 Posts

16 June 2010 at 2:37pm

Edited: 17/06/2010 11:15am

Your on the right track. For handling AJAX queries you need a valid controller and function which I see you have - JPlayerPage_Controller. So you'll need a JPlayerPage in the cms or if you don't have a JPlayerPage in the CMS your url would look like

http://yoursite.com/JPlayerPage_Controller/JSON/

That will call the JSON method on the JPlayerPage_Controller. You will also have to allow JSON as an action on the controller so add this to you JPlayerPage_Controller

static $allowed_actions = array(
'JSON'
);

You should now be able to visit that URL and see your json response. Then you would need to update the URL in the ajax request.

Avatar
Matty Balaam

Community Member, 74 Posts

17 June 2010 at 4:52am

Edited: 17/06/2010 11:15am

Thanks for your help, it's given me something to work on and I've managed to now get the page to pull something in, but unfortunately I have no idea how to create an array from the database. I was hoping that something as simple as this might work (don't laugh!)

class JPlayerPage_Controller extends Page_Controller
{
		 
	 static $allowed_actions = array(
	 'JSON'
	 );
	 
	 public function JSON(){  
	    $playlist= array(
		  'Name: ' => $this->Name,
		  'MP3: ' => $this->Jplayer
		  ); 
	 return json_encode($playlist);
   }
}

The result if I got to the JSON page however is:

{"Name":null,"MP3":null}

Which only gives me one answer and doesn't give me the data!

Do I need to add something to JPlayerFile.php perhaps? I'm massively out of my depth but willing to learn and would appreciate a good tutorial.

Also, I'm guessing this would maybe better answered in another sub-forum perhaps?

Thanks again.

Avatar
Willr

Forum Moderator, 5523 Posts

17 June 2010 at 11:14am

Edited: 17/06/2010 11:15am

Ok sorry might have put you wrong - using http://yoursite.com/JPlayerPage_Controller/JSON/ will go straight to the controller, without any datarecord (which has the Name and JPlayer fields) what you should use as the URL is

http://yoursite.com/name-of-your-page/JSON/

Where name-of-your-page is a JPlayerPage. This will tie the controller to the datarecord (JPlayerPage).

Also moving this thread, not related to DOM as such

Avatar
Matty Balaam

Community Member, 74 Posts

1 July 2010 at 11:28pm

I've been looking at this again, but I'm still not sure how to pull the information from the database. When I look around the forums I think it may have something to do with DataObject::Get – but how to use it is beyond a layman such as myself and I either receive errors or get nothing at all . Can anyone help?

Avatar
nos4a2

Community Member, 2 Posts

20 January 2012 at 9:53am

Did you find a solution in the end? I'm looking for exactly the same functionality :/