By mistresskim on

I'm trying to get a dependent autocomplete node reference field happening in D6 based on this older Dojo tutorial "An autocomplete nodereference field that is dependent upon a choice made in another".

The following code is supposed to populate the Contact input box with a refined set of autocomplete suggestions after the user selects a Company. 

 if (Drupal.jsEnabled) {
    $(document).ready(function() {
    	
    	  $("#edit-field-ticket-company-0-nid-nid").blur(function() {
        companyvalue = $("#edit-field-ticket-company-0-nid-nid").attr("value");
        re = /\[nid:(.*)\]/;
        resarray = re.exec(companyvalue);
        if (resarray) company = resarray[1];
       
        $('input.autocomplete[@id^=edit-field-ticket-contact-]').each(function () {
        	this.value ="http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company;
          
          Drupal.behaviors.autocomplete();
       });
     })
   })
 }

The input value is set to the new handler (ie. http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company) but the autocomplete input box for Contact still displays all the contacts. When I check the page source I see value = "http://localhost:8888/drupal64/nodereference/autocomplete/field_ticket_c...", which is the default node reference one.

I tried $("#edit-field-ticket-contact-0-nid-nid").unbind();

before setting the value but that just killed the autocomplete functionality all together. So I'm not sure what to do next. Does anyone else know how to override the default node reference autocomplete handler?

Comments

mistresskim’s picture

mistresskim commented

So I tried the suggestion by Iumentum here of unbinding events, removing the autocomplete-processed class and attaching the behaviors again. But the Drupal.attachBehaviors(document); has no effect. Can anyone explain why? 

if (Drupal.jsEnabled) {
    $(document).ready(function() {
    	
    	  $("#edit-field-ticket-company-0-nid-nid").blur(function() {
        companyvalue = $("#edit-field-ticket-company-0-nid-nid").attr("value");
        re = /\[nid:(.*)\]/;
        resarray = re.exec(companyvalue);
        if (resarray) company = resarray[1];
      
        $("#edit-field-ticket-contact-0-nid-nid").value ="http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company;
         $("#edit-field-ticket-contact-0-nid-nid").unbind('keydown');
          $("#edit-field-ticket-contact-0-nid-nid").unbind('keyup');
	  $("#edit-field-ticket-contact-0-nid-nid").unbind('blur');
	  $("#edit-field-ticket-contact-0-nid-nid").removeClass('autocomplete-processed');
          Drupal.attachBehaviors(document);
     })
   })
 }
cdale’s picture

cdale commented

Sorry for the late reply. I'm only just working on this now myself. :)

It looks like you're setting the value, and performing the removeClass on the wrong elements. There is actually a hidden field that is used for these items. It can be confusing as you have the unbind events are on the correct items.

What you need to do is replace:
$("#edit-field-ticket-contact-0-nid-nid").value ="http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company; and
$("#edit-field-ticket-contact-0-nid-nid").removeClass('autocomplete-processed');

with

$("#edit-field-ticket-contact-0-nid-nid-autocomplete").value ="http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company; and
$("#edit-field-ticket-contact-0-nid-nid-autocomplete").removeClass('autocomplete-processed');
Note the different css id.

Making the whole thing look like:

if (Drupal.jsEnabled) {
    $(document).ready(function() {
   
      $("#edit-field-ticket-company-0-nid-nid").blur(function() {
        companyvalue = $("#edit-field-ticket-company-0-nid-nid").attr("value");
        re = /\[nid:(.*)\]/;
        resarray = re.exec(companyvalue);
        if (resarray) company = resarray[1];
     
        $("#edit-field-ticket-contact-0-nid-nid-autocomplete").value ="http://localhost:8888/drupal64/intranet/ticket/contact/autocomplete/" + company;
        $("#edit-field-ticket-contact-0-nid-nid").unbind('keydown');
        $("#edit-field-ticket-contact-0-nid-nid").unbind('keyup');
        $("#edit-field-ticket-contact-0-nid-nid").unbind('blur');
        $("#edit-field-ticket-contact-0-nid-nid-autocomplete").removeClass('autocomplete-processed');
        Drupal.attachBehaviors(); // No need to pass document. Drupal.attachBehaviors takes care of this
     })
   })
}

It is a very subtle difference. Drove me mad for a good 10 minutes.

danylevskyi’s picture

danylevskyi
Location Myrhorod / Ukraine
commented

Hi guys!

cdale, your method works, but with one input only.

Now I have 3 inputs: Country->Province->City
After Country blur I am changing autocomplete path of Province. Works fine.
But!! When I am trying to change City input in the same way - it fails...

    $("#edit-country").blur(function() {
      var country = $(this).val();
      $("#edit-province-autocomplete").attr("value", base_path + "/uloc/autocomplete/" + country);
      $("#edit-province").unbind('keydown');
      $("#edit-province").unbind('keyup');
      $("#edit-province").unbind('blur');
      $("#edit-province-autocomplete").removeClass('autocomplete-processed');
      Drupal.attachBehaviors();
    });
    
    $("#edit-province").blur(function() {
      var province = $(this).val();
      $("#edit-city-autocomplete").attr("value", base_path + "/uloc/autocomplete/" + country + "/" + province);
      $("#edit-city").unbind('keydown');
      $("#edit-city").unbind('keyup');
      $("#edit-city").unbind('blur');
      $("#edit-city-autocomplete").removeClass('autocomplete-processed');
      Drupal.attachBehaviors();
    });

It simply doesn't want to change autocomplete paht. :(
Where can be the problem and why?
Thanks in advance!