Vasiliy Selivanov

symfony ahDoctrineEasyEmbeddedRelations plugin, IE and Compatibility View Mode

Posted on Friday, March 18th, 2011

I have found interesting bug with symfony ahDoctrineEasyEmbeddedRelations plugin when you use IE Compatibility View Mode. Always save only 2 instance and never more. So lets find why it is happen.

so you have embeded relation

1
2
3
4
5
6
7
$this->embedRelations(array(

     'MyRelation' => array(

             .....

             'newRelationAddByCloning'=> true,

             'newRelationUseJSFramework'=>'jQuery',

             .....

    ),....

So you will see something like:

If we check what exactly happen when you click on “+” (in
/web/ahDoctrineEasyEmbeddedRelationsPlugin/js/ahDoctrineEasyEmbeddedRelationsPlugin.jQuery)  we will see that script gets all fields, copy and then replace “id”s and “name”s attributes to +1.

1
2
3
4
5
6
7
8
9
var matches;

if (matches = nameRe.exec(this.name)) { // check if its name contains [container][number]

    // if so, increase the number in field name

    this.name = this.name.replace(nameRe,'[' + container + '][' + (parseInt(matches[1],10)+1) + ']');

}

if (matches = idRe.exec(this.id)) { // check if its name contains _container_number_

    // if so, increase the number in label for attribute

    this.id = this.id.replace(idRe,'_' + container + '_' + (parseInt(matches[1],10)+1) + '_');

}

Seems to be all ok. But NOT if we are using IE in Compatibility View Mode. So what happen.

when script made first copy:

1
var $newrow = $row.clone(true);

all input, select, etc fields will copied and changed

previous row:

1
2
3
4
<input id="package_new_MyRelation_0_nameOfCheckbox"

    name="package[new_MyRelation][0][nameOfCheckbox]"

    type="checkbox"

/>

new copied row:

1
2
3
4
5
<input id="package_new_MyRelation_1_nameOfCheckbox"

    submitName="package[new_MyRelation][1][nameOfCheckbox]"

    name="package[new_MyRelation][0][nameOfCheckbox]"

    type="checkbox"

/>

Something wrong? Yes! Instead of correct “name” attribute we have correct “submitName”. Yes, this is bug in IE. And this attribute present only in IE. But it is ok for now, because anyway we will have correct $_POST/$_GET values.

But if we make copy again we will get

first row:

1
2
3
4
<input id="package_new_MyRelation_0_nameOfCheckbox"

    name="package[new_MyRelation][0][nameOfCheckbox]"

    type="checkbox"

/>

second row:

1
2
3
4
5
<input id="package_new_MyRelation_1_nameOfCheckbox"

    submitName="package[new_MyRelation][1][nameOfCheckbox]"

    name="package[new_MyRelation][0][nameOfCheckbox]"

    type="checkbox"

/>

third row:

1
2
3
4
5
<input id="package_new_MyRelation_2_nameOfCheckbox"

    submitName="package[new_MyRelation][1][nameOfCheckbox]"

    name="package[new_MyRelation][0][nameOfCheckbox]"

    type="checkbox"

/>

You see “submitName” and “name” does not changed. Why? Because for “name” attibute script gets “number” from previous row “name” field attribute (yes, it is not correct, because there is 0 (“submitName” is correct, but “name” is not)).

So how we could fix it?

It is easy if we look at the “id” attribute what is changed correct, so you should just change in /web/ahDoctrineEasyEmbeddedRelationsPlugin/js/ahDoctrineEasyEmbeddedRelationsPlugin.jQuery line 17

1
2
3
4
5
6
7
8
9
var matches;

if (matches = nameRe.exec(this.name)) { // check if its name contains [container][number]

    // if so, increase the number in field name

    this.name = this.name.replace(nameRe,'[' + container + '][' + (parseInt(matches[1],10)+1) + ']');

}

if (matches = idRe.exec(this.id)) { // check if its name contains _container_number_

    // if so, increase the number in label for attribute

    this.id = this.id.replace(idRe,'_' + container + '_' + (parseInt(matches[1],10)+1) + '_');

}

to

1
2
3
4
5
6
7
8
9
var matches;

if (matches = idRe.exec(this.id)) { // check if its name contains _container_number_

    // if so, increase the number in label for attribute

    var new_number = parseInt(matches[1],10)+1;

    if (matches_name = nameRe.exec(this.name)) { // check if its name contains [container][number]

        this.name = this.name.replace(nameRe,'[' + container + '][' + (new_number) + ']');

    }

    this.id = this.id.replace(idRe,'_' + container + '_' + (new_number) + '_');

}

I hope it is help somedays someone

Posted in: IE, jQuery, php, Symfony.