netteForms.js (Nette 2.3)

Kori

Hi, I just upgraded my app from Nette 2.2.5 to 2.3 and found (possible) bug in netteForms.js

When form is created with Nette\Application\UI\Multiplier there is a javascript error

TypeError: elem[i] is undefined

on line 37

if (elem[i].type in {checkbox: 1, radio: 1} && !elem[i].checked) {

How to reproduce:

protected function createComponentAddToBasketForm()
{
	return new Nette\Application\UI\Multiplier(function($item) {

		$form = new Nette\Application\UI\Form();
		$form->addText('pieces');
		$form->addHidden('item');
		$form->addSubmit('send', 'Add');
		$form->onSuccess[] = function($form, $values) {
				.....
			};

		return $form;
	});
}

simple output in latte

{foreach $products AS $product}
	{control addToBasketForm-$iterator->counter}
{/foreach}

Tested with Firefox 36.0.1, jQuery v. 1.11.2, nette.ajax.js v. 1.2.2

Last edited by Kori (2015-03-20 22:23)

Kori

After further investigation, I have to say, the problem is not related to Nette\Application\UI\Multiplier, but to all form elements with name="item". My form generated by multiplier was the only one in my app with inputs with this name.

Tested with https://github.com/…etteForms.js

protected function createComponentTestForm()
{
	$form = new Nette\Application\UI\Form();
	$form->addCheckbox('item'); //error
	$form->addCheckbox('item1'); //ok
	$form->addText('item'); //error
	$form->addText('item1'); //ok
	$form->addPassword('item'); //error
	$form->addPassword('item1'); //ok

	... etc

	return $form;
}

Kori

I debugged the script with

$form->addText('item');

and problem is with this condition

https://github.com/…etteForms.js#L63

When element.name = "item" evaluation of

elem.form.elements[elem.name] = function item()
elem.form.elements[elem.name].tagName = undefined

Solution:

Change selector of form.elements from elem.form.elements[elem.name] to elem.form[elem.name]

elem.form[elem.name] = <input type="text" class="text" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;dfsfsdf&quot;}]" required="" id="frm-testForm-item" name="item">
elem.form[elem.name].tagName = 'INPUT'

Fixed in 2.3.1 by David

Last edited by Kori (2015-04-01 07:30)