Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39260

Re: Painted into a corner

Show all headers | View raw

Andrew Poulos wrote:

> Rather than making multiple copies of the same "Image" component I was
> thinking to just use one and set/reset it when the user adds another
> image.
> 
> But currently all the UI components are "within" a single form so if
> the user adds an "Image" there's no way it's values can be separated
> from any other "Image's" values.

Why not?  AISB, form controls with the same name are automatically indexed 
in the DOM.  Suppose your “Image” component looks like this:

  <form id="f-images">
    <div class="c-image">
      <input type="number" name="imgWidth" value="0">
      <input type="checkbox" name="imgGrayscaleCbx" checked>
      <input type="range" name="imgGrayscaleRange" value="0" disabled>
    </div>

Then if you have another component

    <div class="c-image">
      <input type="number" name="imgWidth" value="42">
      <input type="checkbox" name="imgGrayscaleCbx">
      <input type="range" name="imgGrayscaleRange" value="1" disabled>
    </div>
  </form>

then the controls of the first component can be referred to by

  form.elements['imgWidth'][0]
  form.elements['imgGrayscaleCbx'][0]
  form.elements['imgGrayscaleRange'][0]

and the controls of the second component by

  form.elements['imgWidth'][1]
  form.elements['imgGrayscaleCbx'][1]
  form.elements['imgGrayscaleRange'][1]

whereas previously

  let form = document.forms['f-images'];

    [Historically one would have used names like “imgWidth[]” to indicate
     the NodeList; IIRC, it still makes a difference in PHP.]

It does not matter if the second component was already there (in the markup) 
or if the user performed an action so that it was inserted into the document 
tree.  And as the NodeList is live, it does not matter if the user deletes 
the first component.  So you can iterate over one of those NodeLists, e.g. 
form.elements['imgWidth'], to access (and serialize) the corresponding 
controls.
 
> Should I just clone the "Image" so that form elements exist for every
> "Image"? (Though for 10 Images that means 1,000+ inputs added to the
> HTML.)

If this is not supposed to work without scripting anyway, and requires no 
user interaction then you should store the data in an array right away, and 
forget about form serialization.

Otherwise it is a good idea to add a new instance of the component.  If you 
do that by cloning markup, then you should clone properly initialized 
template markup and not the markup of another instance of the component.

If none of this makes sense to you, then you have to elaborate on your
use-case.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-07 13:54 +1100
  Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 04:25 +0100
    Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 04:44 +0100
      Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 19:50 +0100
        Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-08 12:26 +1100
          Re: Painted into a corner "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-12-08 07:07 -0800
            Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-09 08:07 +1100
              Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-10 17:59 +0100
          Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-09 17:09 +0100
            Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-12 13:01 +1100
              Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-12 10:46 +0100
  Re: Painted into a corner "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-12-06 19:55 -0800
    Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 19:51 +0100
  Re: Painted into a corner Julio Di Egidio <julio@diegidio.name> - 2020-12-07 02:07 -0800

csiph-web