Менять местами фрагменты при запуске активного поиска ⇐ Html

[Anonymous]

Я создаю интерфейс с активным поиском набора данных, который я нашел на Kaggle, используя HTMX, немного JS и Flask. Встроенные стили отключены из-за CSP, и есть только несколько строк пользовательского JS, предназначенных для панели поиска.
Что касается панели поиска — она содержится в индексе и принадлежит ни один из этих элементов div, поэтому он должен присутствовать для любого контента, загружаемого HTMX.
Сейчас работает поиск на начальной индексной странице, которая загружает элемент #results. Элемент div #results содержит результаты поиска, а заголовок каждого результата представляет собой ссылку из контейнера #results, которая загружает #card-detail-container для этого конкретного результата с более подробной информацией в качестве имени. предполагает.
Я пробовал настроить общий элемент div #main-content, который обертывает два других элемента div, но это не сработало.
идея состоит в том, чтобы иметь возможность поиска, когда #results div или #card-detail-container div загружаются. Если кто-то выполняет поиск на индексной странице, появляется элемент div #results, а если пользователь нажимает на ссылку, чтобы просмотреть подробную информацию об определенном результате, загружается элемент div #card-detail-container. Элементы div должны переключаться между собой, и они не загружаются одновременно, то есть выше или ниже друг друга. Если этот человек снова выполнит поиск, пока загружен элемент div #card-detail-container, текущий элемент div #card-detail-container должен поменяться местами с контейнером #results, снова отображающим результаты.
Моя проблема в том, что я не могу начать поиск, когда загружен #card-detail-container. В консоли отображается «htmx:targetError», что, похоже, означает, что HTMX либо не видит правильную цель, либо не может получить доступ к цели в DOM. Я считаю, что это проблема HTMX больше, чем что-либо еще.
Вот форма поиска и #main-content, #results и #card- детали-контейнеры div, расположенные в index.html:














Содержимое #results и #card-detail-container загружается из фрагментов шаблона. Вот фрагменты, начинающиеся с #results:

{% for card in tarot_cards %}



{{ card.name }}


{% endfor %}


Фрагмент #card-detail-container:



{{ card.name }}


Я также включаю обработанный HTML-код, в котором возникает ошибка. Похоже, что элементы div #results и #card-detail-container загружаются дважды, потому что один из них существует в индексе, а другой вводится. Возможно, это как-то связано с моей проблемой.



Tarot Card Search


[*]












Tarot Card Search





Search Tarot Cards









Ace of Cups

Arcana Minor Arcana
Suit Cups
Number 1
Archetype None
Hebrew Alphabet None
Numerology 1 (The Origin: the starting point, the seed, opportunity)
Elemental None
Mythical/Spiritual None


Questions to Ask

• What am I feeling right now?
• How would I go about opening myself to spiritual guidance?
• What motivates me the most - pleasure or pain? Why?

Fortune Telling

• Romance is in the cards
• A new relationship or marriage is just around the corner
• Prayers are answered

Light

• Trusting your feelings
• Opening yourself to spirit
• Accepting and returning affection
• Getting in touch with what motivates you
• Taking advantage of an opportunity to express love to others
• Listening to the still, small voice

Shadow

• Hiding your feelings
• Spurning an opportunity to love or be loved
• Numbing yourself to spiritual yearnings
• Rejecting the counsel of your heart
• Becoming a puppet of your own emotions
• Indulging in hysteria or obsession

© 2025 Tarot App





Подробнее здесь: https://stackoverflow.com/questions/793 ... ive-search