Javascript get value and text from databasejoin, auto-complete

[jcc]

I have javascript that is referenced in a change action for an item on my form. The only thing it does at the moment is show me the value of the ___property_id element in an alert:

form_44.js
function changeOwnerShown() {
alert($('___property_id').getValue());
}

The Text value of the element is 'Bob' and but the ID value is 42.

I've also tried: alert(form_44.formElements.get('___property_id').getValue());

Both show me the Text value from the look-up. How do I show the ID value of the ___property_id element?

 

[felixkat]

Is this element not in a group? Just wondering why you have ___property_id instead of listname___property_id




Using firebug gets the id for me on a database join in dropdown or autocomplete mode if I do this:-

$('listname___elementname').getValue();

 

[jcc]

Hi felixkat,

Thanks for your response.

The item is in a group, but not a list which is why there is no listname. Form is set to not write to the database also. In firebug, I can see the [ID] value as part of the form_44.formElements.___property_id.outerHTML text, but getValue() only returns the text. I am a sufficient novice at firebug to admit that I may be missing something about how to get the information.

Maybe it is because I don't have the element associated with a list?

 

[felixkat]

I don't think I've ever created a form without a list before, I've always created a list which in turn creates the form and group for you.

However I have tried to recreate your setup and it still works okay for me. It has to work in the fron end though as the backend doesn't like th fact a list isn't involved.

All I have created here is a form and group with one dbjoin element, that points to an existing list I have.

http://screencast.com/t/FezQ0T24Ofk


Maybe you don't have the dbjoin setup correctly, the value should be, in most cases, set to ID with the label setup to whatever you want to display.

 

[jcc]

I can reproduce your results if I use a drop-down, but when I change it to auto-complete, I still get what I described. Seems like auto-complete is the issue here. Can you verify?

 

[felixkat]

Yes I can verify that's the case, I forgot you were using auto-complete. I did test it earlier but that was when I had it attached to a list, which does actually work as you would expect.

What are the downsides with you using a list? Obviously I don't actually know what you are doing here.

I think this is going to be a real corner case here, using a dbjoin element without a list and getting the value of the dropdown in autocomplete mode. I can see Rob running a mile with that one... lol

 

[rob]

I tested with the auto complete and both of these work for me:

Fabrik.blocks.form_1.formElements.element_test___countries_autocomplete.get('value')

or

Fabrik.blocks.form_1.formElements.element_test___countries_autocomplete.getValue();

(which is there for backwards compatibility)

