works in IE, Not in FF, Safari, Chrome

[KB]

Excuse the newbie question, but I am using the following function to
add a new author row in a form. It works as it should in IE but not in
FF, Safari or Chrome. We're using v1.0 (beta 2).

FF chokes on " lastAuthor.querySelectorAll" and firebug shows
"lastAuthor.querySelectorAll("input[type=text]").forEach is not a
function"

Any thoughts or suggestions will be appreciated.

Thanks in advance.

Kyle

==============================================================


function colAddAuthor (evt) {
/* On the Authors widget, add another row for a new author */

// Grab the container and clone the existing last-author
var authorsContainer = document.getElementById("authors-
container");
var lastAuthor = document.getElementById('last-author-box');
var cloneAuthor = lastAuthor.cloneNode(true);
base2.DOM.bind(cloneAuthor);

// Clean up the clone: remove the Add Author button, make it not
// be an id of last-author.
var cloneButton = cloneAuthor.querySelector("input[name=submit]");
cloneAuthor.removeChild(cloneButton);
cloneAuthor.removeAttribute("id");

// The last row should now be emptied, as its clone has
// whatever data was in it
base2.DOM.bind(lastAuthor);
var lastHidden = lastAuthor.querySelector("input.hidden");
lastHidden.value = "";
lastAuthor.querySelectorAll("input[type=text]").forEach(function
(element) {
element.value = "";
});

// Now insert it
authorsContainer.insertBefore(cloneAuthor, lastAuthor);
};

[Dean Edwards]

On 16/10/2009 21:27, KB wrote:
>
> Excuse the newbie question, but I am using the following function to
> add a new author row in a form. It works as it should in IE but not in
> FF, Safari or Chrome. We're using v1.0 (beta 2).
>
> FF chokes on " lastAuthor.querySelectorAll" and firebug shows
> "lastAuthor.querySelectorAll("input[type=text]").forEach is not a
> function"
>

You are using a beta release. Does version 1.0 solve the problem?

http://base2.googlecode.com/svn/version/1.0/

-dean

[KB]

Thanks Dean. I did that and it fixed this problem. I'm now seeing a
different issue and only in IE7.

[Dean Edwards]

On 19/10/2009 21:22, KB wrote:
>
> Thanks Dean. I did that and it fixed this problem. I'm now seeing a
> different issue and only in IE7.
>

What's the new issue?

-dean

[KB]

same form, different functions, different issue. Like I said, it now
works in FF, Chrome, Safari & IE8. However in IE compatibility mode
(or browser mode= IE7), it fails.

Basically, we're using some JS to submit the contents of the author
fields on a form (the same rows that were not being added before). As
I'm not as familiar with IE's developer tools as with firebug, I can't
yet point to exactly what is causing it to fail.

Here are the 2 functions in use:

function colUpdateAuthor (evt) {
// Update the author lastname/firstname fields from/to
// a hidden form field.

// Grab which field changed, plus its parent
var target = evt.target;
var parent = target.parentNode;
base2.DOM.bind(parent);

// Next, grab the hidden field and its value, and split into
// lastname/firstname parts
hidden = parent.querySelector("input.hidden");
var hiddenvalue = hidden.value;
var hiddenvalues = hiddenvalue.split(", ");
var hiddenlast = hiddenvalues[0];
var hiddenfirst = hiddenvalues[1];

// Based on which visible field we are on, do an update
var whichpart = target.getAttribute("name").split("-")[1];
if (whichpart == "lastname") {
if (target.value == '' && hiddenlast) {
// If the current value is empty, that means this
function
// is called on page load. Thus, read *from* the hidden
field
// and *into* the visible field.
target.value = hiddenlast;
} else {
// If there is a @value attribute, that means we are
// called after pageload, when onchange is called.
Therefore,
// assign *from* the target *to* the hidden field.
// If hiddenfirst is undefined, we are an on add screen,
// not an edit.
if (target.value.length > 0) {
hidden.value = target.value + ", " + hiddenfirst;
} else {
hidden.value=hiddenfirst;
};
};
} else if (whichpart == "firstname") {
if (target.value == '' && hiddenfirst) {
// If the current value is empty, that means this
function
// is called on page load. Thus, read *from* the hidden
field
// and *into* the visible field.
// If hiddenfirst is undefined, we are an on add screen,
// not an edit.
target.value = hiddenfirst;
} else {
// If there is a @value attribute, that means we are
// called after pageload, when onchange is called.
Therefore,
// assign *from* the target *to* the hidden field.
if (target.value.length > 0){
hidden.value = hiddenlast + ", " + target.value;
} else {
hidden.value=hiddenlast;
};
};
};
};

/* Now wire up functions to nodes by scannning the DOM.
This is called on page load. */
function colInit () {

// See if we're on a form, and if so, do some things
var isform = document.querySelector("head meta
[name=formcontroller]");
if (isform) {

// Register some handlers based on which form type
var formtype = isform.getAttribute("content");
if (formtype == 'file' || formtype == 'libraryfile') {
document.querySelectorAll("#authors-container input
[type=text]").forEach(function(element) {
// Handle T1236, split Authors into lastname/firstname
element.addEventListener("change", colUpdateAuthor,
false);
// Simulate the first update by pretending to fire the
event
var evt = new Object();
evt.target = element;
colUpdateAuthor(evt);
});
};

};

}
base2.DOM.bind(document);
document.addEventListener('DOMContentLoaded', colInit, false);

Any thoughts or suggestions you have will be appreciated.

Thanks, Kyle

[Sanford Whiteman]

Do you have a test page up for this?

-- Sandy

[Dean Edwards]

On 19/10/2009 23:51, KB wrote:
>
> same form, different functions, different issue. Like I said, it now

> works in FF, Chrome, Safari& IE8. However in IE compatibility mode

> (or browser mode= IE7), it fails.
>
> Basically, we're using some JS to submit the contents of the author
> fields on a form (the same rows that were not being added before). As
> I'm not as familiar with IE's developer tools as with firebug, I can't
> yet point to exactly what is causing it to fail.
>

Can you provide a test page?

-dean

[KB]

Not easily. The server where I've made the update to version 1.0 is
currently our dev site and is inside our network. The public site
still shows the original error caused by the beta release.

I will however try to replicate it in a public site and post it here
once I do.

Thanks for all your help.

--Kyle

[Marijn Huizendveld]

Why not post your example code to a service like gist.github.com?

Good luck,

Marijn

[KB]

I've thought of that Marijn but am afraid that the code out of context
won't make any sense.

To close the loop, here's what I know about this issue...

1) The form in question: http://conserveonline.org/library/@@add-libraryfile.html
(which unfortunately requires creating a free account to access). This
site is still running the beta release.
2) Originally, users in IE were able to "Add More Authors" but not
users in FF, Safari or Chrome / chromium. In fact, the values entered
in the author fields are lost in submission for non-IE browsers.
3) Updated the dev server to version 1. Everything that follows is
from testing on the dev server.
4) Now, FF, Safari & Chrome are able to add more authors and submit
successfully. "Undefined" value now appears in any empty author (last
name) fields.
5) IE8 with Compatibility View off allows for adding more author field
elements and submitting successfully. Like FF above, "undefined"
value now appears in any empty author (Last name only) fields. Also,
when adding a new author field element, "Stack Overflow at line 0"
alert appears but the new fields are added to the form anyway.
6) IE8 with compatibility view on does not allow for adding new author
field elements to the form nor is the form submitted with the authors
-- values are lost in submission.

On Oct 20, 10:00 am, Marijn Huizendveld <marijn.huizendv...@gmail.com>
wrote:

[KB]

after a couple of requests, a test form is here --
http://burfordweb.com/addauthor/addForm.html

It's the "Add More Authors" that is giving me troubles in IE. It works
as expected in safari, chrome, FF.

In IE8, I get a "Stack overflow at line: 0". In IE7, I can add one
additional author but on the second, get an "Invalid argument" error
at this section in the colAddAuthor() function....

cloneAuthor.removeChild(cloneButton);

Commenting out that line allows me to add as many new authors as I
like but each line has its own "Add More Authors" button.

Any and all thoughts will be appreciated.

Thanks.

--Kyle