Ajax-driven inputfields development how-to

[valan]

I'd like to create custom ajax-driven inputfield. Ajax-driven inpufields where introduced here: http://processwire.com/blog/posts/new-ajax-driven-inputs-conditional-hooks-template-family-settings-and-more/#new-ajax-driven-inputfields-system-wide, but since that time I haven't seen any "how-to" tutorials. I'd like to learn from core code, but can't understand which files to check.

Can someone suggest which core/module files I have to check in order to learn from code and be able to create custom ajax-driven inputfields?

 

[Zeka]

Hi.

From the mentioned blog post 

Quote

If you want to use these AJAX modes in your own Inputfield forms (from the API side), see the new collapsedYesAjax and collapsedBlankAjax constants at the top of /wire/core/Inputfield.php.

 

[valan]

@Zeka hi! This file has only declaration of constants. There should be better sources to learn  

[valan]

Well, specifically, I'm interested to know how to pass js to the page on ajax call. Currently ajax-driven inputfields work only for fields that do not set js inside render(). But what to do if I have such code in render()?

        $this->wire('config')->js($this->attr('id'), [
            'config' => $my_array,
        ]); 

Moving it to init() does not work, as $this->attr('id') is not set at that moment.

Adding js script (with <script>my_js_code_that_sets_config();</script>) to redner() output also does not work - script tags are removed by PW.

P.S. Just in case if it matters - I'm developing inputfield for FieldtypePage, e.g. it is added to InputfieldPage inputfieldClasses setting.

[LostKobrakai]

The question is what information do you need to pass into the js config? 

[Robin S]

12 hours ago, valan said:

Well, specifically, I'm interested to know how to pass js to the page on ajax call. Currently ajax-driven inputfields work only for fields that do not set js inside render(). But what to do if I have such code in render()?

I think renderReady() is the right place to load any JS dependencies.

Quote

Method called right before Inputfield markup is rendered, so that any dependencies can be loaded as well.

Quote

The default behavior of this method is to populate Inputfield-specific CSS and JS file assets into 
`$config->styles` and `$config->scripts`. 

 

[valan]

@Robin S @LostKobrakai  thanks. This method looks like a right method for input-specific js/css. It creates config under $this->attr('id') on initial page load... but now w/o values. Looks like when Ajax visibility is set, PW knows $this->attr('id') but doesn't know $this->my_config_key and $this->attr('value'). How to get these values in this method when Ajax visibility is set? P.S. If visibility set to "Open", everything works OK, e.g. it does not work with 2 Ajax visibility options.

public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
    $this->config->js($this->attr('id'), [
        'config' => [
            'my_config_key' => $this->my_config_key,     // = null (it's an inputfield config parameter)
            'pageId'  => $this->attr('value'),     // = 0 (it's a page id from InputfieldPage)
        ],
     ]);
     parent::renderReady($parent, $renderValueMode);
}

 

 

[valan]

@ryan may be you can help? Thanks.