Merhabalar, Projemin javascript tarafında birden fazla ajax call yapılıyor.Bunlar yapılırken loading.gif leri göstermek istiyorum.Araştırma yaparken global ajax loading fonksiyonuna rastladım.Ama bununla sayfanın sadece bir bölümünde spinner gösterebiliyorum.Örneğin, combobox'tan bir şey seçildiğinde ajax call yapılıyor ve hemen altında bu isteğin yapıldığını gösterir bir spinner gösterebiliyorum.Ama sayfanın başka bir yerinde başka bir işlem için de ajax call yaptığımda yine comboboxın altındaki spinner dönüyor.Bunu yapmak yerine birden fazla loading spinner ı gerektiği zaman göstermek istiyorum.Denediğim kod:

Stations
 <select name="selectStation" id="selectStation" onchange="sta_callStation(this);">  
 </select>
 <div id="noOfPassengers"></div>
 <div id="sta_numberOfIcons"></div>
 <div id="spinner">
    <img src="ajax-loader.gif" alt="Loading..." />
 </div>

Js tarafı:

<script>
 $('#spinner').ajaxStart(function () {
 $(this).fadeIn('fast');
//Set time interval
}).ajaxStop(function () {
$(this).stop().fadeOut('fast');
 });
//There are lots of functions here
</script>

CSS tarafı

div#spinner{
display: none;
width:10px;
height: 10px;
position:center;
top: 50%;
left: 50%;
text-align:center;
margin-left: -50px;
margin-top: -100px;
z-index:2;
overflow: auto;
}

Ajax call olarak $.getJSON() ve $.ajax() fonksiyonlarını kullanıyorum.

soruldu: 23 Nis '13, 11:39

ipek's gravatar image

ipek
226172025
cevap kabul oranı: 100%

değiştirildi: 24 Nis '13, 02:29

%C3%B6zcanacar's gravatar image

özcanacar ♦♦
17.2k59183183

Aynı div için tetikliyor olmandan kaynaklı yanlış anlamadıysam.

(23 Nis '13, 16:35) Turgay Can Turgay%20Can's gravatar image

@J2EE Evet o yüzden kaynaklanıyormuş.Farklı idlere sahip divler açıp çağırınca problem çözülüyor.

(23 Nis '13, 16:49) ipek ipek's gravatar image

Resimleri Ajax fonksiyonunun içerisinde gösterip gizleyin. Örneğin;

Html

<div> 
    <img class="loading_img" src="" id="img1" />
</div>

<div> 
    <img class="loading_img" src="" id="img2" />
</div>

Ajax fonksiyonları

$.ajax({
    // ajax ayarları
    ...
    ...
    ...
    beforeSend:function () {
        $("#img1").show();
    },
    complete: function () {
        $("#img1").hide();
    },
    success: function () {
        // ajax işlemleri başarılı ise
        // yapılacak şeyler
    }
});

Css

.loading_img{
    display:none;
}

Genel mantık budur. Böylece tüm ajax çağrıları için değil, çağrılan ajax için farklı resimler gosterebilirsiniz.

permanent link

cevaplandı: 23 Nis '13, 15:39

AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

AliRıza Adıyahşi ♦
7.9k146288
cevap kabul oranı: 44%

Çok teşekkür ederim AliRıza Bey.

(23 Nis '13, 16:48) ipek ipek's gravatar image

Sehife tam yuklenir Loading nasil yapilir? 100% oldukda syfa acilsin

(14 Ara '14, 09:31) Ferid Ferid's gravatar image
Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×137
×72
×41
×30

Soruldu: 23 Nis '13, 11:39

Görüntüleme: 1,137 kez

Son güncelleme: 14 Ara '14, 09:31

powered by BitNami OSQA