Yeni gelen veriyi renklendirme

leonin · 18 Şubat 2011

HTML:

        <script tyle="text/javascript">
         $(document).ready(function(){
                       setInterval(function () { $.ajax({
                                type : "GET",
                                url : 'query',
                                dataType : "html",
                                success: function(data) {
				 
				
			var d = data.length;
			var b = $('#list').length;
			if ( d > b )
			    {$('#list').html(data)}
			}
		
		
		      });
		      }, 1000);
		
    
	    });

Yukardaki yazdığım kodla sayfamda var olan bir tablonun içeriğinde bir değişiklik olması durumunda yenilenmesini sağlıyorum.Ben bu tabloda yeni bir içerik geldiğinde, gelen içeriği css kodlarıyla renklendirmek istiyorum.Bunu nasıl çözebilirim.Yardımlarınız için şimdiden saolun.

Angelo · 18 Şubat 2011

animate ile backgrund rengini fade yapabilirsin
http://api.jquery.com/animate/

leonin · 18 Şubat 2011

o zaman tüm verilerin rengi değişiyor.
ben olayı biraz daha açayım.localhost/query diye bir sayfa var list adındada bir div tagı var buradaki iki veri sayfanın ilk açılışında aynı bir değişiklik olduğunu js ile kontrol edip yeni veriyi çekmek istiyorum.Sadece yeni gelen td tagını renklendirmek istiyorum.

Angelo · 18 Şubat 2011

#list ne tüm tablo mu?

leonin · 18 Şubat 2011

Evet tüm tablo yanlız /query adresinde de tüm tablo var.Sadece yeni gelen satırları alıcam ?

Angelo · 18 Şubat 2011

Her bir td'ye id ver. belirli bir isim olsun. örneğin row-1, row-2, row-3, row-4

document.getElementsByTagName('td') kullanarak, dökümandaki tüm td leri loop'a al, id'leri row ile başlıyorsa, değerlerini ajax öncesi değişkene ata.

deger-1 = 'row-1 in ajax oncesi degeri'
deger-2 = 'row-2 in ajax oncesi degeri'

ayni islemi ajax sonrasi yap. her iki degeri karsilastir. degisim varsa, o id'ye animate() uygula.

leonin · 18 Şubat 2011

Angelo dediğini anladım ancak js çok iyi değilim nasıl yapılır çözdüm ama kod düzeni bir türlü oluşturamıyorum.Bunun için örnek bir kod vermen mümkün mü ?
Nette baktım ancak bulamadım.

Angelo · 18 Şubat 2011

tablo html ve ajax fonksiyonunu kopyala buraya bakiyim

leonin · 19 Şubat 2011

HTML:

        <script tyle="text/javascript">
         $(document).ready(function(){
                       setInterval(function () { $.ajax({
                                type : "GET",
                                url : 'query',
                                dataType : "html",
                                success: function(data) {
				 
				
			var d = data.length;
			var b = $('#list').length;
			if ( d > b )
			    {$('#list').html(data);
                              
                              }
			}
		
		
		      });
		      }, 1000);
		
    
	    });
</script>

HTML:

<div id=list">
<table id="list-table" >
    <thead>
    	<tr>
	    <th >Date</th>
            <th >Valeu</th>
        </tr>
    </thead>
    <tbody >
	    
	  (for döngüsü)
	  <tr>
	  <td>Feb. 17, 2011, 5:29 a.m. </td>
	  <td>120 </td>
	  </tr>
	   (for bitiş) 
     </tbody>
</table>
</div>

Yukardaki js scripti tabloada içeriğinde bir değişiklik olduğunda her saniye #list içine /query deki verileri çekiyor, buda diğer js fonksiyonlarında sorun oluşturuyor. #list
içinde js ile yazdığım her değerin açıklamasını girilecek bir alan var açıklama yazmak için tıklandığnda slidedown olarak aşağı iniyor her saniye bu alan yenilendiğinden açıklama yeri tam açıklanıcakken sıfırlanıyor.Bana en büyük sorunu yaratan kısım burası.Bunları ek olarak kullanıcıya yeni verinin geldiğini belirtmem gerekiyor.Bunu da
tabloya yeni eklenen satırları js ile çekip .css ile yeni değerler vererek sağlamayı düşünüyorum.Tabi daha kolay önerin varsa onuda uygularım.

