Jump to content

Ajax-driven inputfields development how-to


valan
 Share

Recommended Posts

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?

 

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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`. 

 

  • Like 1
Link to comment
Share on other sites

@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);
}

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...