PDA

View Full Version : Chrome: duplicating fields issue



adetogni
17 Feb 2011, 1:13 AM
Hi,
i've been using Ext 3.3.1 for a kind-of CRM application. 90% of the app is written in Ext. I use grids, windows, comboboxes etc. Working nice so far.

The problem that I face is this:
- Window X has a form in it, and one of the hidden fields in that form has id = "programid"
- Window Y has another form it, with another name, but has another field with the same id = "programid"
- If I follow this sequence of operations:
1) Open Window X
2) Close Window X
3) Open Window Y
it happens that Window Y now has TWO fields with the same id. Both of them have id = "programid", but one is empty and one has the value of programid that window X had.

* This seems to happen only in Chrome. Not happening on Firefox, and I haven't tested in IE (but I use Chrome frame in IE...)*

This is messing up things, because when I send the form, the value of programid is sent twice and the logic is not expecting it.

I solved the issue by never having the same id in different forms (even if I think it's still a bug, because those fields should have different scopes...)

HOWEVER there is one field that I cannot have different. It's the TASK one, which is the one that my JSON-SET function reads to determine which information to provide/get. I have one get-json.php and one set-json.php and they send back (or receive) JSON data based on the TASK parameter.
So for example the TASK could be "SAVE-PERSON" or "SAVE-CLIENT" or "SAVE-PHONE" and the very first line of the set-json.php is reading that parameter and acting in consequence.
So I cannot have different TASK (or I will have to write one single set-json PER action...).

Check this screenshot:
http://screencast.com/t/KWG8pld29
As you see, the TASK is sent twice. One is "ADD-PROGRAM" (the correct one) and one is "EDIT-PROGRAM" (the previous one)

Have you ever experienced this? Do you know how to fix it (without having to write one single couple of GET/SET JSON php files PER task)?

I'm happy to share code if needed (even if it's quite big).

Thanks

adetogni
19 Feb 2011, 7:19 AM
Anyone has an idea about this?

drian
20 Feb 2011, 4:49 AM
Shouldn't IDs be unique in the whole DOM? If you look carefully you'll see that the id you put for any of extjs componet is the actual html id attribute.

Use 'name' property and 'hiddenName' for combobox and I suggest you encapsulate your fields in a form and when you pass the params you should use yourForm.getForm().getValues()

I personally use the same form for both add/edit actions. I call my functions called addRecord and editRecord and configure my form depending on what action i want to do. In addRecord i initialize the values, and in editRecord i use .setValues on my form to set the values to the desired record's values.

When saving my form i use a 3rd function AddEditAction which sends an ajax request with params: myForm.Form.getForm().getValues().. and that's it.

adetogni
20 Feb 2011, 6:39 AM
Shouldn't IDs be unique in the whole DOM? If you look carefully you'll see that the id you put for any of extjs componet is the actual html id attribute.

Yes, that's what I discovered recently...



Use 'name' property and 'hiddenName' for combobox and I suggest you encapsulate your fields in a form and when you pass the params you should use yourForm.getForm().getValues()

Yes, I did so, and all fields are in a form, and I get data with getForm().getValues()



I personally use the same form for both add/edit actions. ...

When saving my form i use a 3rd function AddEditAction which sends an ajax request with params: myForm.Form.getForm().getValues().. and that's it.
That's EXACTLY what I do. But your json write function (the php side that reads the call) must discriminate if it's a ADD or EDIT call. So I have one hidden field, called "TASK" where I set "ADD" or "EDIT", and when the form is sent, that value is read to determine if it's an add or edit.
Thanks to this method I can use just one single php file, with all the php functions: the first line reads the "TASK" variable and determine what to do.
Therefore, the TASK field is always the same ID.

Check this piece of code from set-json.php (all Ext stores are set to work with this set-json.php file)



$task='';
if (isset($_POST['task'])) {
$task = $_POST['task']; // Get this from Ext
}

switch($task){
case "ADD-ACTION":
addAction();
break;
case "EDIT-ACTION":
editAction();
break;
case "ADD-PROGRAM":
addProgram();
break;
case "EDIT-PROGRAM":
editProgram();
break;


How your server-side is understanding if it's an ADD or EDIT? Do you have separate php files for add and edit?

Thanks

drian
20 Feb 2011, 7:50 AM
My server side action works for both add/edit. I use a hidden field in my form which is actually the ID of the edited record (if i'm editing a record) or it's empty if i'm creating a new record.

I think this will work as long as you have only 1 instance of your window on the page.

When you add and edit you can call 2 separate function .. like this:

addRecord (){
myForm.getForm().setValues({
myHiddenField : 'ADD' //myHiddenField is the name of the hidden field from the form
})
}


editRecord (){
myForm.getForm().setValues({
myHiddenField : 'EDIT'
})
}

adetogni
20 Feb 2011, 9:04 AM
That's exactly what I do, drian.
I have one "myHiddenField" which is ADD or EDIT. But since my app has multiple editable form (on the same page and or/windows generated from the same page), the same ID is used in multiple forms.
It seems that I will have to separate the PHP get/set functions.

The curious fact is that this happens only in Chrome, but not in Firefox...

drian
20 Feb 2011, 10:46 AM
leave alone the ID! (dont use it), use only "name" (and "hiddenName" for comboboxes) - it should work.

IDs are unique, you can't have the same id multiple times on the same page.

adetogni
20 Feb 2011, 11:37 AM
leave alone the ID! (dont use it), use only "name" (and "hiddenName" for comboboxes) - it should work.

IDs are unique, you can't have the same id multiple times on the same page.
Thanks drian. I tried replacing ID with Name and the bug disappeared.
So it seems that I was doing a fundamental error by using ID instead of Name. :-)