Twig: Rendering a node

Created on 25 October 2024, 20 days ago

Problem/Motivation

I want to render the "card" View Mode for node 105 in a Twig template, the code I am trying to doesn't work.

Steps to reproduce

{% set htmx = create_htmx() %}
<div {{ htmx.get(drupal_url('htmx/node/105/card')).swap('innerHTML') }}></div>

Here's what the rendered source looks like:

<div data-hx-get="/htmx/node/105/card" data-hx-swap="innerHTML  ignoreTitle:true"></div>

If I visit `htmx/node/105/card` directly in my browser I see this:

Proposed resolution

TBD

Remaining tasks

TBD

User interface changes

TBD

API changes

TBD

Data model changes

TBD

πŸ’¬ Support request
Status

Active

Version

1.3

Component

Documentation

Created by

πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @capellic
  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas
  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas
  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas

    I dig some additional banging around and I have some progress to report:

    I learned that I could test for the existence of HTMX on the page by entering `htmx` into the Chrome console. If the library is loaded on the page you get the object as a response, otherwise you get an error.

    I had been under the impression that `{{ attach_library('htmx/drupal') }}` wasn't working, but I just don't think I was clicking the cache clear button hard enough. ;-)

    I discovered I could enter XHTML right into the Twig file, this one was fun:

    <div>
        <div id="response-div"></div>
        <button hx-get="htmx/node/105/card" hx-target="#response-div" hx-swap="beforeend">
            Register!
        </button>
    </div>

    Once I got confident the HTMX library was loading I experimented with lazy loading the card i the screenshot above:

    {% set htmx = create_htmx() %}
    <div {{ htmx.get(drupal_url('htmx/node/105/card')).trigger('revealed') }}></div>
    

    I chose "revealed" after experimenting with "load", however "load" was firing many times on the page.

    I'm going to close this ticket. I hope someone else finds it useful.

  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas
Production build 0.71.5 2024