3 Replies Latest reply on Jun 12, 2008 3:10 AM by Newsgroup_User

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

    obouillaud Level 1
      Hi

      Let's imagine I have a list of attribues in a form and I want to add a new one, how can I do without refreshing the page ?
      image of what I mean : http://img126.imageshack.us/img126/872/addoptionui4.gif
      In this example (Magento), the button "Add Option" adds a new line of fields ready to be completed.

      I know how to replace the whole content of a cfdiv by something else (ColdFusion.navigate + div id) but it's not very simple and it works fine if I really need to (an can) refresh the cfdiv. But what would be nice is to "add" some new contents to an existing content. For example if I have a div with lots of <cfinput type="text" ...> I would like to add more cfinputs to at the end of the div before the </cfdiv>)

      Another scenario (example on the wishlistr.com website http://img249.imageshack.us/img249/2618/addelementue5.gif ) :
      I have a list of existing data (a list of products for example), I have a form at the end of the list to add a new product. How can I make the list on the top to have one more element (without refreshing the page, and if possible the rest of list).
      It's quite the same thing as above : if my products are in a div each in betwean <li></li>, I want to add a new sort of <li></li> when I click on the "add" button.

      I hope I'm clear enough, let me know...
        • 1. Re: Ajax : add content like form fields or comple form or   list...   to an existing list
          Level 7
          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/
          • 2. Ajax : add content like form fields or comple form or list... to an existing list
            obouillaud Level 1
            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
            • 3. Re: Ajax : add content like form fields or comple form   or list...   to an existing list
              Level 7

              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/