HTMX Örnekleri: Form, Arama ve Sekme İçin Kopyala-Yapıştır Kalıplar

HTMX örnekleri arayan kişi çerçevenin tamamını değil, yarın kullanacağı formu arıyor. HTMX'in ne olduğu HTMX nedir yazısında. Sürüm notları HTMX 4 yazısında. Aşağıdaki üç kalıp sayfa yenilemeden parça HTML alır.

Betik sayfada yüklü olsun. Uçlar örnek adreslerdir. Kendi sunucunuzda aynı yolu açın ve HTML döndürün.

Formu yerinde göndermek

<form
  hx-post="/bulten"
  hx-target="#bulten-sonuc"
  hx-swap="innerHTML"
>
  <label for="eposta">E-posta</label>
  <input id="eposta" name="eposta" type="email" required />
  <button type="submit">Kaydet</button>
</form>
<p id="bulten-sonuc"></p>

/bulten yanıtı bütün sayfa değil, tek bir cümle veya hata satırı olsun: Adres kaydedildi.. Bu parça #bulten-sonuc içine yazılır. Doğrulama hatasında da HTML dönün. Boş gövde, kutuyu sessizce siler.

Yazarken aramak

<input
  type="search"
  name="q"
  placeholder="Ara"
  hx-get="/ara"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#sonuclar"
  hx-swap="innerHTML"
/>
<div id="sonuclar"></div>

changed, aynı metin için ikinci istek atmaz. delay:300ms, her harfte değil, kısa bir suskunluktan sonra gider. /ara bir liste döndürsün. Sonuç yoksa boş bir cümle dönün. Böylece eski liste ekranda kalmaz.

Sekme içeriğini çekmek

<div role="tablist">
  <button hx-get="/sekme/ozet" hx-target="#sekme" hx-swap="innerHTML">Özet</button>
  <button hx-get="/sekme/notlar" hx-target="#sekme" hx-swap="innerHTML">Notlar</button>
</div>
<div id="sekme" role="tabpanel">Bir sekme seçin.</div>

Her uç yalnız o sekmenin gövdesini döndürür. Menüyü tekrar göndermeyin. Aksi halde iç içe menü oluşur. Seçili düğmenin işaretini sunucu, döndürdüğü parçanın dışında ayrıca vermelidir. Bu örnekte o işaret yok. Küçük bir sayfada düğme metni yeter.

Bozulunca bakılacak yer

İstek gidiyor ve ekran değişmiyorsa hx-target kimliği ile elemanın id değeri aynı değildir. Yanıt geliyor ve sayfa şişiyorsa uç bütün belgeyi dönüyordur. Ağ sekmesinde yanıtın gövdesine bakın. JSON görüyorsanız HTMX onu metin gibi basar. Ucu HTML'e çevirin.

Vercel App Nedir? Next.js Projesini Ücretsiz Yayınlama

Vercel uygulaması nedir, Next.js projesi Git deposundan nasıl yayınlanır? Hesap, içe aktarma ve önizleme adımları.

Next.js Güvenlik Krizi: 13 Yeni CVE Bize Ne Anlatıyor?

Next.js ve React ekosisteminde açıklanan 13 yeni CVE, RSC, middleware, WebSocket, cache ve script güvenliği tarafında ciddi sorular doğuruyor.

Bu üç kalıp, tek sayfalık bir panel için yeter. Hesap, yetki ve hata metnini sunucu üretir. HTMX yalnız o metni hedefin içine koyar.

Yükleniyor ve hata

İstek sürerken kutu boş kalmasın. Düğmeye hx-disabled-elt="this" ve forma kısa bir bekleme metni koyabilirsiniz. Daha görünür yol, hedefin içine sunucunun döndürdüğü Kaydediliyor cümlesidir. Bunu ayrı bir uçla yapmak şart değildir. Asıl yanıt gelince o cümle zaten değişir.

Hata kodunda HTML dönün. 400 gövdesi

Adres geçersiz.

Adres çubuğu

Arama kutusunda sonuç değişirken adres aynı kalırsa sayfa yenilenince liste kaybolur. hx-push-url="true" arama isteğinin adresini çubuğa yazar. Bunu yalnız arama kalıbında kullanın. Form kaydında adres değişmesin. Kayıt bir eylemdir, bir sayfa değildir. Adresi itmek, geri tuşunu kayda bağlar ve kullanıcıyı şaşırtır.

Sekmede de adres isteğe bağlıdır. Üç sekmeli küçük bir panelde adres değiştirmek şart değildir. Sekme paylaşılacaksa hx-push-url o düğmede durur. Kararı her düğmeye kopyalamayın. Biri itsin, diğeri itmesin, adres ile ekran ayrışır.

Parça şişmesin

Dönen HTML'de html, head veya yeniden bir script olmasın. Tarayıcı bunu hedefe gömer ve sayfa iki kez davranış bağlar. Parça bir ul, bir p veya bir tablo satırı olsun. Kimliği olan elemanı parçanın içine, hedefin kendisiyle aynı kimlikle koymayın. İki aynı kimlik, sonraki isteğin yanlış kutuya yazılmasına neden olur.

Sunucu şablonunuz bütün sayfayı üretiyorsa, HTMX isteğinde dar bir şablon seçin. İsteğin HX-Request başlığı buna yarar. Başlık varsa parça, yoksa bütün sayfa. Böylece aynı uç hem doğrudan açılır hem HTMX ile çağrılır. İki ayrı adres tutmak zorunda kalmazsınız.