Ajax ile div yenileme nasıl yapılır?

27-09-2022, 14:23:54

Merhabalar öncelikle yapmak istediğim şey hakkında ufak bir bilgi vereyim.
Yorumlar ile ilgili çalışıyorum yorumları ajax ile listeledim ve yorum gönderme işlemi de ajax ile gerçekleşiyor fakat yeni yorum yapıldığında sayfayı yenilemem gerekiyor gözükmesi için ama benim istediğim bu değil sayfa yenilenmeden anlık olarak yapılan yorum listelensin istiyorum bunu nasıl çözebilirim
Yorum Listeleme

   $(document).ready(function () {
                let id = $("#BlogID").val();
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                type: "Get",
                    data: { BlogID: id },
                    url: "/Comment/CommentList/",
                success: function (funk) {
                    let values = jQuery.parseJSON(funk);
                        let htmlst = ``;
                    $.each(values, (index, value) => {
                            htmlst += `<div class="media"><img style="width:64px; height:64px;" src=${value.UserImage} alt="" class="img-fluid" />  <div class="media-body"> <h5 class="mt-0">${value.CommentUserName}</h5><p>${value.CommentContent}</p></div></div>`;
                    });
                        $("#listcom").html(htmlst);  
                        
                }
            });
               });

Yorum Gönderme

$("#btncommentadd").click(function () {
                let values = {
                    BlogID: $("#BlogID").val(),
                    CommentUserName: $("#CommentUserName").val(),
                    CommentTitle: $("#CommentTitle").val(),
                    CommentContent: $("#CommentContent").val(),
                    CommentDate: $("#CommentDate").val()
                };
                $.ajax({
                    type: "Post",
                    url: "/Comment/CommentAdd/",
                    data: values,
                    success: function (fnk1) {            
                       let result = jQuery.parseJSON(fnk1);
                        location.reload();
                    }
                });
            });

Kodlarım yukarıda belirttiğim gibidir şimdiden yardımlarınız için teşekkür ederim

27-09-2022, 14:31:19

#2

eycreative

Jquery ile Div etiketini otomatik yenileme adlı makaleme göz atabilir misiniz?

27-09-2022, 14:35:14

#3

Algoritmikyazar

eycreative adlı üyeden alıntı: mesajı görüntüle

Jquery ile Div etiketini otomatik yenileme adlı makaleme göz atabilir misiniz?

Gayet istediğim gibi görünüyor fakat

    $('#load_news').load('record.php').fadeIn("slow");

bu kısımda takılıyorum baktığım bir çok örnek bu şekilde ve php dili ile yapılmış ben .net core üzerinde yapıyorum ve yol belirtilmiyor örneğin .php gibi verileri de sql üzerinden çekiyorum

27-09-2022, 14:37:34

#4

eycreative

Algoritmikyazar adlı üyeden alıntı: mesajı görüntüle

Gayet istediğim gibi görünüyor fakat

    $('#load_news').load('record.php').fadeIn("slow");

bu kısımda takılıyorum baktığım bir çok örnek bu şekilde ve php dili ile yapılmış ben .net core üzerinde yapıyorum ve yol belirtilmiyor örneğin .php gibi verileri de sql üzerinden çekiyorum

hocam .net bilmiyorum.

27-09-2022, 14:39:08

#5

Algoritmikyazar

Yinede değerli yorumun için teşekkür ederim peki bu işi yapabileceğim sayfayı yenilemeden refresh yöntemi var mı bildiğiniz ?

27-09-2022, 14:40:19

#6

chapters

ajaxtan gelen response den sonra location.reload(); yaptıgın için sayfa yenileniyor. yorumların bulundugu üst div'i seçip dönen verileri append edeceksin

27-09-2022, 16:20:00

#7

Algoritmikyazar

chapters adlı üyeden alıntı: mesajı görüntüle

ajaxtan gelen response den sonra location.reload(); yaptıgın için sayfa yenileniyor. yorumların bulundugu üst div'i seçip dönen verileri append edeceksin

Bahsettiğiniz bu şekilde ise yine sayfayı yenilemeden verilere erişemiyorum

     $("#btncommentadd").click(function () {
                let values = {
                    BlogID: $("#BlogID").val(),
                    CommentUserName: $("#CommentUserName").val(),
                    CommentTitle: $("#CommentTitle").val(),
                    CommentContent: $("#CommentContent").val(),
                    CommentDate: $("#CommentDate").val()
                };
                $.ajax({
                    type: "Post",
                    url: "/Comment/CommentAdd/",
                    data: values,
                    success: function (fnk1) {             
                       let result = jQuery.parseJSON(fnk1);
                        $("#listcom").append(result)
                        //location.reload();
                    }
                });
            });

27-09-2022, 17:08:58

#8

chapters

Algoritmikyazar adlı üyeden alıntı: mesajı görüntüle

Bahsettiğiniz bu şekilde ise yine sayfayı yenilemeden verilere erişemiyorum

     $("#btncommentadd").click(function () {
                let values = {
                    BlogID: $("#BlogID").val(),
                    CommentUserName: $("#CommentUserName").val(),
                    CommentTitle: $("#CommentTitle").val(),
                    CommentContent: $("#CommentContent").val(),
                    CommentDate: $("#CommentDate").val()
                };
                $.ajax({
                    type: "Post",
                    url: "/Comment/CommentAdd/",
                    data: values,
                    success: function (fnk1) {            
                       let result = jQuery.parseJSON(fnk1);
                        $("#listcom").append(result)
                        //location.reload();
                    }
                });
            });

yok tam olarak böyle değil. Atıyorum, tek bir yorumu gösterdiğin html kodu aşağıdaki gibi. Sen result içerisindeki verileri bu html koduyla birlikte seçtiğin div append edeceksin.

$("#listcom").append(`
<div class="yorum">
<label>Name: ${result.name}</label>
</div>
`)

27-09-2022, 17:12:34

#9

Algoritmikyazar

chapters adlı üyeden alıntı: mesajı görüntüle

ajaxtan gelen response den sonra location.reload(); yaptıgın için sayfa yenileniyor. yorumların bulundugu üst div'i seçip dönen verileri append edeceksin

Anladım bu şekilde uyarlamayı deneyeceğim teşekkür ederim aslında load ile div'i gösterince yine oluyor ama yenileme işlemi gerçekleşiyor benim istediğim facebook,twitter gibi sitelerde ki yorum mantığı yani yorum yapıldığı an anlık gözükmeli bence