Ajax : add content like form fields or comple form or list... to an existing list

obouillaud wrote:
> Ok for the first example. If I undestand I need to hard code a JS function
> linked on my "add" button that makes something like (not real Js syntax) :
> function {
> the_content = "<label>value : </label><input type='text'
> name='anotherfield_NUMBER'><br />
>
> document.getElementByID('TheDivThatContainsTheWholeForm').innerHTML =
> document.getElementByID('TheDivThatContainsTheWholeForm').innerHTML +
> the_content ;
> }
>
> That sounds correct to you ?

yep, that's exactly what i meant. specifics may vary depending on your
page/form structure. make sure 'the_content' value is properly escaped
for js. it is a good idea to inject full containers (i.e. a set of form
fields in its own separate div block), assigning some unique identifier
to the container, especially if you plan on having a 'remove/delete'
functionality for these injected 'lines'.

and do look into jQuery js library - it makes all sorts of DOM and css
manipulation ridiculously simple. and it has full ajax support,
including submitting forms etc asynchronously. and a ton of plug-ins for
all your needs. there are other libraries out there like that -
prototype, mootools, extJS, yui, etc etc etc - i just like jQuery best...

> How can I pass a new "NUMBER" to my function ?

you can set the first 'new' number to use in js (outside your function,
so it is a global page js variable). then after each 'add' function run
increment that number by 1.

>
> How can I make a function linked to the "delete" button of each line ?

you will, obviously, need to pass some unique identifier of the 'line'
you want to delete (or the container that holds the 'line'). are you
talking about deleting 'line' that you 'injected' into the DOM? if so,
and following your js pseudo-code above, 'the_content' variable value
will presumably include the code of the 'delete'/'remove' button/link
for the inserted 'line'. this 'delete'/'remove' link/button will be
calling another js function, passing it the NEW NUMBER your 'add'
function assigned to the new 'line'. does that make sense?

>
> For the second example, can you give me a code sample of what you did for the
> "inject into the DOM with some js in the insert's callback handler" because I'm
> not sure to well understand how I can achieve that.

i will try to write up some code for you and post it separately... it is
not super trivial, but i am sure you will get your head around it!

>
> Thanks in advance
>



Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Ok for the first example. If I undestand I need to hard code a JS function linked on my "add" button that makes something like (not real Js syntax) :
function {
the_content = "<label>value : </label><input type='text' name='anotherfield_NUMBER'><br />";

document.getElementByID('TheDivThatContainsTheWholeForm').innerHTML = document.getElementByID('TheDivThatContainsTheWholeForm').innerHTML + the_content ;
}

That sounds correct to you ?
How can I pass a new "NUMBER" to my function ?

How can I make a function linked to the "delete" button of each line ?

For the second example, can you give me a code sample of what you did for the "inject into the DOM with some js in the insert's callback handler" because I'm not sure to well understand how I can achieve that.

Thanks in advance

with your first question/example, there is really no ajax involved -
just plain old js DOM manipulation... js libraries like jQuery make it
easier.

your second example will probably use async (ajax) form submit to insert
the new entry into the db without refreshing/reloading the page, and
return the new entry's data, which you will then again, as above, inject
into the DOM with some js in the insert's callback handler.

it is all, really, just javascript... with cf helping along with its
ajax functions.

i have implemented both of your samples in the past, and if you have
more specific questions i will be happy to help if i can.


Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/