How to update track listings depending on which album is clicked? Screenshot Included.

[n0sleeves]

I have included a screenshot of the prototype I am building right now. It's self explanatory but to break it down:

I have different albums on a page. On that same page is a section for the track listings showing for whichever album is clicked.  

What I want to do seems simple:

1. Update the track listings depending on which album is clicked. 
    
2. Have the new tracks come in / appear smoothly (animated). I think this is called easing or something? 

What I need to know: 

1. Which technologies do I use for this? I'm thinking it's Javascript / jQuery? Maybe Ajax? 
    
2. How do I pull the data into it?
    
3. Can you please supply me with sample code or send me to a forum that can? (My programming sucks really bad). Even though I would normally be very willing, I don't have very much time to learn / research as I only have a few days left for this project and still have many more things to setup. 

I already have some sample albums / tracks created in the PW backend. 

Thank you so very much!

[horst]

One approache can be to use

1)  jQuery.get to pull your new data from the server

     you need to send it to a server php script together with a unique ID for the album / tracklist you want the data.

2)  your server php script first should validate the sended ID, and if valid it should prepare the data and send back to the caller in your desired format. (JSON or ready to use HTML, or what ever)

3)  select an animation from jQuery if you like, for example slide in or any other, and use it to set and display the new content of your TrackListing

I'm not very familiar with JS, but all jQuery stuff you need is basic and covered on there api site. With the php / processwire script I can try to answer further questions if you have any.

[n0sleeves]

 

Thank you for the reply! If I was more experienced, I would probably have no trouble following the direction you are recommending. However, I am still not sure how to accomplish this specifically though (very, very inexperienced). I don't even know the correct syntax for JS/jQuery. If I had more time to learn all of this, I'd do it instead of being a PITA, because I like learning. The time isn't there

I will pay someone $$ (through Paypal) if they can send me the code along with explanations to accomplish this. I will need everything since apparently my skillset isn't there. I will need detailed directions though. Please inbox me. If this can be done today, that would be fantastic. 

I figure this shouldn't take more than an hour or two at max to put together. I'll throw $50 your way. 

Thank you. 

[n0sleeves]

I think I am close to having this figured out. Will post code soon. 

Edited May 23, 2014 by n0sleeves

[n0sleeves]

        // Show Artist Albums
        $albums = $page->children; //get albums of artist
        if($albums) {
          foreach($albums as $album) {
            echo "<li>";
            //get the unique id of the album's page
            echo "<a href='#&id=" . $album->id . "' class='albumClicked'>" . "<img src='http://placehold.it/100x100&text=[album cover]'></a>"; 
            echo "</li>";
          }
        }
      ?>

Okay, so I've been reading like mad (and it's 2 in the morning). I figured that if I assign $album->id as part of the URL when clicked, that would be enough to create a unique id for each album, correct? So now I'm onto passing that value into the processing script and also figuring out how to pass the album tracks as well. 

At least this very small step is done lol. I'm trying here!   

[horst]

@n0sleeves: great you have made progress. It looks good.

If you need further help with php / processwire of this, please ask. Otherwise don't waste your time with posting code here if it is already functional for you / your current job. Just go on and finish this damn thing! 

[Soma]

This can be a tricky task if you want to do it right. Depending on the structure of the data/pages there's a lot to be considered and there's many parts playing together HML CSS JS PHP. 

The concept is easy and in the rawest form is simple to achive. I can make a link #&?id and when clicked load some content into a div. Everybody can do it. But there's more if you want to make sure the tracks are also indexed and albums have a hard url, what was it again with those hashes and histories?

Best practices tells us that you have a completely static version first, with a page showing the tracks of a album, meaning the real url to the a album should work without javascript to get it. So search engines or other non javascript devices can also see it. 

Only then progressively enhance that with javascript, without changing or breaking the static version of course, to load that parts via javascript from the album listing and update history with either url hashes or history API. Then also check for history or hash changes in the browser and have a first request routine to load the tracks based on the url or direct request. Also dont' forget to update HTML title and active albums etc. The javascript part is what can be tricky, even more if you consider usability and accessibility.

That if those slide, fade, jump, bounce or wiggle in with forward or backward spline double quad or quint easing in or out is almost irrelevant.

[n0sleeves]

This can be a tricky task if you want to do it right. Depending on the structure of the data/pages there's a lot to be considered and there's many parts playing together HML CSS JS PHP. 

The concept is easy and in the rawest form is simple to achive. I can make a link #&?id and when clicked load some content into a div. Everybody can do it. But there's more if you want to make sure the tracks are also indexed and albums have a hard url, what was it again with those hashes and histories?

Best practices tells us that you have a completely static version first, with a page showing the tracks of a album, meaning the real url to the a album should work without javascript to get it. So search engines or other non javascript devices can also see it. 

Only then progressively enhance that with javascript, without changing or breaking the static version of course, to load that parts via javascript from the album listing and update history with either url hashes or history API. Then also check for history or hash changes in the browser and have a first request routine to load the tracks based on the url or direct request. Also dont' forget to update HTML title and active albums etc. The javascript part is what can be tricky, even more if you consider usability and accessibility.

That if those slide, fade, jump, bounce or wiggle in with forward or backward spline double quad or quint easing in or out is almost irrelevant.

Wow, thank you Soma! Your post made a ton of sense! Thank you so much. I ended up doing exactly what you proposed. It will work well. I'll continue to study for the future what was mentioned here. When you say hash, are you talking about an array?