Nasıl jquery ile bir json yanıtı bir sayfa içine html bloğunu ekleyebilirsiniz?

4 Cevap php 
<script type="text/javascript">
var dataString2 = 'run=captchagood&comment=' + comment;
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString2,
    dataType: "json",
    error: 'error',
    success: function (data) {
        if (data.response === 'captchasuccess') { 
            $('div#loader').find('img.load-gif').remove();
            $('div#loader').append('<span class="success">Thanks for your comment!</span>');
            $('div#loader').hide().fadeIn('slow');
            $('span.limit').remove();
            $('ol#commentlist').prepend(data.comment);
            $('input#submit-comment').unbind('click').click(function () {
                return false;
            });
        };
    }
});
</script>

Ben geçerli sayfada bir açıklama listesine aşağıdaki kodu eklemek için yukarıdaki gerekir.

COMMENT-ID-NUMBEER = this will be part of the json response above
COMMENT-POST-DATE = this will be part of the json response above
COMMENT-TEXT = this will be part of the json response above

USER-GENDER = this is in the PHP session
USER-IMAGE-URL = this is in the PHP session
USER-NAME = this is in the PHP session

Burada, sayfanın içine aşağıdaki kodu eklemek gerekir ama öğeleri ile ben de uygun locatons sokulacak doğrudan yukarıda sıraladığım budur.

<ol class="commentlist" id="commentlist">


    <!-- START Comment block -->
    <li class="thread-even"  id="COMMENT-ID-NUMBEER"> 
    	<div class="photocolumn"> 
    		<div class="imageSub" style="width: 100px;"> 
    			<img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
    			<div class="blackbg"></div>
    			<div class="label">USER-NAME</div>
    		</div>
    	</div>
        <div class="commenttext"> 
        	<span class="comment_date">COMMENT-POST-DATE</span>
    		<p>COMMENT-TEXT</p> 
    	</div> <!-- END COMMENTTEXT -->
    	<div class="modcolumn">
    		<a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
    		Delete
    	</div>
    </li> 
    <!-- END comment block-->

</ol>

Başka bir soru, benim komut listesi hücreler alternatif arka plan rengi, bu yüzden nasıl ben class = "thread-hatta" ya da class = "thread-odd" son öğeye bağlı olarak eklemek yapabilir?

4 Cevap

Ben zaten bir şablon olarak sayfada gizli html bu bloğa sahip öneririz. Eğer ajax yanıt olsun, jquery ile klonlamak örnek belirli verileri eklemek, ve sonra sayfaya eklenecek.

Yorum sınıfları alternatif için, sadece son bir kontrol ve karşıt sınıfını kullanın. Tabii ki, ilk Yorumlarınız için varsayılan bir sınıf gerekir.

Example:

: CSS veya javascript gizli sayfanızda bu bir yere sahip

<!-- START Comment block -->
<li class="thread-even"  id="comment_template"> 
    <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                    <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                    <div class="blackbg"></div>
                    <div id="username" class="label">USER-NAME</div>
            </div>
    </div>
    <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
    </div> <!-- END COMMENTTEXT -->
    <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
    </div>
</li> 
<!-- END comment block-->

Ardından, başarı geri arama, ben yukarıda belirtilen ne yapmak gerekir. İşte başlamak için bir örnek:

//clone your template
var comment = $('#comment_template').clone();

//insert instance specific data
$('#username', comment).html(USERNAME);
$('.comment_date', comment).text(DATE);
//do the rest

//append it to your page
$('#commentlist').append(comment);

jTemplates tasarıyı uygun olmalıdır. Indirmek doğrudan gitmek, size sonra ... veya hızlı örnekler için a few blog posts bunu denemek konum ne ile örnek bir proje içerir. Bu tekrarlanan kesimleri için niyet, ama bu tekrarlar ya da değil şablonu şey gayet güzel çalışıyor.

Neden sunucu tarafında dönüş yapmak değil HTML sizin JSON nesne anahtarlarından biri olarak. Zaten bu yüzden de bunun "HTML biçimli" sürümünü dönen, hazırlanan bir açıklamayı görüntülemek için bu mantığı olmalıdır data.htmlComment o kadar da zor olmaz.

İkinci soruya yanıt olarak:

"Başka bir soru, benim komut listesi hücreler alternatif arka plan rengi, bu yüzden nasıl ben class = eklemek yapabiliriz" thread-hatta "ya da class =" thread-odd "son öğeye bağlı?"

son öğe bile sınıf varsa testi, eğer, o tek sınıf ve tersi verin:


if ( $("#mylist > :last").is(".thread-even") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-odd');
} else if ( $("ul > :last").is(".thread-odd") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-even');
}

kullanılan seçici belirtilen id son çocuğunu seçer. Eğer son çocuk size yeni bir sınıf vermek gerekir şey olmalıdır Sonuna, böylece aynı seçicisini kullanabilirsiniz kez ;) Orada koduna bu uyması için daha iyi bir yolu olabilir, ama pasajı olarak size ne vermelidir o ... iyi şanslar çalışma almak gerekir :)

etiketler