Backend not loading js & css

[MarkE]

I have a strange situation in which the required js and css for the inputfields on an admin page are not being loaded. The main field in question is called 'motif_layout_components' and its matrix items are updated via the API. The image below shows an example of what the page should look like:

However, the image below is what I get:

As you can see, the toggle field, page ref and CKE fields have not been styled. On inspecting with the browser dev tools, it is clear that this is because the files InputfieldToggle.css etc. have not been loaded. Saving the page has no effect. However, if I go to the field/edit page for the motif_laout_components field and save that then, on reloading the illustrated page, the required sources appear and the page is rendered correctly as shown in the first image.

Any ideas?

• Why are the assets not loaded?
• How can I ensure that they are loaded (i.e. via the API rather than manually saving the related edit/field page)?

Any insights gracefully received!

[MarkE]

Additional info: This is only a problem with fields inside repeaters and repeater matrix fields. In fact, if field types inside repeaters also exist in the page outside repeaters then they will load the assets automatically and the fields will look fine inside and outside the repeaters.

More context: The problem is occurring with my ProcessDbMigrate module, which I am enhancing to handle repeater matrix fields and nested repeaters, but so far I have not tested the nested feature. I'm not sure where @bernhard's RockMigrations has got to with these features or whether similar problems occur there, but I'll take a look.

PS. Don't download the current version of my module, it has some bugs which I hope to fix in this new version (once it works fully!).

[kongondo]

On 11/7/2022 at 4:50 PM, MarkE said:

Any ideas?

Yes. this ->

1 hour ago, MarkE said:

Additional info: This is only a problem with fields inside repeaters and repeater matrix fields.

Repeater items markup are ready before the assets are. Have a look at Inputfield::renderReady().

https://processwire.com/api/ref/inputfield/render-ready/

Also have a look at example implementations in ProcessWire Inputfields.

Written in a hurry; sorry cannot go into further details.

Edited November 8, 2022 by kongondo

[MarkE]

Many many thanks @kongondo!

It's still a bit of a hack, as it seems I have to add it in the module ready() like this:

public function ready() {

		/*
		 * Make sure all the assets are there for a page with repeaters
		 */
		$page = $this->page();
		if($page and $page->template == 'admin') {
			$pId = $this->wire()->input->get('id');
			$pId = $this->wire('sanitizer')->int($pId);
			if(is_int($pId) && $pId > 0) {
				$p = $this->wire('pages')->get($pId);
				$this->getInputfieldAssets($p);
			}
		}
	}

	protected function getInputfieldAssets($p) {
		foreach($p->getFields() as $field) {
			$inputfield = $field->getInputfield($p);
			$type = $inputfield->className;
			$name = $inputfield->attr('name');
			if($type == 'InputfieldRepeaterMatrix' || $type == 'InputfieldRepeater') {
				foreach($p->$name as $repeaterItem) {
					$this->getInputfieldAssets($repeaterItem);
				}
			} else {
				$inputfield->renderReady();
			}
		}
	}

Ideally, I would add it as part of the migration process, rather than have it execute on each ready(), but I haven't found a way of doing that and at least the code above is a lot simpler than what I was trying (and it seems to work fully).

EDIT: To avoid complications, the first part of the above code was moved to a before hook on ProcessPageEdit::execute