Autocompleate AJAX field with ReDirect URL post

Hi All,

I'll try and keep this short, I'm using CF v4 rc3.11 and I've been trying to add an AJAX auto complete form element, which will also pass the value data on as part of the already working ReDirect URL post. However after week's of trying and searching how to and trying different AJAX libraries and methods, I'm now at a loss and need pointing in the right direction. I'm not familiar with mootools and relatively new at AJAX, so getting confused with all the different tutorials around.

So this is where I am currently upto:

I have form which posts values to another url, where the data is then dealt with, I also a database table with a list of citys, which I would like to become the autocomplete.

I have created a new text element on my form, added a new Autocomplete Loader event and the autocomplete Processor, but when I run the form I just get a blank page with "[]"

Everything appears to be set fine apart from the AJAX event box in the Autocomplete Loader settings, this is where I'm stuck... what should go in this box?

I have tried all sorts with out any effect... I assume I should be creating another custom code event in the onload and put an AJAX script in here? (if so how do I get the script to pass the data on via post? or even work!) or Do I need to put something like "Autocompleter.Ajax" in this box?

Another question... do I even need to use Digitarald library or is the Jooomla mootools capable of doing what I need?


Thanks

Terry

Hi Terry,

Please take a Form Backup using the icon in the Forms Manager and post it here (as a zipped file) or PM or email it to me and I'll take a closer look.

Bob

Hi Terry,

The Autocomplete Processor needs to go into its own event. Click the Add button under the On Submit event and give the new event a name. I used 'autocomplete'. Drag a new Autocomplete Processor action there, copy the settings over, and delete the copy from the On Load event.
[attachment=1]21-02-2012 14-14-18.png[/attachment]

Edit the Autocomplete Loader action to put the name of your new event into the AJAX event box.

Reload the form and check that it works.
The version below is looking up article titles in the jos_content table

Bob

[attachment=0]21-02-2012 14-28-28.png[/attachment]

Hi Bob,

Simple as that... working like a charm now.

One quick question though, where is the CSS / style information for the autocomplete drop-down pane?

Many Thanks

Hi Terry,

Hmmm it's embedded in the action (which is not ideal). You can probably over-ride it in a Load CSS action using !important. The default is:

ul.autocompleter-choices { 
  margin:0; 
  position:absolute;
  width:339px;
  padding:0;
  list-style:none;
  z-index:50;
  background:#3b5998;
  border:1px solid #3b5998;
  top:0;
}
ul.autocompleter-choices li {
  margin:0; 
  list-style:none;
  padding:0px 10px;
  cursor:pointer;
  font-weight:normal;
  white-space:nowrap;
  color:#fff;
  font-size:11px;
}
ul.autocompleter-choices li:hover { 
  background:#eceff5; 
  color:#3b5998;
}
.search-working {
  background:url(/administrator/components/com_chronoforms/form_actions/autocomplete_loader/assets/indicator_blue_small.gif) 200px 7px no-repeat; 
}

I ran a quick test and tried this in the Load CSS action

ul.autocompleter-choices { 
  background: silver !important;
  text-align: left !important;
}
ul.autocompleter-choices li {
  color: navy !important;
}

and that seems to work OK.

Bob

Great thanks Bob,

I'm afraid to say I'm having problems setting up an autocompleter on a different development site. I cannot get the field to display any results and I'm not sure why, all seems set correctly.

The only difference in my development site is that it does not yet have a valid CF license... I assume that is not the issue?

I have attached the form backup for you to see

Many Thanks
Terry

Hi Terry,

The license isn't the issue (the free version is fully functional).

It work OK here, I changed the Processor to point to jos_content again with the column name as title and it's fine.

My best guess is that there's a JavaScript conflict on the page. I see that the site uses JQuery so that is probably the problem. See this tutorial for some possible fixes.

Bob

Bob

Hi Bob,

Thank you, but I'm sure you looked at the live site which does run JQuery however the development version does not. I have checked for other Javascript errors etc but cannot find anything, the new site has been stripped of all JQuery and the like for these reasons!

I have notice that if I enable validation, it is ignored unless I add the &tmpl=component to the URL, which would seem to point at a template issue, but there's nothing to conflict with that I can see, have I missed something!

I have PM you a link to the development site

Many Thanks

Hi Terry,

The templated version has been stripped too far back and isn’t loading any scripts or stylesheets except for one CSS file. You need to put <jdoc:include type="head" /> back in the header section.

Bob

Thanks Bob,

What a stupid thing to miss, thanks for your help.

Enjoy your beer

Terry

Hello Bob,

There must be something that I am missing; I have got a single field form as defined below, the field points to the 'title' field in the joomla table jos_weblinks, I have put the name of the autocomplete processor event in the appropriate autocomplete loader field.
When I run the form I can see the field, but nothing happens when I start a value I know exist in the database table.

Any ideas what I am doing wrong?

Kind regards.

Hi romosheb,

Everything here looks OK. Please post a link to the form so I can take a quick look.

Bob

Hi romosheb,

There's a JavScript error from the MooMenu in the template but if you view the form without the template at Joomla_2.5.1/index.php?option=com_chronoforms&chronoform=testform&tmpl=component the AutoCompleter works OK.

I changed the order of actions in the On Load event so that the AutoComplete is before the Show HTML (I don't know if this is needed or not but it seems logical).

Bob

Hello Bob,

That worked!

Many thanks for your help.

I don't know why the order change should make it work, but thanks again.

Kind regards.