Page 1 of 1
Updating newly created TR with ajax request
Posted: Wed Apr 09, 2008 10:20 am
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?
Re: Updating newly created TR with ajax request
Posted: Wed Apr 09, 2008 10:27 am
by EverLearning
Post some of your code, so we can help you.
Re: Updating newly created TR with ajax request
Posted: Wed Apr 09, 2008 10:38 am
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: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.
Re: Updating newly created TR with ajax request
Posted: Wed Apr 09, 2008 12:18 pm
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>');
}