.ajaxComplete()

.on( "ajaxComplete", handler ) Dönen Değer : jQuery Nesnesi
Açıklama : Bir AJAX isteği tamamlandığında çalışacak bir fonksiyon iliştirilen olay. Bu bir AjaxRequest olayıdır.

.on( "ajaxComplete", handler )
"ajaxComplete"
Tip : String
Sabit değer olarak "ajaxComplete" stringi.
handler
Tip : Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions )
Çalıştırılacak olan fonksiyon.

Not : bu sayfa ajaxComplete olayını anlatır, eski .ajaxComplete() metodu kullanımı bırakılmıştır.

Bir Ajax isteği tamamlandığında jQuery ajaxComplete olayını tetikler. Bu olaya bağlanan bir ya da birden çok olay işleme fonksiyonu bu anda çalışır.

Bu metodun çalışmasını görmek için basit bir Ajax isteği ayarlayalım.

<div class="trigger">Tetikleyici</div>
<div class="result"></div>
<div class="log"></div>

Bir olay işleyiciyi dökümanın script kısmına ekleyelim.

$( document ).on( "ajaxComplete", function() {
  $( ".log" ).text( "Tetiklenen ajaxComplete olayı işleyici." );
} );

Şimdi herhangi bir jQuery metodu kullanarak bir Ajax isteği yapalım.

$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

Sayfamızla aynı klasörde ajax adında bir alt klasör ve içinde de test.html dosyası olup , şu kodu içersin:

<p>test.html içeriği</p>

Kullanıcı .trigger sınıfa sahip elemana tıklayınca ve Ajax isteği tamamlanınca server'dan okunan içerik .result sınıfı eleman içine yazılırken, olayın gerçekleştiğine dair mesaj da .log sınıfı eleman içine yazılır. Eğer Ajax isteği tamamlanamazsa sadece log içinde olay gerçekleştiği yazar ama result kısmı gelemez.

Yapılan Ajax isteğinin türünden bağımsız olarak tüm Ajax istekleri tamamlandığında ajaxComplete olay işleyicisi çalışır. Eğer birden fazla istek var ve hangisinin yapılmış olduğunu ayırt etmek isterseniz, fonksiyona verilen parametreleri kullanırsınız. ajaxComplete olay işleyicisine parametrede olarak olay nesnesi, XMLHttpRequest nesnesi ve ayarları veren bir nesne verilirse fonksiyon içinde kullanılabilir. Örneğin bir olay işleme fonksiyonunu sadece yapılan istek URL adresinde kısıtlayabilirsiniz.

$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Kısıtlanmış olay işleyici tetiklendi. Sonuç : " +
      xhr.responseText );
  }
} );

Not : İsteğe dönen Ajax içeriğini xhr.responseText olarak okuyabilirsiniz.


İlave Notlar:

  • JQuery versiyon 1.9 itibarıyla ajaxComplete olayını da içeren tüm jQuery global ajax olayları mutlaka document nesnesine bağlanmalıdır.
  • Eğer $.ajax() ve
    • ---------------------- TO DO ----------------------


Örnekler :

Tüm paragrafların sonrasına bazı HTML eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( "<b>Hello</b>" );
        </script>
    </body>
</html>

Demo:

Şunu demek isterim ki:


Tüm paragrafların sonrasına bir DOM elemanı eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( document.createTextNode( "Hello" ) );
        </script>
    </body>
</html>

Şunu demek isterim ki:


Tüm paragrafların sonrasına bir jQuery nesne (DOM elemanlarından bir array'e benzer) eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <b>Hello</b>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( $( "b" ) );
        </script>
    </body>
</html>

Hello

Şunu demek isterim ki:

.

.