Help with Prototype and adding divs

[johnska7]

Hello all,

 

I'm trying to use ajax (via prototype) to add elements to a page. What I have so far is:

 

Person picks an area, which adds a program option to the page. They choose a program and it adds a subject option to the page. When they pick the subject, I want it to bring in the ability to enter text and then have a link to add another element of text under it, which has a link to add another element of text...and so on.

 

I'm trying to figure out how I can use inner.html, but I'm not having much luck, so if anyone has a tutorial or can help guide me through all of this, I'd be really appreciative.

 

Thanks!

[tomfmason]

can you post what you have so far. If you don't have much/anything to show you may want to check out this out http://www.sergiopereira.com/articles/prototype.js.html.

[johnska7]

What I have so far looks like this (rendered from the original source):

 

<div id="content">
<form action="" name="new" method="post">
<input name="title" type="text"><label for="area">Area</label>
<input name="tutorial_area" id="tutorial_area" value="2" onclick="updateArea('program', '2')" type="radio"> 2D<br>
<input name="tutorial_area" id="tutorial_area" value="1" onclick="updateArea('program', '1')" type="radio"> 3D<br>
<input name="tutorial_area" id="tutorial_area" value="3" onclick="updateArea('program', '3')" type="radio"> Layout<br>
<input name="tutorial_area" id="tutorial_area" value="4" onclick="updateArea('program', '4')" type="radio"> Web Dev<br>

<div id="program"><br><label for="program">Program</label>
<input name="tutorial_program" id="tutorial_program" value="4" onclick="updateArea('subject', '4')" type="radio"> 3D Studio Max<br>
<input name="tutorial_program" id="tutorial_program" value="1" onclick="updateArea('subject', '1')" type="radio"> Maya<br>
<input name="tutorial_program" id="tutorial_program" value="3" onclick="updateArea('subject', '3')" type="radio"> XSI<br>
</div>
<br>
<div id="subject"><label for="subject">Subject</label>
<input name="tutorial_subject" id="tutorial_subject" value="1" onclick="addStep();" type="radio"> modeling
</div>
<div id="step_1" style="display: none;"></div>

<input name="Submit" value="Submit" type="submit"></form>	
</div>

 

I haven't optimized the code yet, so I know there are XHTML errors and such. What I'm trying to figure out is how to keep adding divs to the page without have to define them first, as there can (theoretically) be an unlimited number of steps.

 

BTW, I'm using PHP to generate most of this, if that helps. The first three options are made with the following call:

 

function updateArea(db, ID)
{
	new Ajax.Updater(db, 'includes/ajax.php', 
	{
		method: 'get', 
		parameters: { action: 'updateArea', type: db, id: ID}
	});
	if(db != "subject")
	{
		new Ajax.Updater('subject', 'includes/ajax.php',
		{
			method: 'get',
			parameters: { action: 'updateArea', type: 'subjectRemove' }
		});
	}
}

 

So I'm not sure if I'm going about it the right way yet or not. I did look at the site you posted, tom, yesterday when I was trying to figure some of this out but it's a bit confusing.

 

Thanks for the quick response!

 

[johnska7]

Actually, I think I may have found a way. I think I can use Insertion.after, along with some PHP and javascript trickery. Please let me know if you have any ideas still, but I'm going to try this out at the same time.