Autocomplete does not work
dewolfe001 - May 18, 2007 - 16:51
| Project: | CiviNode And Civinode CCK |
| Version: | 5.x-1.0 |
| Component: | CCK Integration |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Torenware |
| Status: | closed |
Description
Autocomplete doesn't appear to work: content type includes the option of multiples if desired, but the autocomplete hook doesn't appear to be working - the HTML source confirms that. We are using Firefox 1.5.0.8 on Windows XP as well as IE 7. When the field is set to behave as an autocomplete, the autocomplete list does not give us a list of options or carry out any other function.
#1
This appears to be related to multiple values. I may need to alter the schema a bit to change this, since I don't think it allows for multiple values. But once I do this, I'll make sure that the object IDs are set up appropriately to make autocomplete work.
#2
This turns out to be fixed by the same code that fixes #145053 (Multiple values not saved). JavaScript was required to make sure that each sub-field has the necessary handlers and DOM IDs to interact with the AJAX code.
A new release is getting tested by some volunteers right now; once they say the code is working for them, I'll post the updated code to CVS.
#3
I've done some additional minor tweaks and uploaded the new code to HEAD. Please take a look at it, since it looks like I have a first pass at most of the issues the Communications Initiative folk have raised.
#4
We did install the new civinode code. We are still not seeing the autocomplete functionality. It looks like dojo.AddOnLoad is not found.
The JS error we're seeing is: "dojo is not defined" and then everything that uses dojo fails as well. It appears that it's coming from these lines:
<script type="text/javascript" src="/drupalfive/modules/jstools/activeedit/autocomplete.js"></script><script type="text/javascript">
//alert('test this');
dojo.require('dojo.widget.ComboBox');
</script>
<script type="text/javascript" defer="defer">
dojo.addOnLoad(init_cbox_field_crm_contactinfo_0);
</script>
<script type="text/javascript" defer="defer">
dojo.addOnLoad(init_cbox_field_crm_contactinfo_1);
</script>
<script type="text/javascript" defer="defer">
dojo.addOnLoad(init_cbox_field_crm_contactinfo_2);
</script>
</div>
In addition, when we've swapped these text fields to be rendered as dropdowns, they look fine. When they're rendered as autocomplete fields, they're appearing with only the text of "128" (presumable the reference id# for the current selection)
#5
Can I get access to your install? There's code that should be loading the dojo libraries (and does on my test installs) that appears not to be running. Two possible causes: a permissions issue that is preventing CiviCRM from generating the dojo headers, and a theming issue where the block that would otherwise include dojo related info is omitted.
#6
I'm guessing that not all of your JavaScript is being loaded. In a working page, there are several types of JS you should be seeing in a page.
In the HEAD section, you should see a global for Dojo, and the function definitions for the loaders and change handlers for each field:
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/misc/collapse.js"></script>
<script type="text/javascript" src="/misc/textarea.js"></script>
<script type="text/javascript">
var djConfig = { isDebug: false };
</script>
<script type="text/javascript">
function cn_cck_field_test_field_ac_0_setter(value) {
var control_did = 'cbox_val_field_test_field_ac_0';
var key_did = 'cbox_field_test_field_ac_0';
var key_handle = document.getElementById(key_did);
//if (!key_handle)
// alert('No key handle for ' + key_did);
var handle = document.getElementById(control_did);
//alert('cbox_val_field_test_field_ac_0 = ' + value + ', key = ' + key_handle.value);
if (handle) {
handle.value = value;
}
}
function init_cbox_field_test_field_ac_0(){
dojo.widget.byId('cbox_field_test_field_ac_0').setAllValues('', '');
document.getElementById('cbox_val_field_test_field_ac_0').value = '';
}
</script>
<script type="text/javascript">
function cn_cck_field_test_field_ac_1_setter(value) {
var control_did = 'cbox_val_field_test_field_ac_1';
var key_did = 'cbox_field_test_field_ac_1';
var key_handle = document.getElementById(key_did);
//if (!key_handle)
// alert('No key handle for ' + key_did);
var handle = document.getElementById(control_did);
//alert('cbox_val_field_test_field_ac_1 = ' + value + ', key = ' + key_handle.value);
if (handle) {
handle.value = value;
}
}
function init_cbox_field_test_field_ac_1(){
dojo.widget.byId('cbox_field_test_field_ac_1').setAllValues('', '');
document.getElementById('cbox_val_field_test_field_ac_1').value = '';
}
</script>
The individual items are marked as you pointed out in your post. They look correctly formed, with the right kind of DOM ID information. Each dojo AC field has two parts, one visible (with the drop down) and a hidden field to store state information. Here's the items from my test page:
<fieldset class=" collapsible"><div class="form-item">
<label for="cbox_field_test_field_ac_0">test_field_ac: </label>
<input type="text" maxlength="60" name="field_test_field_ac[0][cbox][key]" id="cbox_field_test_field_ac_0" size="60" value="" dojoType="ComboBox" mode="remote" dataUrl="/civinode/dojo/contact/4?d=1&s=%{searchString}" onValueChanged="cn_cck_field_test_field_ac_0_setter" class="form-text" />
</div>
<div class="form-item">
<input type="text" maxlength="128" name="field_test_field_ac[0][cbox][value]" id="cbox_val_field_test_field_ac_0" size="60" value="" style="display: none;" class="form-text" />
</div>
<div class="form-item">
<input type="text" maxlength="60" name="field_test_field_ac[1][cbox][key]" id="cbox_field_test_field_ac_1" size="60" value="" dojoType="ComboBox" mode="remote" dataUrl="/civinode/dojo/contact/4?d=1&s=%{searchString}" onValueChanged="cn_cck_field_test_field_ac_1_setter" class="form-text" />
</div>
<div class="form-item">
<input type="text" maxlength="128" name="field_test_field_ac[1][cbox][value]" id="cbox_val_field_test_field_ac_1" size="60" value="" style="display: none;" class="form-text" />
</div>
</fieldset>
Last, the loader information is at the bottom of the page, just above the closing /BODY tag:
<!-- /layout -->
<script type="text/javascript" src="/sites/all/modules/civicrm/packages/dojo/dojo.js"></script>
<script type="text/javascript">
//alert('test this');
dojo.require('dojo.widget.ComboBox');
</script>
</body>
All of these sections should be present in your page. If any are missing, we'll need to see as to why.
#7
OK, I think I see the problem. You folks run Drupal from a sub directory, which is fine, but not something I test. It turns out I am constructing a URL incorrectly:
<!-- /layout --><script type="text/javascript" src="/drupalfive/drupalfive/modules/civicrm/packages/dojo/dojo.js"></script>
<script type="text/javascript" src="/drupalfive/modules/jstools/activeedit/autocomplete.js"></script>
Clearly enough, I should not be doing this :-)
I'll see why this occurs, and get a fix up in a bit.
#8
The problem turns out to be running Drupal from a sub-directory. I was calculating the path to the dojo.js file incorrectly in those configurations.
I've just checked in a fixed version of civinode_utils.inc into HEAD. If this resolves your problem, I'll likely merge HEAD into the DRUPAL_5 branch.
#9
I've learned more than any reasonable person should know about how CiviCRM is configured (and mis-configured), and if you have your CiviCRM settings right, autocomplete will work if you use clean URLs, or not, and whereever you install Drupal or CiviCRM.
I've landed the current version as 5.x-1.0, the first official stable version.
#10