starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Images Preview Pop-Up Removed in 3.5.1? #8073

New Issue
Closed
opened 2025-12-29 20:31:58 +01:00 by adam · 9 comments
adam commented 2025-12-29 20:31:58 +01:00
Owner
Copy Link

Originally created by @pk-lee-developer on GitHub (May 16, 2023).

Originally assigned to: @abhi1693 on GitHub.

NetBox version

v3.5.1

Python version

3.9

Steps to Reproduce

  • Create a site with the name testsite and slug testsite
  • Go to the site and upload any image
  • Hover over the image link

Expected Behavior

An image preview should pop up.

Observed Behavior

Nothing happens.

Originally created by @pk-lee-developer on GitHub (May 16, 2023). Originally assigned to: @abhi1693 on GitHub. ### NetBox version v3.5.1 ### Python version 3.9 ### Steps to Reproduce * Create a site with the name testsite and slug testsite * Go to the site and upload any image * Hover over the image link ### Expected Behavior An image preview should pop up. ### Observed Behavior Nothing happens.
adam added the type: bugstatus: accepted labels 2025-12-29 20:31:58 +01:00
adam closed this issue 2025-12-29 20:31:58 +01:00
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 16, 2023):

Caused by https://github.com/netbox-community/netbox/pull/12487

@abhi1693 - could you take a look.

Also I updated the issue to provide proper replication steps.

@kkthxbye-code commented on GitHub (May 16, 2023): Caused by https://github.com/netbox-community/netbox/pull/12487 @abhi1693 - could you take a look. Also I updated the issue to provide proper replication steps.
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@abhi1693 commented on GitHub (May 16, 2023):

@kkthxbye-code I'm on vacation this week, but I suspect this will require changes to ImageAttachmentTable using a template code

@abhi1693 commented on GitHub (May 16, 2023): @kkthxbye-code I'm on vacation this week, but I suspect this will require changes to `ImageAttachmentTable` using a template code
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (May 16, 2023):

Sorry, I missed this as well. We can probably just change the primary table column to a TemplateColumn that restores the pop-up on hover.

@jeremystretch commented on GitHub (May 16, 2023): Sorry, I missed this as well. We can probably just change the primary table column to a TemplateColumn that restores the pop-up on hover.
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@abhi1693 commented on GitHub (May 25, 2023):

So, when applying the template code to enable image preview, it works on the image attachment list page, but does not work when the table is called via hx calls. I'm not sure why that is at the moment.

@abhi1693 commented on GitHub (May 25, 2023): So, when applying the template code to enable image preview, it works on the image attachment list page, but does not work when the table is called via hx calls. I'm not sure why that is at the moment.
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 25, 2023):

@abhi1693 - Eventlisteners are lost when HTMX replaces the HTML. You probably have to add a call to initImagePreview here:

bf1c191b2e/netbox/project-static/src/htmx.ts (L7)

bf1c191b2e/netbox/project-static/src/bs.ts (L151)

It might needs checks to prevent double initializing of eventlistners.

@kkthxbye-code commented on GitHub (May 25, 2023): @abhi1693 - Eventlisteners are lost when HTMX replaces the HTML. You probably have to add a call to initImagePreview here: https://github.com/netbox-community/netbox/blob/bf1c191b2e9a52ecb122d3e4c456b9be3bcfa032/netbox/project-static/src/htmx.ts#L7 https://github.com/netbox-community/netbox/blob/bf1c191b2e9a52ecb122d3e4c456b9be3bcfa032/netbox/project-static/src/bs.ts#L151 It might needs checks to prevent double initializing of eventlistners.
adam commented 2025-12-29 20:31:59 +01:00
Author
Owner
Copy Link

@abhi1693 commented on GitHub (May 25, 2023):

I have already tried that suggestion, it does not seem to be taking any effect. I even tried initializing the whole bootstrap functions via initBootstrap but still nothing changed.

@abhi1693 commented on GitHub (May 25, 2023): I have already tried that suggestion, it does not seem to be taking any effect. I even tried initializing the whole bootstrap functions via `initBootstrap` but still nothing changed.
adam commented 2025-12-29 20:32:00 +01:00
Author
Owner
Copy Link

@abhi1693 commented on GitHub (May 25, 2023):

I've only been able to make partial change. I'll mark this as needs owner again, as I currently do not know from where to re-add the dependency.

@abhi1693 commented on GitHub (May 25, 2023): I've only been able to make partial change. I'll mark this as needs owner again, as I currently do not know from where to re-add the dependency.
adam commented 2025-12-29 20:32:00 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 26, 2023):

@abhi1693 - Something like this seems to work:

/**
 * Hook into HTMX's event system to reinitialize specific native event listeners when HTMX swaps
 * elements.
 */
export function initHtmx(): void {
  for (const element of getElements('[hx-target]')) {
    const targetSelector = element.getAttribute('hx-target');
    if (isTruthy(targetSelector)) {
      for (const target of getElements(targetSelector)) {
        target.addEventListener('htmx:afterSettle', initDepedencies);
      }
    }
  }

+  for (const element of getElements('[hx-trigger=load]')) {
+   element.addEventListener('htmx:afterSettle', initDepedencies);
+  };
}

If you want to give it another go. Not sure if this is a proper fix though, the entire re-init logic seems a little messy. initImagePreview also needs to be exported and included in htmx.ts of course. See my previous comment.

@kkthxbye-code commented on GitHub (May 26, 2023): @abhi1693 - Something like this seems to work: ```typescript /** * Hook into HTMX's event system to reinitialize specific native event listeners when HTMX swaps * elements. */ export function initHtmx(): void { for (const element of getElements('[hx-target]')) { const targetSelector = element.getAttribute('hx-target'); if (isTruthy(targetSelector)) { for (const target of getElements(targetSelector)) { target.addEventListener('htmx:afterSettle', initDepedencies); } } } + for (const element of getElements('[hx-trigger=load]')) { + element.addEventListener('htmx:afterSettle', initDepedencies); + }; } ``` If you want to give it another go. Not sure if this is a proper fix though, the entire re-init logic seems a little messy. initImagePreview also needs to be exported and included in htmx.ts of course. See my previous comment.
adam commented 2025-12-29 20:32:00 +01:00
Author
Owner
Copy Link

@abhi1693 commented on GitHub (May 26, 2023):

I did some googling around and found that we can use Set to remove duplicate elements from being initialized. However, that goes out of scope for this issue. @kkthxbye-code Your solution does seem to work but in case if we want to improve the initialization of elements, that should be taken up as a separate FR.

@abhi1693 commented on GitHub (May 26, 2023): I did some googling around and found that we can use `Set` to remove duplicate elements from being initialized. However, that goes out of scope for this issue. @kkthxbye-code Your solution does seem to work but in case if we want to improve the initialization of elements, that should be taken up as a separate FR.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#8073
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?