Ajax Question

DefunctExodus

Hello,

I am currently attempting to create a wysiwyg editor that is similar to the way in which Itunes playlist's operate.

What i am wanting is to have a bar on the screen with a plus sign next to it, Once you click the plus sign it will create another bar below.

How would you go about having this automatically create a bar on screen when you click using prototype and scriptalicious

I apologize i am still trying to learn ajax.

Thank you for your time
Defunct Exodus

rulian

just adding a new element to a page isn't necessarily ajax, and it's probably to simple for either prototype or scriptalicious to do the job specifically, althought they both probably use it extensively. If you are using and saving the new added feature automatically you would do it through prototype just to send the request to store that specific row.

Depending on how you are bulding your element, you approach it in different ways.
First option, you can manually make the code and use document.write to add the code to the body like

var myContent='Hello there'; 
var mynewbar='<div id=\'blah\'>'
mynewbar += myContent; 
mynewbar +='</div>' 

document.write(mynewbar);

or you can use innerHTML on it's parent object with the similar method

<table><tr><td id='addtothis'></td></tr></table>

<script>.....
document.getElementById('addtothis').innerHTML = document.getElementById('addtothis').innerHTML + mynewbar;

but that would reset any changes done to any element like text fields in your td, so the best method is, if you are systematically adding like objects is to use appendChild. Using parent, child nodes is a bit tricky if you arent familiar with it, go to www.w3schools.com and check out their section on parent/child elments. But the prinicple is basically generate your code using document.createElement and append that to the element you wish to add it underneath.

It seems more complicated then it really is. But then which ever function you use to add the row, just use the same to submit your header request.

DefunctExodus

rulian,

Thank you for your reply and pointing me in the correct direction, I was reading up on how do use the element nodes as you described and got it succesfully working to both insert a child and remove a child

However i am using prototype so i am using the following code

new Insertion.After('blah', '<p>Look i am below!</p>'); return false;

This works correctly for instering elements below the parent as many times as i would like.

However i am running into issues when i try and use

if ($('blah')) Element.remove('blah'); return false;

To remove a child node, It only seems to remove the parent.

Any suggestions on how i can go about removing the child node onclick (of the child node)

Thank you once again for your help

stijnm

Think you need to identify the <p> you inserted, and remove that one.

new Insertion.After('blah', '<p id="new_p">Look i am below!</p>'); return false;

and

if ($('new_p')) Element.remove('new_p'); return false;