inclure (EKLEMEK) için {ajax}

{ajax} kriteri, tıklamaya ve yeni parametrelerle tüm sayfanın tazelenmesi yerine sadece değişmesi gereken bloğun tazelenmesine olanak tanır.

Uygulamada

Prensip AJAX’ı kullanılabilir kılmaktır çünkü gizli bir karmaşıklık vardır :

Bir sayfam var ve bu sayfamda yine kendisine bazı bağlantılar içeren bir kısım var, bu kısım sadece kendi bulunduğu yerin tazelenmesine sebep oluyor :

  1. sayfanın bu kısmını ayrı bir iskelete yerleştiririm
  2. ilgili bağlantıları ajax class’ı ile işaretlerim : <a href='bağlantım' class='ajax'>...</a>
  3. iskeletimi şu komutlarla ana sayfaya eklerim <INCLURE{fond=iskeletim}{ajax}{env}> veya #INCLURE{fond=iskeletim}{ajax}{env}

İşte hepsi bu !

Yine de bir kaç şeye dikkat çekelim :

  • önce iskeletinizi argüman kullanmadan test edin {ajax}
  • {ajax} SPIP’in cache’ine url enjekte edilmesini engellemek için mutlaka {env} ile birlikte kullanılmalıdır.
  • varsayılan olarak pagination sınıfındaki a bağlantıları da ajax’lanmalıdır
  • jquery var ajaxbloc_selecteur = 'a.birbaşkasınıf';seçicisi belirtilerek başka bağlantılar da hedeflenebilir

Detaylar

Çağrı sentaksı :

  • <INCLURE{fond=benim_fonum}{ajax}{env}>
  • [(#INCLURE{fond=benim_fonum}{ajax}{env})]

Bu çağrı js ajaxbloc_selecteur değişkeni ile hedeflenen tüm bağlantıları otomatik olarak «ajaxlayarak» benim_fonum isimli iskeleti ekler.

<div ..></div> bloğu, ajax’ın işletim mekanizmasına bağlı olarak eklenen iskeletin etrafına otomatik olarak eklenir.

Varsayılan olarak bu çağrı ’.pagination a,a.ajax’ ları hedef alır. Diğer bir deyişle iskeletlerin kaynak kodunda şunlar olmalıdır :

  • Ya SPIP tarafından düzenlenen sayfalamanın standart işletimi . #PAGINATION komutunun pagination gibi bir sınıf elemanının . Ex : <p class="pagination">#PAGINATION</p>
  • ya da (<a class="ajax" href=...>) bağlantılarında ajax sınıfı

Ajax otomatik olarak sadece eklenen iskeleti yeniden hesaplar ve bağlantının url’sinde geçirilen parametreleri ekleyerek #ENV fonksiyonunu yeniler.

Yeniden yüklenen blok %50 opaklığa sahiptir ve loading sınıfını alır, yükleme esnasında stilinin uygun biçimde değiştirilmesine olanak tanır.

Şunu belirtmek gerekir :

  • ajax bağlantıları bir kez tıklandığında gezginin önbelleğine alınır. Yani blok kullanıcı ilgili bağlantıya bir çok kez uğrasa bile sadece bir kez yüklenir
  • bazı bağlantılar preload sınıfı eklenerek önceden ön-yüklenmiş olabilir

Bazı örnekler

Ajax bağlantılarının kullanımı

inc-liens.html iskeletimiz olsun Kendisini ekleyen iskelette ismi şu olacaktır

[(#INCLURE{fond=inc-liens}{ajax}{env})]

İçinde de şunlar bulunacaktır

<BOUCLE_liste(AUTEURS) >
        <a class="ajax" href="[(#SELF|parametre_url{id_auteur,#ID_AUTEUR})]">
            #NOM #ID_AUTEUR
        </a>
</BOUCLE_liste>
[(#ENV{id_auteur}|oui)
    #ENV{id_auteur}
]

Sayfalamanın kullanımı

Sayfalama için squelettes-dist/sommaire.html iskeletinden bir örneği ele alalım.

inc-recents.html isimli iskelete yeni eklenen makaleler döngüsü koyalım :

[(#REM) Son makaleler]
<B_articles_recents>
<div class="menu articles">
	[(#ANCRE_PAGINATION)]
	<h2><:derniers_articles:></h2>
	<ul>
		<BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {pagination 5}>
		<li class="hentry">
			[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
			<h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
			<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
			[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
		</li>
		</BOUCLE_articles_recents>
	</ul>
	[<p class="pagination">(#PAGINATION)</p>]
</div>
</B_articles_recents>

sommaire.html dosyasına bu döngü yerine şunu eklemek yeterli olacaktır <INCLURE{fond=inc-recents}{env}{ajax}>

Sınırlar ve özel durumlar

Bu, blokları otomatik ajaxlaştırma mekanizması bir varsayıma dayanır : ajax bağlantıları sadece kendilerini içeren bloğun yenilenmesine ve aynı yerde güncellenmesine olanak tanır. Sayfanın başka bir yerini hedef almak olanaksızdır.

Diğer yandan, eklenen iskeletin özellikle #ENV ile geçirilmiş parametreler temel alınarak hesaplandığına dikkat edilmelidir.

Aslında, ajax bloğu kendisini çağıran iskeletin tamamen dışında tek başına yeniden hesaplanır. Sadece #ENV ile geçirilen değişkenler eski değerlerini korur.

Bu yüzden global php değişkenlerine atıfata bulunulamaz : bu değişkenler ajax bloğu hesaplanırken eski değerlerini koruyamazlar.

Eğer gerçekten global php değişkenleri kullanacaksanız katıştırma anında bunları #ENV’in içine katmak gerekir :

<INCLURE{fond=monskel}{ajax}{env}{parametre=#EVAL{$GLOBALS['toto']}}>

Biraz tarih

SPIP 1.9.2 iskeleti bölmeden döngüyü küçük bir kısım olarak kabûl eden bir deneme yapmıştı (belgelenmemiştir çünkü tatmin edici değildi) ve döngü içeriğini ajaxlamaya çalışmıştı.

Bu deneme doyurucu olmadı çünkü:

  • boucle elemanı çok tutarlı değildi -> li’lerin bir çok döngü tarafından oluşturulduğu bir listeyi düşünün !
  • bu yöntem, döngüye ulaşmak için tüm sayfanın yeniden hesaplanmasını gerektiriyordu çünkü giriş metni bilinemiyordu -> hizmet birimi bu küçük kısma ulaşabilmek için aşağı yukarı tüm sayfayı yeniden hesaplıyordu bu da hızda çok az bir artış sağlıyordu

Yeni çözümün şu avantajları var :

  • iskeletin yaratıcısını başka bir iskelete eklendiğinde güncellenecek kısmı ayırmaya zorluyor
  • sayfanın geri kalan kısmından bağımsız işlevsel bir bloğa karar vermek
  • ortamı “inclure”e parametre olarak geçirmek
  • hizmet biriminin sayfanın sadece bu bölümünü hesplamasına olanak tanımak

Yazar : mega Publié le : Mis à jour : 21/03/23

Traductions : català, English, Español, français, Nederlands, Türkçe