Updating newly created TR with ajax request

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
RobbieL
Forum Commoner
Posts: 31
Joined: Fri Mar 23, 2007 5:57 pm

Updating newly created TR with ajax request

Post by RobbieL »

I've got myself a little conundrum that I'm having trouble solving. I've currently got a table, and I would like to insert a table row directly below the table row that contains the link to activates the inserting. Im working with the Prototype javascript framework, so this makes this easy enough with the Insertion.After function. However, I'd like to fill the newly created table row with content I've gathered from an Ajax request. Again, using Prototype Ajax abilities my request is all done and returning the correct content.

My problem is that I have my newly created table row and the content from my ajax request, but I'm struggling getting that content into the new table row. Anyone got any suggestions?
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Updating newly created TR with ajax request

Post by EverLearning »

Post some of your code, so we can help you.
RobbieL
Forum Commoner
Posts: 31
Joined: Fri Mar 23, 2007 5:57 pm

Re: Updating newly created TR with ajax request

Post by RobbieL »

Thanks for replying, Everlearning.

Code: Select all

 
<table id="table-playlists">
     <tr id="1">
          <td class="border song-title" width="1000px"><a class="playlistTitle" href="javascript&#058;getPlaylistMusic('Morning')">Morning</a></td>
     </tr>
</table>
 
This is a snippet of the table. The Link in there, Morning, when click will go to the javascript function below that should then insert a new table row below this one.

Code: Select all

 
function insertRow() {
     new Insertion.After('1', '<tr id="test"></tr>'); }
 
This is the function that inserts the new table row. It works just fine. I'm using Prototype 1.6, but using the 1.5.1 Insertion After as the documentation on the 1.6 insert method didn't help me to much.

Code: Select all

 
function insertPlaylistMusic(playlist) {
     if($('table-playlists') != null) {
          for(i=0; i < document.getElementsByClassName('playlistTitle').length; i++) {
           document.getElementsByClassName('playlistTitle')[i].onclick = function() {
                new Ajax.Request('http://localhost:8888/honours/index.php/playlists/getPlaylistMusic/'+playlist, {
            method: 'get'});
                    return false; }}}}
 
This function deals with my ajax request. It does successfully return the content I was aiming for. I've tried putting the Insertion.After in an onComplete function in the Ajax.Request, but was unsuccessfull.
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Updating newly created TR with ajax request

Post by EverLearning »

Try this

Code: Select all

 
function insertPlaylistMusic(playlist) {
    if($('table-playlists') != null) {
        for(i=0; i < document.getElementsByClassName('playlistTitle').length; i++) {
            document.getElementsByClassName('playlistTitle')[i].onclick = function() {
                new Ajax.Request('http://localhost:8888/honours/index.php/playlists/getPlaylistMusic/'+playlist, 
                    {
                    method: 'get',
                    onComplete: showResponse
                    }
                );
                return false; 
            }
        }
    }
}
 
function showResponse(request){
        new Insertion.After('1', '<tr id="test">' + request.responseText + '</tr>');
}
 
Post Reply