Need Help with my script logic

[pbd22]

Hi.

In my script the below code creates a new element
on the page with an associated delete button:

var row_element = new Element(
'div',
{
'class':'container',
'events':{
'click':function( uid ){
this.activeRow( uid );
}.pass( current_element.uid, this )
}
}
).adopt( delete_button ).adopt( item );

Now, when a user clicks on that element, I want the
input fields on the page to be particular to that element.
So, whatever is written in them, gets stored in an array
that is specific to this particular element "uid". If something
was written, the fields get repopulated when the element
is clicked on again.

Here is the function that gets activated when the element is clicked
on:

activeRow:function( uid ){

active_row = this.elements[ this.uid_lookup[ uid ] ];
[?]

}

I am not quite sure how to approach this, help appreciated.

Thanks.

 

[pbd22]

Hi.

In my script the below code creates a new element
on the page with an associated delete button:

var row_element = new Element(
'div',
{
'class':'container',
'events':{
'click':function( uid ){
this.activeRow( uid );
}.pass( current_element.uid, this )
}
}
).adopt( delete_button ).adopt( item );

Now, when a user clicks on that element, I want the
input fields on the page to be particular to that element.
So, whatever is written in them, gets stored in an array
that is specific to this particular element "uid". If something
was written, the fields get repopulated when the element
is clicked on again.

Here is the function that gets activated when the element is clicked
on:

activeRow:function( uid ){

active_row = this.elements[ this.uid_lookup[ uid ] ];
[?]

}

I am not quite sure how to approach this, help appreciated.

Thanks.

OK, I think I have figured out a more productive way to ask this
question (i hope). Could somebody show me how I could identify a
change on my form (select box, input field, textarea, etc) and assign
the new values to an associated array for each element. So, there will
be a selectbox[0], input[0], etc and selectbox[1], input[1], etc. My
attempts at this have been pretty ugly - lots of code.

Thanks for any help.

 

[Sabine Dinis Blochberger]

OK, I think I have figured out a more productive way to ask this
question (i hope). Could somebody show me how I could identify a
change on my form (select box, input field, textarea, etc) and assign
the new values to an associated array for each element. So, there will
be a selectbox[0], input[0], etc and selectbox[1], input[1], etc. My
attempts at this have been pretty ugly - lots of code.

Thanks for any help.

Well, if it works, does it matter if it's one or three lines of code? It
really shouldn't, especially if it makes for readable/maintainable code.

Maybe you should post the code that does work, so someone can help you
beautify/optimize it.

 

[Henry]

In my script the below code creates a new element

The code below uses what must be a function named "Element" to create
a javascript object, though the fate of that object is unclear form
the code. If here you are referring to a DOM node implementing the
Element interface being created as a side effect (or anything else)
there is no evidence of that happening in this code.

on the page with an associated delete button:

var row_element = new Element(
'div',
{
'class':'container',
'events':{
'click':function( uid ){
this.activeRow( uid );
}.pass( current_element.uid, this )
}
}
).adopt( delete_button ).adopt( item );

Now, when a user clicks on that element,

Which element? You can "click on" (at least most) DOM Elements, but
"clicking" is a little detached from being something that you can do
with a javascript object.

I want the input fields on the page

What input fields, what page?

to be particular to that element.
So, whatever is written in them, gets stored in an array
that is specific to this particular element "uid". If something
was written, the fields get repopulated when the element
is clicked on again.

That sounds more like you want the contents of an INPUT (presumably
type="text") Element to change when some notion of 'current selection'
is applied to one of some group of other Elements by the action of
clicking.

Here is the function that gets activated when the element is clicked
on:

activeRow:function( uid ){

active_row = this.elements[ this.uid_lookup[ uid ] ];
[?]

}

How does it "get activated"? As javascript determines the - this -
value by how a function is called that is very important in
determining how this might behave, or be written so that it does
something related to what you are interested in.

I am not quite sure how to approach this, help appreciated.