Be aware of the differnece between using $ which just get the dom node with that id, and using the object found in formElements. Its always safer to use the object as an element can consist of mutliple fields (e.g the cdd has two fields, the visible one shows the label and there is a hidden one which contains the value

Also in your first example
$('id').getValue() is deprecated in favour of
$('id').get('value')
So I'd suggest always using .get('value') over getValue()

 

[jcc]

felixkat - Thanks for the responses

Rob - Thanks for the explanation. I fell victim to using code samples from older posts.

However, I think I do still have an issue...I have changed my code to use your suggested format and simplified it somewhat. Now I have change action code that is:

var property_obj = Fabrik.blocks.form_44.formElements.___property_id.get('value');
var property_dom = $('___property_id').get('value');
alert('property_obj: '+property_obj+"\nproperty_dom: '+property_dom);

...and I added firebug watch expressions for both object and dom forms of the element:

Fabrik.blocks.form_44.formElements.___property_id.get('value')
$('___property_id').get('value')

The values that I get in the change action code are the text values (that I typed, not the selected row text) and the watch shows the ID values.????????? [See attached image.]

Is this a timing issue? ...or related to not having the element in a list (I will be testing this next)? ...and how do I get access to both the ID and text versions of the element in my change action javascript?

Thanks

 

[jcc]

Change action has typed info, blur action has ID

So I created a list with 1 element (in addition to the id and date_time) property_id as an auto-complete databasejoin. I added the same change event (changing the form id) and got the same results; in the change action event, the values of both are the text I typed in for the search while the firebug watch points showed the IDs.

I decided to try other actions to see if the values changed at different points. When I added a blur action with the same code, the ID values were displayed, so this is really a timing issue. It seems that the change action is fired before the data is replaced in the element.

I tried this on my original form and it performed exactly the same. I added text to the alert to show which action was being fired.

Change:

var property_obj = Fabrik.blocks.form_44.formElements.___property_id.get('value');
var property_dom = $('___property_id').get('value');
alert('onChange:\nproperty_obj: '+property_obj+"\nproperty_dom: '+property_dom);

Blur:

var property_obj = Fabrik.blocks.form_44.formElements.___property_id.get('value');
var property_dom = $('___property_id').get('value');
alert('onBlur:\nproperty_obj: '+property_obj+"\nproperty_dom: '+property_dom);

The attached images show the results.

So, I can get the ID value by moving my code to the blur action (the code is intended to show certain hidden elements based on this elements value.)

I see in firebug that I can find the Text value for the record that the user selected (as displayed on the screen after the change event) by examining Fabrik.blocks.form_44.form['___property_id-auto-complete'].get('value'). Is this the appropriate place to get the text value?

Thanks

 

[jcc]

I spoke too soon. If I remove the change action, the blur action shows the typed text for Fabrik.blocks.form_44.formElements.___property_id.get('value') instead of the ID.

I added the change action back with just an alert(''). With this extra step, I am getting the ID from Fabrik.blocks.form_44.formElements.___property_id.get('value') instead of the text that is typed.

So next I tried adding my code back into the change event, but getting the value before and after a blank alert.

Change action:

var beforeValue = Fabrik.blocks.form_44.formElements.___property_id.get('value');
alert('blank alert');
var afterValue = Fabrik.blocks.form_44.formElements.___property_id.get('value');
alert('Before alert: '+beforeValue+'\nAfter alert: '+afterValue );

This gives me the ID, so definitely a timing issue [see attached image]. My conjecture is that the Change action is being executed asynchronously to the Ajax functions and the Ajax calls are sufficiently slower that the Change javascript gets executed prior to the completion of the Ajax. The extra alert provides the infinitely slower human interaction which provides sufficient time for the Ajax calls to complete.

Adding an alert is, obviously, not an acceptable work-around.

The auto-complete is perfect for my needs except for this timing issue. Any thoughts? Am I trying to push a rope?

 

[cheesegrits]

Hmmmm. Yes, the problem is definitely timing issues, although not really between the change event and AJAX. The AJAX is all done prior to a selection being made from the popup, and if I'm reading what you want to do correctly, what you want is the value AFTER the user has made a selection from the menu.

What puzzles me is that we do fire a change event for the element AFTER the selection is made and the new value has been set, see line 143 of autocomplete.js (you'll need to set J!'s debug mode to see the uncompressed JS files), in the makeSelection() method. But it could be that this event is somehow being masked by some other change event firing when you blur out of the element itself to make your menu selection.

I suspect the only real solution would be for us to fire a Fabrik event, something like fabrik.autocomplete.selected or some such, at the end of the makeSelection() method, when the selection has been made and the new value set, and for your to hang a listener on that, with Fabrik,addEvent().

Rob?

-- hugh

 

[jcc]

Thanks for the response. Yes, I want the value AFTER the user selects the row (or indeed, if they just navigate out without selecting a row.)

I see what you mean about the change fireEvent occurring after the value is set. Also the possibility of a blur event somehow triggering the change event prior to the intended execution of the makeSelection() method.

I could deal with an addEvent on fabrik.autocomplete.selected, if that is what is decided is best.

 

[jcc]

friendly bump

BTW - I set a break-point in my function that is called from the onChange action and it gets called when the user clicks on the AJAX list (leaving the element) to select a record, but before the record is actually selected.

 

[jcc]

friendly bump

 

[jcc]

friendly bump

 

[cheesegrits]

Sorry, with Rob away I've been a bit slammed.

As Rob didn't offer an opinion, I've added firing the Fabrik event as mentioned above.

Should be in github.

-- hugh

 

[cheesegrits]

Oh, and I'm passing 'this' (the autocomplete object) and this.element.value (the selected value) as args.

-- hugh

 

[jcc]

Sorry to take so long to respond...I have been dealing with some customers...

I have downloaded and installed github Fabrik-fabrik-3.0.5-1003-ge8a7dc3 and I have verified that the event fires with the information that I need. This works very well.

Thanks for your help!

 

[jcc]

@cheesegrits - I think I spoke a little too soon. If the user does not select an item from the list, I get an undefined type error from line 142 in autocomplete.js (makeSelection function). I think this is new.

 

[jcc]

Proposed code

@cheesegrits - This is my hack at what I think is needed for the unhandled exception. Comments?

        makeSelection: function (e, li) {
                //  $$$ tom - make sure an item was selected before operating on it.
                if (typeof li != "undefined") {
                    this.getInputElement().value = li.get('text');
                    this.element.value = li.getProperty('data-value');
                    this.closeMenu();
                    this.fireEvent('selection', [this, this.element.value]);
                    // $$$ hugh - need to fire change event, in case it's something like a join element
                    // with a CDD that watches it.
                    this.element.fireEvent('change', new Event.Mock(this.element, 'change'), 700);
                    // $$$ hugh - fire a Fabrik event, just for good luck.  :)
                    Fabrik.fireEvent('fabrik.autocomplete.selected', [this, this.element.value]);
                } else {
                    //  $$$ tom - fire a notselected event to let developer take appropriate actions.
                    Fabrik.fireEvent('fabrik.autocomplete.notselected', [this, this.element.value]);
                }
        },