Link tıklandığında / div güncelleme göndermek için jquery / ajax kullanarak

3 Cevap php

Ben bir kullanıcı bunlardan birini tıklar ise ayrı ayrı güncellemeniz gerekiyor 2. katmanları var.

<div id=wrapper>
    <div id=upvote>
        //This div can be filled by upvote.php?id=X
        <? echo getUpVote(); ?>
        <a href=#><img src=upv.png></a>
    </div>
    <div id=downvote>
        //This div can be filled by downvote.php?id=X
        <? echo getdownVote(); ?>
        <a href=#><img src=downv.png></a>
    </div>
</div>

Kullanıcı yukarı veya aşağı oy resmini tıkladığında i div içeriğini fade out ilgili php dosyasına bir ajax çağrısı (istek olsun) yapmak ve yüklenen içerik solmaya gerekiyor.

I bu nasıl yapabilirim?

3 Cevap

Çapa etiketleri bir tıklatma işleyicisi takın. Sargının içeriğini değiştirmek yükü çağırmak, sonra içeren div id verilen kullanmak için hangi url bulun. Uygun noktalarda dışarı / fade. Eğer varsayılan eylemi iptal etmek için çapa tıklatma işleyicisi gelen return false emin olun.

$('#upvote,#downvote').find('a').click( function() {
    var url  = $(this).closest('div').attr('id') + '.php?id=X';
    $('#wrapper').fadeOut();
                 .load( url, function() {
                     $('#wrapper').fadeIn();
                 });
    return false; // cancel click action
});

Bunu yapabileceğiniz jQuery bir öğe için bir tıklatma işleyicisi eklemek için:

 $("#upvote").click(clickHandler);

ClickHandler bir fonksiyonudur. Eğer bir görüntü Out solmaya istediğiniz beri bunu yapabilirsiniz:

 $("#upimg").hide('slow');

yavaş yavaş kaybolmaya id = 'upimg' ile bir öğe neden olacaktır. Ayrıca benzer bir etkiyi elde etmek için fadeTo (opaklık) kullanabilirsiniz.

AJAX çağrı yüklemek için bir çağrı ile yapılabilir.

$('#div').load('url', {}, callback);

id = 'div' ile bir element url çağrı sonucu ile doldurulur nerede, {} isteğe bağlıdır ve geri arama yük sonra yürütülecek içerebilir bir işlevdir. Çağırma işlevi yeni içerik fadeIn için kullanılabilir.

 var clickHandler = function(){
    $("#upimg").hide('slow');

    $('#div').load('url', {}, callback);

 }

 var callback = function(){
    $('#div').show('slow');
 }

AJAX isteği $.get ile yapılabilir ve fadeOut gibi jQuery animasyon fonksiyonlarını kullanarak DIV fade

Burada istediğiniz ne acchive nasıl bazı kod:

$( '#IdOfOneAnchor' ).click ( function () {
    var myDiv = $( '#IdOfYourDiv' );
    myDiv.fadeOut ();
    $.get (
    	'url/to/your/script.php',
    	{
    		// put params you need here
    	},
    	function ( response ) {
    		myDiv.html ( response ).fadeIn ();
    	}
    );

    return false;
} );

ders dışı Eğer DIV'leri / bağlantıları maç için seçiciler değiştirmek zorunda kalacak ...

etiketler