altdaki kodlar /query adresinde gösterilen sayfa(#list burada yok!)

HTML:

<table id="list-table" >
    <thead>
    	<tr>
	    <th >Date</th>
            <th >Valeu</th>
        </tr>
    </thead>
    <tbody >
	    
	  (for döngüsü)
	  <tr>
	  <td>Feb. 17, 2011, 5:29 a.m. </td>
	  <td>120 </td>
	  </tr>
	   (for bitiş) 
     </tbody>
</table>

Angelo · 19 Şubat 2011

Birşeyler karaladım. Syntax de hata filan olabilir ama mantığı anlamana yol gösterebilir. for içinde bakmak istediğin td'lerin idlerini dongu-1, dongu-2 seklinde olacak sekilde degistir.

Kod:

<script tyle="text/javascript">
 $(document).ready(function(){
setInterval(function () { $.ajax({
type : "GET",
url : 'query',
dataType : "html",
success: function(data) {

		/* tum tdleri dondur */
		var tds = document.getElementsByTagname('td');
		var len = parseInt(tds.length) - 1;
		var degerler = [];
		
			for (i=0; i<=$len; i++) {
			var tdid = tds[i].id;
			
				if (tdid.indexOf('dongu') != '-1') {
				/* id'sinde dongu geciyor, aradigimiz tdlerden biri bu, degeri kaydet */
				var tdval = tds[i].innerHTML;
				degerler[tdid] = tdval;
				}
				
			}
			
	var d = data.length;
	var b = $('#list').length;
	if ( d > b ) {
	$('#list').html(data);
	
			/* yeniden dondur degisiklik var mi kontrol et */
			for (i=0; i<=$len; i++) {
			var tdid = tds[i].id;
			
				if (tdid.indexOf('dongu') != '-1') {
				var tdval = tds[i].innerHTML;
				
					if (tdval != degerler[tdid]) {
					alert(tdid+' degisti');
					}
				}
				
			}
	}

}


});
}, 1000);


});
</script>

leonin · 19 Şubat 2011

HTML:

		/* tum tdleri dondur */
		var tds = document.getElementsByTagname('td');
		var len = parseInt(tds.length) - 1;
		var degerler = [];
		
			for (i=0; i<=$len; i++) {
			var tdid = tds[i].id;
			
				if (tdid.indexOf('dongu') != '-1') {
				/* id'sinde dongu geciyor, aradigimiz tdlerden biri bu, degeri kaydet */
				var tdval = tds[i].innerHTML;
				degerler[tdid] = tdval;
				}
				
			}

Öncelikle sana yaptıklarımı söyliyeyim.Eğer tabloya bir içerik girildiyse bu veri

HTML:

  <tr>
	  <td>Feb. 17, 2011, 5:29 a.m. </td>
	  <td>120 </td>
	  </tr>

şeklinde tr tag ları içinde olur ilk olarak bu yüzden tr taglarını saydırdım.Dediğin gibi for döngüsünden geçen değerlere tr id=1 id=2 gidicek şekilde değer verdim.Bir sonuç alamadım.Sonra tekrar td taglarına yaptım ilk sadece en baştaki td tagına sıralı şekilde id verdim sonra tr taglarının içindeki tüm tdleri sıralı id verdim.Yani

HTML:

<tr>
<td id=1>
<td id=2>
</tr>

ayrıca "var degerler = [];" bu şekilde değişken tanımanmış bir yazım hatası olabilir mi? js uzak olduğumdan olsa gerek değişken tanımı bana biraz tuhaf geldi.

Bunlara ek olarak tr için yaptığım html çıktısını veriyorum ona bir bak istersen belki hata yapıyorumdur.Ayrıca vakit ayırdığın için tekrardan saol.

HTML:

	  <tr id="dongu-1" >
	  <td >Feb. 19, 2011, 8:34 a.m. </td>
	  <td>200 </td>
	   </tr>
	  
	  <tr id="dongu-2" >
	  <td >Feb. 19, 2011, 8:34 a.m. </td>
	  <td>200 </td>
	  <td>111 </td>

	  </tr>

Angelo · 19 Şubat 2011

TR'lere id vermişsin ancak Javascript kodunda, TD taglarını analiz etmeye programlı kod. Dolayısıyla hiçbir şey bulamayacaktır.

degerler = []; satırı boş dizi tanımlamaya yönelik.

Kodun mantıksal açıklaması, degerler adında bir dizi oluşturup, isminde dongu geçen tüm TD'lerin içindeki satırları bu diziye sıralı atmak, daha sonra ajax update ettikten sonra, aynı işlemi tekrar yapıp güncel değerleri degerler dizisiyle karşılaştırmaktır.

Tabi hata olabilir Javascript, php gibi hemen güzel hata mesajları veren birşey değil, Firefox kullanıyorsan Error Manager'dan takip etmek gerek nerede hata olduğunu, ama birinci söylediğim şeye dikkat edip tekrar denersen belki gerek kalmaz.

leonin · 19 Şubat 2011

İlk td lere denedim zaten yukarda tam iyi anlatamamışım sanırım.
Td lerde sonuç alamadım.Bende kodu tr uyarladım öyle denedim.Bu son gördüğün tr denememden kalma.
Ben şuan td tagları için denicem.Yanlız tam olarak id işlemi

HTML:

<tr>
<td id=1>
<td >
</tr>
<tr>
<td id=2>
<td >
</tr>

HTML:

<tr>
<td id=1>
<td id=2>
</tr>

HTML:

<tr>
<td id=1>
<td id=1>
</tr>
<tr>
<td id=2>
<td id=2>
</tr>

bu üç kalıptan hangisi olucak.Orayı tam anlayamadım.

Angelo · 19 Şubat 2011

Şöyle deneyelim.

Kod:

<tr id="dongu-1">
	  <td >Feb. 19, 2011, 8:34 a.m. </td>
	  <td>200 </td>
	   </tr>
	  
	  <tr id="dongu-2">
	  <td >Feb. 19, 2011, 8:34 a.m. </td>
	  <td>200 </td>
	  <td>111 </td>

Format bu olsun. Kod da şöyle.

Kod:

		var tds = document.getElementsByTagname('tr');
		var len = parseInt(tds.length) - 1;
		var degerler = [];
		
			for (i=0; i<=$len; i++) {
			var tdid = tds[i].id;
			
				if (tdid.indexOf('dongu') != '-1') {
				/* id'sinde dongu geciyor, aradigimiz tdlerden biri bu, degeri kaydet */
				var tdval = tds[i].innerHTML;
alert(tdid+' degeri - '+tdval);
				degerler[tdid] = tdval;
				}
				
			}

Çok fazla satır yoksa kullan yukardakini, her id de ekrana alert yapcak. Burada düzgün görürsen mesajları, ilk adım başarılı demektir.

yagmayok · 19 Şubat 2011

Angelo ilk html kodda 2. "<tr id="dongu-2">" yi kapatmamışsın. Bilerek mi yaptın ?

Ayrıca eski içerikle yeni içeriği farklı html kodları ile getiremiyor musunuz ?

leonin · 19 Şubat 2011

Angelo malesef hiç bir uyarı mesajı almıyorum

HTML:

 $(document).ready(function(){
setInterval(function () { $.ajax({
type : "GET",
url : 'query',
dataType : "html",
success: function(data) {

		/* tum tdleri dondur */
		var tds = document.getElementsByTagname('tr');
		var len = parseInt(tds.length) - 1;
		var degerler = [];
		
			for (i=0; i<=$len; i++) {
			var tdid = tds[i].id;
			
				if (tdid.indexOf('d') != '-1') {
				/* id'sinde dongu geciyor, aradigimiz tdlerden biri bu, degeri kaydet */
				var tdval = tds[i].innerHTML;
				  alert(tdid+' degeri - '+tdval);
				degerler[tdid] = tdval;
				}
				
			}

HTML:

	  <tr id="d-1" >
	  <td >Feb. 24, 2011, 8:34 a.m. </td>
	  <td >200 </td>

 </tr>

Angelo · 19 Şubat 2011

Ben copy paste yaptım html kısımları çok bakmadım.
Ama baya deneysel bir çalışma oluyor

Angelo · 19 Şubat 2011

adresi gönderebiliyor musun

leonin · 19 Şubat 2011

yagmayok' Alıntı:
Angelo ilk html kodda 2. "<tr id="dongu-2">" yi kapatmamışsın. Bilerek mi yaptın ?

Ayrıca eski içerikle yeni içeriği farklı html kodları ile getiremiyor musunuz ?

Query/ sayfasına sadece yeni gelen verileri getir oradan tablonun olduğu sayfaya çek diyorsanız bunu yapamıyorum malesef , ama eğer farklı id lerde html olarak /query getir diyorsanız o dediğiniz olabilir.

leonin · 19 Şubat 2011

Şuan local deyim malesef link veremiyorum.

Yeni gelen veriyi renklendirme

0

0

0

0

0

0

0

0

0

0

0

0

0

0

1

0

0

0

0

0

Botlar