Interactivity API update dynamically injected DOM directives

  • Hi there,

    First I want to say that the new Interactivity API is totally cool and I am very excited about it! I have a question that I could not find the answer for anywhere and its related to the following scenario:

    • As a response to wp-on-click event the API is calling a callback that performs an AJAX call with Fetch API. Result is received and it contains HTML with new Interactivity directives inside. Then the newly received html fragment is injected in the existing DOM.
    • Using the wp-text directive to assign the content to a previously existing element does not work because the result is HTML and wp-text does not seem to be working with innerHTML but the text of the node. The option here is to directly assign the result to the element using vanilla querySelector something like container.innerHTML = htmlResult. This works and I am fully aware that at this point there is no way for the Interactivity API to know that the new elements are added or if they contain new directives inside that need to be processed.

    My questions are:

    • what is the best practice to inject complex html responses from ajax operations into the existing dom the “interactivity” way?
    • is there an utility function that tells the Interactivity API to force “refresh” an element that will cause it to evaluate dynamically injected directives?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter gentec

    (@gentec)

    Hi Bojan,

    Thank you for the response! Do you mind sharing a small code snippet that will picture better this part of your comment?

    “After injecting the HTML, you can manually trigger re-processing of directives by dispatching an event or re-running the directives in that specific part of the DOM.“

    -Best

    Thread Starter gentec

    (@gentec)

    Bojan,

    I don’t mean to be rude but I can ask AI bots myself for answers that are no good. ??

    “// Implement your logic to re-scan and apply directives here” – this is what is the core of the problem.

    luisherranz

    (@luisherranz)

    The way to do it would be by using the data-wp-router-region directive from the @wordpress/interactivity-router package.

    You just need to mark the parts of the page that you want to update with that directive and then use actions.navigate from the router package with the new URL. The Interactivity API will handle changing the HTML, making the minimal changes in the DOM and preserving the state of all components.

    This means that instead of making an AJAX call to generate the new content, you can generate it directly in the theme or in your block. If you need the content to be variable for the same URL, you can use queries.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.