Hi @Generalelektrix,
The short answer is that a full page refresh is probably the easiest, most reliable way to achieve what you want at the moment. However, I’ll walk you through a few more details in case you want to go further with this.
First, as Alec mentioned, we’re in a long refactoring process in which we’re moving more of the client-side code into Vue.js. In the meantime, we have some glue to stick the pieces together, but it will take some work.
Second, we have a global event router since v3.1 which you can use to communicate between components that are not in a parent-child relationship. The event router is an instance of a Vue component in which you have access to the events api.
The event bus can be accessed globally in JavaScript at pkp.eventBus. So you can subscribe to any event with:
pkp.eventBus.$on('myEvent', function (passedData) {
console.log(data)
})
You can then trigger that event at any time with:
pkp.eventBus.$emit('myEvent', anyData);
When using the older JS framework, we pass events from the server to the client-side JS using the JSONMessage method you discovered:
$json->setEvent(‘redirectRequested’, '');
That only works for events that “bubble up” in a parent-child relationship. There’s another helper method you can use to trigger an event directly on the global event bus:
$json->setGlobalEvent('myEvent', $myNewData);
Warning: this only works on the existing form components that receive a JSONMessage response. As we transition to Vue.js for new components (submissions list, reviewer selection list), we will deprecate this method of passing events from the server.
So, to wrap all of that up, you could do something like the following:
// PHP
// Send a global event when the metadata is updated
// Use a custom namespace for the event so you never conflict with
// events in the core application. I'll use your initials, sn.
$json->setGlobalEvent('sn.submissionUpdated', ['title' => $newTitle]);
// JS
// Subscribe to that event and pass a function
// to be called when the event fires. In this case, we'll look for the
// submission title and update it.
if (typeof pkp !== 'undefined') {
pkp.eventBus.$on('sn.submissionUpdated', function(data) {
// Use a jQuery selector to pick out the title element and
// change the text. (Note: this is not the correct selector.)
$('.submission_title').text(data.title);
});
}
This will all be a little bit fragile, since it requires editing a core file for the PHP event and the title selector could change without warning. But it’s the only way to accomplish what you want for now.
In the last few versions we have been introducing a few new components built on the REST API and Vue.js (submissions list, reviewer selection list). We’ll continue building out more of the UI in this way. Eventually, the workflow will come under a state management library (Vuex) and it will be easier to manage these updates in the browser. By that point, we’ll also have better documentation in place for subscribing to events so that customizations like these can be more dependable.
And hopefully that will do it!