Passing variables model to javascript

[eluser]RobbieL[/eluser]
I'm currently working on something that pulls a bunch of song information from a database, and displays it on the page. You can then click a link beside each song, and using the Amazon Web Service, grab the album art for that song. It all works great if I manually type the artist and album into the controller. However, I'd like for the artist and album name to be generated dynamically.

The problem is, when the link is clicked to grab the album art, the controller making the call to the Amazon Web Service is called by an ajax function. So I'm having trouble getting the php variables, containing the artist and album name, from the model function into my ajax function so it can then add them as URI segments. Then the controller can grab the URI segments, and fetch the album art.

I'm stumped so far. I tried using PHP to print out a call for the ajax function, putting the PHP variables as parameters, in the view ... but no luck.

Model:

Code:

function get_songs()
{        
    $getSongs = $this->db->query("SELECT title, artist, album FROM tracks WHERE userID='".$_SESSION['username']."'");
        
    $output = '<table><tr>Cover<td></td><td>Title</td><td>Artist</td><td>Album</td></tr>';
        
    if($getSongs->num_rows() > 0)
    {
        foreach($getSongs->result() as $song)
        {
            $artist = $song->artist;
            $album = $song->album;
            
            $output .= '<tr>';
            $output .= '<td>'.$song->cover.'</td>';
            $output .= '<td>'.$song->title.'</td>';
            $output .= '<td>'.$song->playtime.'</td>';
            $output .= '<td>'.$song->artist.'</td>';
            $output .= '<td>'.$song->album.'</td>';
            $output .= '<td>'.$song->genre.'</td>';
            $output .= '<td><a href="[removed]callAmazon('.$artist.', '.$album.');">Album Art</a></td>';
            $output .= '</tr>';
          }
          $output .= '</table>';
          return $output;
      }
      else
      {
          return '<p>You need to add music</p>';
      }
}

Ajax:

Code:

function callAmazon(artist, album)
{    
    new Ajax.Updater('coverContainer', 'http://localhost:8888/honours/index.php/music/amazon/artist/album', {
    method: 'get',
    onLoading: function() {
    $('coverContainer')[removed]='Loading ...';}});
}

[eluser]Nick Husher[/eluser]
I'm not entirely sure what's going on. I'm not very familiar with the JS framework you are using (Prototype, correct?), but I assume 'coverContainer' is an ID to an element. Is 'album' an ID as well ($('album').inner-HTML = 'Loading...')? I'm just confused because you're passing in a variable named album as well. You also aren't displaying anything when the onLoad event fires.

[eluser]RobbieL[/eluser]
Whoops, that's my mistake. When ($(’album’).inner-HTML = ‘Loading...’), it should read ($(’coverContainer’).inner-HTML = ‘Loading...’). I've edited the above post to fix that. And yeah, the JS framework is Prototype.

When you say there is nothing being displayed when the onLoad event fires? Not to sure what you mean there.

[eluser]Nick Husher[/eluser]
Prototype's callback for when the Ajax function is complete is (IIRC) onComplete. If you have nothing tied to that event, you'll never know when the remote server request is completed. Try:

Code:

function callAmazon(artist, album)
{    
    new Ajax.Updater('coverContainer', 'http://localhost:8888/honours/index.php/music/amazon/artist/album', {
        method: 'get',
        onLoading:  function() { $('coverContainer').inner*HTML='Loading ...'; },
        onComplete: function() { $('coverContainer').inner*HTML='Load complete. Whee!';}
    });
}

(remove the asterisks that I inserted to prevent the forum software from censoring me)

Also, wouldn't you kinda want to request a specific album? When you get around to returning album covers, I think you'd want to do something like this:

Code:

function callAmazon(artist, album)
{    
    var requestURL = 'http://localhost:8888/honours/index.php/music/amazon/'+artist+'/'+album;

    new Ajax.Updater('coverContainer', requestURL, {
        method: 'get',
        onLoading:  function() { $('coverContainer').inner*HTML='Loading ...'; },
        onComplete: function(response) {
            $('coverContainer').inner*HTML='Response: '+response.responseText;
        }
    });
}

Note that I added dynamically changing 'artist' and 'album' fields in the URL string and inserted a reference to the response object that Prototype hands to event listeners when onComplete is fired. The response object is documented on this page.

[eluser]RobbieL[/eluser]
When using Ajax.Updater, I don't think an onComplete is necessary. The response from the second parameter, the URL, just automatically gets displayed in the element supplied in the first parameter.

You're right though, I am wanting to request a specific album. And that's why I'm trying to pass the $album and $artist variables created in the model to the ajax callAmazon function. Reading my post back, I wasn't very clear. Sorry about that. I'll try and explain things a bit better.

That model function generates an HTML table containing a title, artist and album of all the the songs in the database. Each song also has a "Album Art" link, that calls the callAmazon Ajax function. When clicked, the album art for the song they clicked should be returned. But in order to do that, I need to let the callAmazon function know which artist and album it needs to look for.

And that's my problem. I create an $artist and $album variable in the model, containing the artist and album name for each song in the database. I need those variables to get passed to the callAmazon function, so it can then pass them to the controller that deals with the Amazon Web Service request.

Really appreciate the speedy responses, Nick. Thanks for baring with me.

[eluser]Pascal Kriete[/eluser]
This looks like it's been solved, but I'll add my $0.02. Having js in the body like that is a real pet peeve I have, and it can look so much better without.

Here's what I would do:

Controller:

Code:

$output .= '<td><a class="get_artwork" href="http://localhost:8888/honours/index.php/music/amazon/'.$artist.'/'.$album.'">Get Album Art</a></td>';

Header on the respective page:

Code:

<script type="text/javascript" charset="utf-8">
<!--
    function init() {
        $$('.get_artwork').each(function(item) {
            item.observe('click', callAmazon);
        });
    }

    function callAmazon(event) {
        event.stop();
        var el = event.element();
        var link = el.readAttribute('href');

        new Ajax.Updater(el, link+'/ajax', {
            method: 'get'
        });
    }
    
    document.observe("dom:loaded", init);
//-->
</script>

So now segment 3 and 4 are the artist and album. If segment 5 is set to 'ajax', you return the image. If it isn't set you save the image, and 'manually' add it to the view. Unobtrusive, degrades, doesn't bug anyone. Otherwise you simply have a dead link.

[eluser]Nick Husher[/eluser]
Yeah, inparo's changes are key to producing a high-quality webapp.