New AJAX-driven Inputfields - JS problems in core inputfields

[bcartier]

There seems to be a problem with loading required javascript files for inputfields when a field is loaded via AJAX. For example, if I set the visibility of an Page reference field that uses asmSelect, the inputfield UI doesn't load (it's just a plain multi-select) and I'm seeing a JS error "$select.asmSelect is not a function". 

When ajax loads the fieldtype, it seems as though it's not loading  jquery.asmselect.js

Do these core inputfields need to be updated? How to write new inputfields so that the required js in included correctly when the field is loaded by AJAX? Has anyone found a solution to this? 

Thanks guys!

-Brent

edit: here's the announcement about these new AJAX options. It says that "The AJAX-driven features should now work with all core input fields (yes, even including files/images, repeaters (!), PageTable, asmSelect, and so on)." but it's not working for me in the Reno, or default theme.

I'm working with the latest dev version of PW (2.6.17)

[kongondo]

Does anyone know if this was resolved? I'm still experiencing the same problem as @bcartier in ProcessWire 3.0.85. Asm and Autocomplete resources are not loaded. I don't get errors though in the console.. 

[bernhard]

On 16.9.2015 at 9:38 PM, bcartier said:

How to write new inputfields so that the required js in included correctly when the field is loaded by AJAX?

Don't know about the core Inputfields but this can easily be done by adding scripts in the init() method of the module, not the render method.

[kongondo]

1 hour ago, bernhard said:

Don't know about the core Inputfields but this can easily be done by adding scripts in the init() method of the module, not the render method.

Problem (at least what I experienced)  is that in an Inputfield, init() doesn't yet know about the Fieldtype it belongs to, i.e. you can't get info about $field. That means you cannot dynamically load scripts. It's all or nothing.

Edited January 2, 2018 by kongondo

[bernhard]

10 hours ago, kongondo said:

That means you cannot dynamically load scripts. It's all or nothing.

true... though I had no problem with that so far and I can't really imagine a situation where this would be a problem? do you have an example?

regarding the initial question: just tried an ASM loaded by ajax on a fresh DEV and it worked without any issues.

[kongondo]

8 minutes ago, bernhard said:

though I had no problem with that so far and I can't really imagine a situation where this would be a problem? do you have an example?

Yes. In our Image Marker Fieldtype module, there is a configuration for selecting pages to add as markers using either Asm or Auto complete. This works fine in normal pages and PageTable. In Repeaters though, the resources do not get loaded, so Asm or Autocomplete do not work. I have only tested with the Repeater set to load content via Ajax. Ideally, I would like to be able to check the Image Marker field setting in init() to see whether to load the Asm or Autocomplete resources. Loading both works,  but it means we are always loading resources we are not using and populating $config with redundant stuff. It's not a big deal but it would be nice to load only what we need.

Edited January 3, 2018 by kongondo

[bernhard]

Ok just checked ASM inside an ajax loaded repeater with ajax loaded repeater items and this also works.

Thanks for your example. That makes sense... Shouldn't it be possible to hook the buildForm method, check for your field and add scripts depending on the field settings there? A little

This works:

$wire->addHookAfter('ProcessPageEdit::buildForm', function($event) {
  $form = $event->arguments(0);
  foreach($form->fields as $field) {
    if($field->name != 'testasm') continue;

    if($field->inputfield == 'InputfieldAsmSelect') $this->config->scripts->add('/site/templates/scripts/alert.js');
    else $this->config->scripts->add('/site/templates/scripts/otheralert.js');
  }
});

But I agree it would be nice to have this built into the inputfield somehow...

[Robin S]

On 03/01/2018 at 11:21 PM, kongondo said:

In our Image Marker Fieldtype module, there is a configuration for selecting pages to add as markers using either Asm or Auto complete. This works fine in normal pages and PageTable. In Repeaters though, the resources do not get loaded, so Asm or Autocomplete do not work.

If you add a renderReady() method to your inputfield module and load the dependencies there then they should be available for all inputfield usages including repeaters. Check out the Inputfield class, and the AsmSelect inputfield as an example.

 

[kongondo]

5 minutes ago, Robin S said:

If you add a renderReady() method to your inputfield module and load the dependencies there then they should be available for all inputfield usages including repeaters. Check out the Inputfield class, and the AsmSelect inputfield as an example.

 

@Robin S

Excellent, thanks. I will have a look. Do you know if I'll have access to the $field at this point? I.e. the Fieldtype the Inputfield belongs to.

Edited January 5, 2018 by kongondo

[Robin S]

12 hours ago, kongondo said:

Do you know if I'll have access to the $field at this point?

Yes, I think so. The method comment says...

Quote

Method called right before Inputfield markup is rendered

...so it should be possible to get the field. E.g.

public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
    $field = $this->hasField;
    if($field) {
        //...
    }
    //...
}