I'm using Prototype for this example, but the following code should do sort out adding new main rows:
Basically attach this function to onclick event of your "Add New Main Row" link, like so:
Code:
pAddMainRowLink.onclick = function()
{
// Grab the main row container element.
// We're selecting it by the className, so you need to update
// this to match the className of your container
var pMainRowContainer = this.up('mainRowContainerClassName');
if (!pMainRowContainer)
{
return;
}
pMainRowContainer.appendChild(page.createMainRow());
}
You'll also need to add the following function (if you remove it from the object literal make sure you update the page.createMainRow() call to reflect the changes). This function is responsible for creating the new main row in the DOM and returning a pointer to it.
Code:
page =
{
createMainRow: function()
{
var pMainRow = $(document.createElement('div'));
// Add some test content
pMainRow.update('My new main row!')
//... setup main row, add content, etc.
return pMainRow;
}
}
I've written this from the top of my head and so it may have a few mistakes. If you need any help getting it to work don't be afraid to ask. Also, as I said at the start, this solution also uses the
Prototype JavaScript Framework, so you will need to install that before you can try it.