[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

How to add/append code to a function?

knowledgenotebook

4/11/2016 7:42:00 PM

Hi,

I have an HTML page that is heavy with DOM, that is, I have some table row with several cells, for instance,
[InstrumentName] [Qty] [Person] [OtherInfo] (as one row)
and have a function, say, AddNewRow(), that allows the user to add additional row(s)
Thus, we have
[InstrumentName] [Qty] [Person] [OtherInfo]
[InstrumentName_n] [Qt_n] [Person_n] [OtherInfo_n]
....

<span id="newrowFlag"></span>
prior to FORM submission.

Now, I'd like to allow the user to add additional field(s). Thus, it may appear like this:
[InstrumentName] [Qty] [Person] [OtherInfo]
+AddField (addField()):
upon click,
Field Name: <input type="text" name="fieldName" size=15>
Field Type: <select name="fieldType">
<option>Text
<option>Checkbox
</select>

And if the user did click on addField function, how do we add/append this addition to the defined AddNewRow function?

The AddNewRow function's last two lines look like the following:
parentEl.insertBefore(newrow,p);
}

So, it looks like we need to do two things for the addField function.
(a) dynamically insert the two labels and two fields for a new field.
(b) insert/append new code right before the AddNewRow function's ending }

Is this the way to go? If so, what's command do we need to use to find the neighboring
parentEl.insertBefore(newrow,p);
and
}

?

Please note, parentEl.insertBefore(newrow,p); appears several times within this same function.

Thanks.
3 Answers

Ben Bacarisse

4/11/2016 9:01:00 PM

0

justaguy <lichunshen84@gmail.com> writes:

> I have an HTML page that is heavy with DOM, that is, I have some table
> row with several cells, for instance,
> [InstrumentName] [Qty] [Person] [OtherInfo] (as one row)
> and have a function, say, AddNewRow(), that allows the user to add additional row(s)
> Thus, we have
> [InstrumentName] [Qty] [Person] [OtherInfo]
> [InstrumentName_n] [Qt_n] [Person_n] [OtherInfo_n]
> ...
>
> <span id="newrowFlag"></span>
> prior to FORM submission.
>
> Now, I'd like to allow the user to add additional field(s). Thus, it
> may appear like this:
> [InstrumentName] [Qty] [Person] [OtherInfo]
> +AddField (addField()):
> upon click,
> Field Name: <input type="text" name="fieldName" size=15>
> Field Type: <select name="fieldType">
> <option>Text
> <option>Checkbox
> </select>
>
> And if the user did click on addField function, how do we add/append
> this addition to the defined AddNewRow function?
>
> The AddNewRow function's last two lines look like the following:
> parentEl.insertBefore(newrow,p);
> }
>
> So, it looks like we need to do two things for the addField function.
> (a) dynamically insert the two labels and two fields for a new field.
> (b) insert/append new code right before the AddNewRow function's ending }
>
> Is this the way to go?

No. It's better to make things data-driven rather than edit code on the
fly (which you can't do in this case anyway).

The AddNewRow function should be an action on a form. The AddNewField
function should modify that form. AddNewRow uses the form to determine
how many things it needs in a row.

Of course you might also need to edit existing rows to reflect the
presence of the new field.

<snip>
--
Ben.

ram

4/12/2016 10:16:00 PM

0

Ben Bacarisse <ben.usenet@bsb.me.uk> writes:
>No. It's better to make things data-driven rather than edit code on the
>fly (which you can't do in this case anyway).

In some other cases, it is possible to edit the value
of a /variable/ (»f« below), which gives an effect that
is similar to appending a statement to a function.

I do not say that this is good style, but FWIW:

First, I define a function »f« that prints »hello«.

"use strict";
var f = function() { console.log( "hello" ); }

Now, I define the »append« function that appends a
kind of statement to a function.

var append = function( old, statement )
{ return function() { old(); statement(); }}

Next, I use »append« to append a statement that prints
»world« to the function »f«, and I reassign the result
to the name »f«. (This does not change the original
function, but it changes the value of »f«.)

f = append( f, function() { console.log( "world" ); } );

When I now call the new value of the variable »f«,
»hello« /and/ »world« are printed:

console.log( "------------------" );
f();

. (I did not want to rely on the behavior of »toSource()«,
since I did not know whether this would be portable.)


knowledgenotebook

4/12/2016 11:38:00 PM

0

On Monday, April 11, 2016 at 5:01:19 PM UTC-4, Ben Bacarisse wrote:
> justaguy <lichunshen84@gmail.com> writes:
>
> > I have an HTML page that is heavy with DOM, that is, I have some table
> > row with several cells, for instance,
> > [InstrumentName] [Qty] [Person] [OtherInfo] (as one row)
> > and have a function, say, AddNewRow(), that allows the user to add additional row(s)
> > Thus, we have
> > [InstrumentName] [Qty] [Person] [OtherInfo]
> > [InstrumentName_n] [Qt_n] [Person_n] [OtherInfo_n]
> > ...
> >
> > <span id="newrowFlag"></span>
> > prior to FORM submission.
> >
> > Now, I'd like to allow the user to add additional field(s). Thus, it
> > may appear like this:
> > [InstrumentName] [Qty] [Person] [OtherInfo]
> > +AddField (addField()):
> > upon click,
> > Field Name: <input type="text" name="fieldName" size=15>
> > Field Type: <select name="fieldType">
> > <option>Text
> > <option>Checkbox
> > </select>
> >
> > And if the user did click on addField function, how do we add/append
> > this addition to the defined AddNewRow function?
> >
> > The AddNewRow function's last two lines look like the following:
> > parentEl.insertBefore(newrow,p);
> > }
> >
> > So, it looks like we need to do two things for the addField function.
> > (a) dynamically insert the two labels and two fields for a new field.
> > (b) insert/append new code right before the AddNewRow function's ending }
> >
> > Is this the way to go?
>
> No. It's better to make things data-driven rather than edit code on the
> fly (which you can't do in this case anyway).
>
> The AddNewRow function should be an action on a form. The AddNewField
> function should modify that form. AddNewRow uses the form to determine
> how many things it needs in a row.
>
> Of course you might also need to edit existing rows to reflect the
> presence of the new field.
>
> <snip>
> --
> Ben.

Ok, thanks Ben.