The best approach to getting a question answered is to provide the
information necessary to answer it (and not hide it in anything
superfluous). Here you have provided none of the mark-up with which
this code is going to interact, you have not shown the context in
which the first code snippet is executed, your have not shown the
context in which the second is defined, you have not provided the
definition of the - Element - constructor used here, the - adopt -
method or the constructed/returned object (or the - adopt - method of
the object returned from the first call to - adopt -(if they differ)),
the - pass - method that appears to have been added to the -
Function.prototype -, or any of the code that these may depend upon.
There is no indication of the type or nature of the - uid - value or
the - current_element - value.

 

[pbd22]

OK, I think I have figured out a more productive way to ask this
question (i hope). Could somebody show me how I could identify a
change on my form (select box, input field, textarea, etc) and assign
the new values to an associated array for each element. So, there will
be a selectbox[0], input[0], etc and selectbox[1], input[1], etc. My
attempts at this have been pretty ugly - lots of code.

Thanks for any help.

Well, if it works, does it matter if it's one or three lines of code? It
really shouldn't, especially if it makes for readable/maintainable code.

Maybe you should post the code that does work, so someone can help you
beautify/optimize it.

OK, as you wish. Below is the way I had approached it:

function X() {


// Title box
var arrTitle = new Array(max_count.length);
var title_box = document.getElementById('title');

// Description box
var desc_box = document.getElementById('description');
var arrDesc = new Array(max_count.length);

// Category ddl
var cat_ddl = document.getElementById('category');
var arrCat = new Array(max_count.length);

// Category Month
var recorded_mo = document.getElementById('recorded_mo');
var arrRecMo = new Array(max_count.length);

// Category Day
var recorded_day = document.getElementById('recorded_day');
var arrRecDay = new Array(max_count.length);

// Category Year
var recorded_yr = document.getElementById('recorded_yr');
var arrRecYr = new Array(max_count.length);

// Language ddl
var lang_ddl = document.getElementById('language');
var arrLang = new Array(max_count.length);

// Access - private
var access = document.forms['uploadForm'].elements['access'];
var arrAccess = new Array(max_count.length);

// Tags - NEED TO PARSE FOR SPACES BETWEEN WORDS
var tags = document.getElementById('tags');
var arrTags = new Array(max_count.length);

// Video Location
var video_location = document.getElementById('coords');
var arrLocation = new Array(max_count.length);

// Privacy - comments
var comments =
document.forms['uploadForm'].elements['comments'];
var arrComments = new Array(max_count.length);

// Privacy - ratings
var ratings =
document.forms['uploadForm'].elements['ratings'];
var arrRatings = new Array(max_count.length);

// Privacy - embedding
var embedding =
document.forms['uploadForm'].elements['embedding'];
var arrEmbedding = new Array(max_count.length);

// Event handlers

var last_click;

new_link.onclick = function() {

var oID = this.id;
var oIND = oID.lastIndexOf("_") + 1;
var active = oID.substr(oIND);

title_box.value = "";
desc_box.value = "";
tags.value = "";
//alert(video_location.value);
video_location.value = defLoc; // REMOVE THIS

recorded_mo.options[0].selected = true;
recorded_day.options[0].selected = true;
recorded_yr.options[0].selected = true;

cat_ddl.options[0].selected = true;
lang_ddl.options[29].selected = true;

access[0].checked = true;

comments[0].checked = true;
ratings[0].checked = true;
embedding[0].checked = true;

//count starts at 2
for(i=2;i<=max_count.length;i++) {


if(i == active) {

// Fill Pre-Existing Values

if(arrTitle)
title_box.value = arrTitle;
if(arrDesc)
desc_box.value = arrDesc;
if(arrTags)
tags.value = arrTags;
if(arrLang)
lang_ddl.options[arrLang].selected =
true;
if(arrCat)
cat_ddl.options[arrCat].selected =
true;
if(arrRecMo)
recorded_mo.options[arrRecMo].selected
= true;
if(arrRecDay)

recorded_day.options[arrRecDay].selected = true;
if(arrRecYr)
recorded_yr.options[arrRecYr].selected
= true;
if(arrAccess)
access[arrAccess].checked = true;
if(arrLocation)
video_location.value = arrLocation;
if(arrComments)
comments[arrComments].checked = true;
if(arrRatings)
ratings[arrRatings].checked = true;
if(arrEmbedding)
embedding[arrEmbedding].checked =
true;

title_box.onchange = function (){
arrTitle[last_click] = title_box.value;
}

desc_box.onchange = function (){
arrDesc[last_click] = desc_box.value;
}

tags.onchange = function (){
arrTags[last_click] = tags.value;
}

lang_ddl.onchange = function() {
arrLang[last_click] =
lang_ddl.selectedIndex;
}

cat_ddl.onchange = function() {
arrCat[last_click] =
cat_ddl.selectedIndex;
}
video_location.onchange() {
arrLocation[last_click] =
video_location.value;
}

recorded_mo.onchange = function() {
arrRecMo[last_click] =
recorded_mo.selectedIndex;
}

recorded_day.onchange = function() {
arrRecDay[last_click] =
recorded_day.selectedIndex;
}

recorded_yr.onchange = function() {
arrRecYr[last_click] =
recorded_yr.selectedIndex;
}

access[0].onclick = function() {
arrAccess[last_click] = 0;
}

access[1].onclick = function() {
arrAccess[last_click] = 1;
}

comments[0].onclick = function() {
arrComments[last_click] = 0;
}

comments[1].onclick = function() {
arrComments[last_click] = 1;
}

comments[2].onclick = function() {
arrComments[last_click] = 2;
}

comments[3].onclick = function() {
arrComments[last_click] = 3;
}

ratings[0].onclick = function() {
arrRatings[last_click] = 0;
}

ratings[1].onclick = function() {
arrRatings[last_click] = 1;
}

embedding[0].onclick = function() {
arrEmbedding[last_click] = 0;
}

embedding[1].onclick = function() {
arrEmbedding[last_click] = 1;
}

last_click = i;

}

}

}

 

[pbd22]

pbd22 wrote:

OK, I think I have figured out a more productive way to ask this
question (i hope). Could somebody show me how I could identify a
change on my form (select box, input field, textarea, etc) and assign
the new values to an associated array for each element. So, there will
be a selectbox[0], input[0], etc and selectbox[1], input[1], etc. My
attempts at this have been pretty ugly - lots of code.
Thanks for any help.

Well, if it works, does it matter if it's one or three lines of code? It
really shouldn't, especially if it makes for readable/maintainable code.

Maybe you should post the code that does work, so someone can help you
beautify/optimize it.

Op3racionalwww.op3racional.eu

OK, as you wish. Below is the way I had approached it:

function X() {

// Title box
var arrTitle = new Array(max_count.length);
var title_box = document.getElementById('title');

// Description box
var desc_box = document.getElementById('description');
var arrDesc = new Array(max_count.length);

// Category ddl
var cat_ddl = document.getElementById('category');
var arrCat = new Array(max_count.length);

// Category Month
var recorded_mo = document.getElementById('recorded_mo');
var arrRecMo = new Array(max_count.length);

// Category Day
var recorded_day = document.getElementById('recorded_day');
var arrRecDay = new Array(max_count.length);

// Category Year
var recorded_yr = document.getElementById('recorded_yr');
var arrRecYr = new Array(max_count.length);

// Language ddl
var lang_ddl = document.getElementById('language');
var arrLang = new Array(max_count.length);

// Access - private
var access = document.forms['uploadForm'].elements['access'];
var arrAccess = new Array(max_count.length);

// Tags - NEED TO PARSE FOR SPACES BETWEEN WORDS
var tags = document.getElementById('tags');
var arrTags = new Array(max_count.length);

// Video Location
var video_location = document.getElementById('coords');
var arrLocation = new Array(max_count.length);

// Privacy - comments
var comments =
document.forms['uploadForm'].elements['comments'];
var arrComments = new Array(max_count.length);

// Privacy - ratings
var ratings =
document.forms['uploadForm'].elements['ratings'];
var arrRatings = new Array(max_count.length);

// Privacy - embedding
var embedding =
document.forms['uploadForm'].elements['embedding'];
var arrEmbedding = new Array(max_count.length);

// Event handlers

var last_click;

new_link.onclick = function() {

var oID = this.id;
var oIND = oID.lastIndexOf("_") + 1;
var active = oID.substr(oIND);

title_box.value = "";
desc_box.value = "";
tags.value = "";
//alert(video_location.value);
video_location.value = defLoc; // REMOVE THIS

recorded_mo.options[0].selected = true;
recorded_day.options[0].selected = true;
recorded_yr.options[0].selected = true;

cat_ddl.options[0].selected = true;
lang_ddl.options[29].selected = true;

access[0].checked = true;

comments[0].checked = true;
ratings[0].checked = true;
embedding[0].checked = true;

//count starts at 2
for(i=2;i<=max_count.length;i++) {

if(i == active) {

// Fill Pre-Existing Values

if(arrTitle)
title_box.value = arrTitle;
if(arrDesc)
desc_box.value = arrDesc;
if(arrTags)
tags.value = arrTags;
if(arrLang)
lang_ddl.options[arrLang].selected =
true;
if(arrCat)
cat_ddl.options[arrCat].selected =
true;
if(arrRecMo)
recorded_mo.options[arrRecMo].selected
= true;
if(arrRecDay)

recorded_day.options[arrRecDay].selected = true;
if(arrRecYr)
recorded_yr.options[arrRecYr].selected
= true;
if(arrAccess)
access[arrAccess].checked = true;
if(arrLocation)
video_location.value = arrLocation;
if(arrComments)
comments[arrComments].checked = true;
if(arrRatings)
ratings[arrRatings].checked = true;
if(arrEmbedding)
embedding[arrEmbedding].checked =
true;

title_box.onchange = function (){
arrTitle[last_click] = title_box.value;
}

desc_box.onchange = function (){
arrDesc[last_click] = desc_box.value;
}

tags.onchange = function (){
arrTags[last_click] = tags.value;
}

lang_ddl.onchange = function() {
arrLang[last_click] =
lang_ddl.selectedIndex;
}

cat_ddl.onchange = function() {
arrCat[last_click] =
cat_ddl.selectedIndex;
}
video_location.onchange() {
arrLocation[last_click] =
video_location.value;
}

recorded_mo.onchange = function() {
arrRecMo[last_click] =
recorded_mo.selectedIndex;
}

recorded_day.onchange = function() {
arrRecDay[last_click] =
recorded_day.selectedIndex;
}

recorded_yr.onchange = function() {
arrRecYr[last_click] =
recorded_yr.selectedIndex;
}

access[0].onclick = function() {
arrAccess[last_click] = 0;
}

access[1].onclick = function() {
arrAccess[last_click] = 1;
}

comments[0].onclick = function() {
arrComments[last_click] = 0;
}

comments[1].onclick = function() {
arrComments[last_click] = 1;
}

comments[2].onclick = function() {
arrComments[last_click] = 2;
}

comments[3].onclick = function() {
arrComments[last_click] = 3;
}

ratings[0].onclick = function() {
arrRatings[last_click] = 0;
}

ratings[1].onclick = function() {
arrRatings[last_click] = 1;
}

embedding[0].onclick = function() {
arrEmbedding[last_click] = 0;
}

embedding[1].onclick = function() {
arrEmbedding[last_click] = 1;
}

last_click = i;

}

}

}

OK, thanks Henry. I was responding to Sabine when you were posting.
THe code I posted in response to Sabine's inquiry is my old approach
to gathering the form fields, saving them to individual arrays, and
then repopulating the form if the link is returned to.
It seems clumsy to me.

Henry, in response to your comments about not having enough info.
Below is the complete script (minus the delete function). You can see
a function in the code called activeRow() - I want this function to
essentially do the following:

x - know when a user has clicked on a given added element
(current_element.element.value).
x - when clicked, if the fields on the form related to this
element have been populated before, load them.
x - if new data is entered after element N has been clicked,
add it to an array.

The way I approached it before was to create a new array for
"every" relevant field on the form. Then, each added element (addRow
function) gets assigned a value - 0,1,2,3,4,5, etc. If
you look at activeRow( uid ) the "uid" represents the element
count. So, when an element with value, say, "4" is clicked on, then
this calls all form arrays at position "4", populating and storing
form data at that position.

The old script I posted did this but, I recently updated the
MultiUpload script and need to redo it. Is there a more graceful
way of achieving the same results using my activeRow function?

I appreciate your attention.

thanks.


var MultiUpload = new Class(
{

/**
* Constructor
* @param HTMLInputElement input_element The file input element
* @param int max [Optional] Max number of elements
(default = 0 = unlimited)
* @param string name_suffix_template [Optional] Template for
appending to file name. Use {id} to insert row number (default =
'_{id}')
* @param boolean show_filename_only [Optional] Whether to
strip path info from file name when displaying in list (default =
false)
* @param boolean remove_empty_element [Optional] Whether or
not to remove the (empty) 'extra' element when the form is submitted
(default = true)
*/

initialize:function( input_element, max, name_suffix_template,
show_filename_only, remove_empty_element ){

// Sanity check -- make sure it's file input element
if( !( input_element.tagName == 'INPUT' && input_element.type ==
'file' ) ){
alert( 'Error: not a file input element' );
return;
}

// List of elements
this.elements = [];
// Lookup for row ID => array ID
this.uid_lookup = {};
// Current row ID
this.uid = 0;

// Maximum number of selected files (default = 0, ie. no limit)
// This is optional
if( $defined( max ) ){
this.max = max;
} else {
this.max = 0;
}

// Template for adding id to file name
// This is optional
if( $defined( name_suffix_template ) ){
this.name_suffix_template = name_suffix_template;
} else {
this.name_suffix_template= '_{id}';
}

// Show only filename (i.e. remove path)
// This is optional
if( $defined( show_filename_only ) ){
this.show_filename_only = show_filename_only;
} else {
this.show_filename_only = false;
}

// Remove empty element before submitting form
// This is optional
if( $defined( remove_empty_element ) ){
this.remove_empty_element = remove_empty_element;
} else {
this.remove_empty_element = false;
}

// Add element methods
$( input_element );

// Base name for input elements
this.name = input_element.name;
// Set up element for multi-upload functionality
this.initializeElement( input_element );

// Files list
var container = new Element(
'div',
{
'class':'multiupload'
}
);
this.list = new Element(
'div',
{
'class':'list'
}
);
container.injectAfter( input_element );
container.adopt( input_element );
container.adopt( this.list );

// Causes the 'extra' (empty) element not to be submitted
if( this.remove_empty_element){
input_element.form.addEvent(
'submit',function(){
this.elements.getLast().element.disabled = true;
}.bind( this )
);
}

},

/**
* Called when a file is selected
*/
addRow:function(){
if( this.max == 0 || this.elements.length <= this.max ){

current_element = this.elements.getLast();

// Create new row in files list
var name = current_element.element.value;
// Extract file name?
if( this.show_filename_only ){
if( name.contains( '\\' ) ){
name = name.substring( name.lastIndexOf( '\\' ) + 1 );
}
if( name.contains( '//' ) ){
name = name.substring( name.lastIndexOf( '//' ) + 1 );
}
}
var item = new Element(
'span',
{
'class':'item'
}
).setText( name );
var delete_button = new Element(
'img',
{
'src':'../images/trash.gif',
'alt':'Delete',
'title':'Delete',
'events':{
'click':function( uid ){
this.deleteRow( uid );
}.pass( current_element.uid, this )
}
}
);
var row_element = new Element(
'div',
{
'class':'container',
'events':{
'click':function( uid ){
this.activeRow( uid );
}.pass( current_element.uid, this )
}
}
).adopt( delete_button ).adopt( item );
this.list.adopt( row_element );
current_element.row = row_element;

// Create new file input element
var new_input = new Element
(
'input',
{
'type':'file',
'disabled' this.elements.length == this.max )?true:false
}
);
// Apply multi-upload functionality to new element
this.initializeElement(new_input);

// Add new element to page
current_element.element.style.position = 'absolute';
current_element.element.style.left = '-1000px';
new_input.injectAfter( current_element.element );
} else {
alert( 'You may not upload more than ' + this.max + ' files' );
}

},

/**
* Called when the delete button of a row is clicked
*/

[SNIP!]

/**
* Called for populating file-particular form fields
*/
activeRow:function( uid ){
//THIS IS WHERE I NEED HELP!
},

/**
* Apply multi-upload functionality to an element
*
* @param HTTPFileInputElement element The element
*/
initializeElement:function( element ){

// What happens when a file is selected
element.addEvent(
'change',
function(){
this.addRow()
}.bind( this )
);
// Set the name
element.name = this.name + this.name_suffix_template.replace( /\{id
\}/, this.elements.length );

// Store it for later
this.uid_lookup[ this.uid ] = this.elements.length;
this.elements.push( { 'uid':this.uid, 'element':element } );
this.uid++;

}
}
);

 

[Henry]

On Sep 25, 4:03 am, pbd22 wrote:

Henry, in response to your comments about not having enough
info. Below is the complete script (minus the delete function).

<snip>

You have omitted any code for the constructors - Class - and - Element
-, their method definitions, some functions (the unwisely named - $ -
and - $defined - functions), at least two - Function.prototype -
extensions, and the code that any of this absent code depends upon,
the mark-up that this code is intend to interact with and any context
of how the code you have posted is executed/used. (Though at first
sight it looks like what you are doing is orders of magnitude more
complex than whatever it is you are trying to do needs to be).

You are unlikely to be asked again.

 

[pbd22]

On Sep 25, 2:01 pm, pbd22 wrote:> On Sep 25, 4:03 am, pbd22 wrote:



You have omitted any code for the constructors - Class - and - Element

below is the script for construction:

<script type="text/javascript">
window.addEvent('domready', function() {
new MultiUpload( $
( 'uploadForm' ).my_file_input_element, 0, '{id}', true, true );
});

-, their method definitions, some functions (the unwisely named - $ -
and - $defined - functions), at least two - Function.prototype -
extensions, and the code that any of this absent code depends upon,

I am using a javascript library for this. I have no actual prototype
declarations of my own. For the library function definitions, you will
need to look at: http://docs.mootools.net

context of how the code you have posted is executed/used.

Please see the steps marked by an "x" earlier in the thread. The
larger picture is that this is a file upload form and that I am trying
to upload multiple files at the same time using the code I have
posted. The files will all then be sent to the server in succession
for processing. Where I am getting stuck is that, for each file, the
data associated with its form elements need to be saved prior to
submit. I am working on the solution in the activeRow:function() block
that I have posted.

the mark-up that this code is intend to interact with and any

the hidden inputs get populated after the following on the form:

<input id="my_file_input_element" type="file" name="file_1" />

the other relevant fields are pretty much everything that takes data
on the form - selects, inputs, textarea, radiobuttons, etc.

Rather than dump a ton of HTML here - I have named every relevant form
element name="ff1", name="ff2", name="ff3"... name=ffn", where "n" is
the count of the final element. This way I can loop through them if
need be.

 

[pbd22]

below is the script for construction:

<script type="text/javascript">
window.addEvent('domready', function() {
new MultiUpload( $
( 'uploadForm' ).my_file_input_element, 0, '{id}', true, true );
});


I am using a javascript library for this. I have no actual prototype
declarations of my own. For the library function definitions, you will
need to look at:http://docs.mootools.net


Please see the steps marked by an "x" earlier in the thread. The
larger picture is that this is a file upload form and that I am trying
to upload multiple files at the same time using the code I have
posted. The files will all then be sent to the server in succession
for processing. Where I am getting stuck is that, for each file, the
data associated with its form elements need to be saved prior to
submit. I am working on the solution in the activeRow:function() block
that I have posted.


the hidden inputs get populated after the following on the form:

<input id="my_file_input_element" type="file" name="file_1" />

the other relevant fields are pretty much everything that takes data
on the form - selects, inputs, textarea, radiobuttons, etc.

Rather than dump a ton of HTML here - I have named every relevant form
element name="ff1", name="ff2", name="ff3"... name=ffn", where "n" is
the count of the final element. This way I can loop through them if
need be.

OK, from the mootools library -

The $ function is simply a replacement for document.getElementById

And $defined returns true if the passed in value/object is defined,
that means is not null or undefined.