Is there a video tutorial for this module?

Created on 12 June 2024, 6 months ago
Updated 2 July 2024, 5 months ago

Hello,

Is there a video tutorial for this module? I don't know how to get started using it? Can you give a simple example and attach a reproduction step? For example, through this module, load the content of node 1 into the div with the specified ID.

  <button hx-get="/htmx/node/1/teaser"
        hx-target="#drupal-off-canvas-wrapper"
        hx-select="#drupal-off-canvas-wrapper"
        hx-swap="outerHTML ignoreTitle:true" class="button">
     Add
  </button>
  
  <div id="drupal-off-canvas-wrapper" >11</div>

When I click Add button, there is no response.

πŸ’¬ Support request
Status

Fixed

Version

1.1

Component

Miscellaneous

Created by

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

Comments & Activities

  • Issue created by @msn5158
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    I haven't had time to produce any videos.

    If you are attaching our htmx/drupal asset library, then the only thing I can see in your code is to revisit the documentation for hx-select. I suspect that value needs to be article since node markup is typically wrapped in that tag. I think you are seeing no response because there is no content with id="drupal-off-canvas-wrapper" in the response.

  • Status changed to Needs review 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • I know now, it is the wrong by hx-select, it uses the selector from the page of hx-get.

    Also, can it obtain data from different domains?

     {{ attach_library('htmx/drupal') }}
     
      <button hx-get="https://abc.website.com/node/1"
            hx-target="#drupal-off-canvas-wrapper"
            hx-select="#page-wrapper"
            hx-swap="outerHTML ignoreTitle:true" class="button">
         Add
      </button>
      
      <div id="drupal-off-canvas-wrapper" >11</div>

    I tested it doesn't work.

  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    You should be able to do that unless there is something going on. See htmx.config.selfRequestsOnly in https://htmx.org/reference/#config

    See our documentation on Drupal asset libraries, also attach the debug library and add the given attribute to you markup or an ancestor. You will get console logging for all HTMX activity on that tag or its descendants.

  • Status changed to Postponed: needs info 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • I now understand how to extract data from a page into current page, but there are still many questions that I don't understand, such as creating a block view or a non page view without a separate URL. How can I use HTMX to load the result set of the view onto a page?Can it do? not from URL page.

     {{ attach_library('htmx/drupal') }}
     
      //<button hx-get="/htmx/node/1/teaser"
      <button hx-get="/htmx/views/content_recent/block_1"  // I know it's wrong, I'm just using it to illustrate the issue.
            hx-target="#drupal-off-canvas-wrapper"
            hx-select="#page-wrapper"
            hx-swap="outerHTML ignoreTitle:true" class="button">
         Add
      </button>
      
      <div id="drupal-off-canvas-wrapper" >11</div>
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    We haven't done anything targeted at views, but a block display is probably your best bet. See if this meets your need:

    1. Build the block display
    2. Browse to /admin/structure/htmx-block and create an HTMX block that displays your view block display, which essentially is a Drupal block without a region.
    3. Display your block in one of 2 ways, see Displaying HTMX Blocks

    References:
    route htmx_blocks.view

  • Status changed to Needs review 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • Status changed to Fixed 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024