PDA

View Full Version : form ids to ajax?



benny
23 Apr 2007, 5:35 AM
Hi,

Using the Ext features to create a form seems to create form elements with id's generated on the fly. For example my button has the id of 'ext-gen166' and a text field has 'ext-comp-1008'.

Now I'm guessing I cannot rely to much on the above id's as they could change as I add more forms.

Take my scenario:
I have a form with one text field and button.
I want to send the value of the text field through ajax when the button is clicked.

Right now I'm using:

<script>
Ext.onReady(function(){
Ext.get('ext-gen166').on('click', function(){
var msg = Ext.get("all-cats");
msg.load({
url: ['category-side-edit.php'],
params: "new=" + Ext.get('ext-comp-1008').dom.value,
text: "Updating..."
});
msg.show();
});
});
</script>

It did work for a while, but fails at times (probably the generated ids have changed).

Is there a known correct method of doing the above without having to hard code these generated ids?

benny
23 Apr 2007, 8:02 AM
... nevermind, I found a way to do the above.

KimH
26 Apr 2007, 11:39 PM
... nevermind, I found a way to do the above.
You want others to help but you don't wanna share? ;) Please at least tell everyone else how you solved your problem!? :)

benny
27 Apr 2007, 12:37 AM
You are absolutely correct KimH, I should have presented details on how I solved this problem (I usually do).

Here is my new code, note that I set the text field id (did not use the generated one).

Form HTML:

<div id="form-add-category"></div><!--text field-->
<div id="add-cat-button"></div><!--button-->

.. and the JS:

var top = new Ext.form.Form({
labelAlign: 'top'
});

top.column(
{width:105},
new Ext.form.TextField({
fieldLabel: 'New Category',
id: 'new-cat-id',
name: 'new-cat',
width:105
})
);

top.render('form-add-category');
var btn3 = new Ext.Button('add-cat-button');
btn3.getEl().addClass('x-btn-text-custom');
btn3.setText('Add Category');

// button event
Ext.get('add-cat-button').on('click', function(){
var msg = Ext.get("all-cats");
msg.load({
url: ['category-side-edit.php'],
params: {'new': Ext.get('new-cat-id').dom.value},
text: "Updating..."
});
msg.show();
});