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?
Updating newly created TR with ajax request
Moderator: General Moderators
- 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 some of your code, so we can help you.
Re: Updating newly created TR with ajax request
Thanks for replying, Everlearning.
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.
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.
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.
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>
Code: Select all
function insertRow() {
new Insertion.After('1', '<tr id="test"></tr>'); }
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; }}}}
- EverLearning
- Forum Contributor
- Posts: 282
- Joined: Sat Feb 23, 2008 3:49 am
- Location: Niš, Serbia
Re: Updating newly created TR with ajax request
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>');
}