Merhabalar r10 üyeleri konu başlığındaki gibi jQuery'de nasıl daha fazla yükle butonu yapabilirim bir çok yere baktım siteme entegre ettim fakat bir türlü çalışmadı çalışsa bile beyaz bir form sayfası geliyor veri tam olarak geliyor fakat gönderiler gelmiyor onu nasıl çözebilirim ?
Daha önce bu sistemi yapmış olan veya yardımcı olmak isteyenler yorumlara yazabilirler her türlü konuya ve yorumlara açığım. Şimdiden hepinize teşekkür ederim.
jQuery ajax daha yükle butonu nasıl yapabilirim?
10
●168
- 13-08-2021, 19:37:56
- 13-08-2021, 19:46:08Merhaba, javascript ile o kayıtların olduğu sayfaya get talebinde bulunduğunuzda elinize string bir kaynak kodu gelir domparser ile bu kodu html e çevirmelisiniz. Ardından çevirdiğiniz koddaki eklemek istediğiniz yerleri tek tek seçip eklemelisiniz.
var url = `/admin/postgetnow`; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onload = function () { if (this.status === 200) { var parser = new DOMParser(); var xmlDoc = parser.parseFromString(this.responseText, "text/html"); xmlDoc.querySelectorAll('.list-post').forEach(element => document.querySelector('main form').appendChild(element)); } } xhr.send(); - 13-08-2021, 19:51:24Örnek vereyim halledersin diye tahmin ediyorum. Window'a veya bir değişkene sayfa/sıra state'i atıyoruz (1). Api tarafına query üzerinden sayfa verisini ekleyerek istek atıyoruz. Daha sonra gelen veriyi tablona/containerına ekleyebilirsin. Takıldığın bir nokta olursa yardımcı olmak isterim.
- 13-08-2021, 20:08:51hocam söyle bir problem var ben post ile yapmak istiyorum veriyi başka bir sayfa üzerinden tamamlamasını istiyorum blog sitem sayfalama yerine daha fazla göster buton koyup ona tıkladığında diğer bir post gelmesi lazım pdolu bir sistem mevcut olduğu için mysql filan kafa karıştırmasını istemiyorum.canyucel adlı üyeden alıntı: mesajı görüntüle
- 13-08-2021, 20:12:11hocam get ile yerine post yapsak daha sağlıklı olur mu örneğin ;Misafir adlı üyeden alıntı: mesajı görüntüle
<script type="text/javascript"> $(document).ready(function(){ $(document).on('click','.show_more',function(){ var ID = $(this).attr('id'); $('.show_more').hide(); $('.loding').show(); $('.loding').append('<center><img src="img/loading.gif"></center>'); $.ajax({ type:'POST', url:'ajaxam/ajax_haber.php', data:'id='+ID, success:function(html){ $('#show_more_main'+ID).remove(); $('.timeline-items').append(html); } }); }); }); </script>gibi yazsak ondan sonra onu başka bir ajax içinde çeksek diyorum çünkü orada problem yaşıyorum zaten. aşağıdaki kodları ne gibi problem yaşıyorum çözemedim ajax_haber.php içindeki böyle
<?php require '.../includes/config.php'; if(isset($_POST["id"])){ $get_id = strip_tags($_POST['id']); $query = $db->query("SELECT COUNT(*) as num_rows FROM posts INNER JOIN categories ON categories.category_id = posts.p_categories WHERE p_status = '1' && p_id < ".$get_id." ORDER BY p_id DESC")->fetch(PDO::FETCH_ASSOC); $row = $query->fetch_assoc(); $totalRowCount = $row['num_rows']; $showLimit = 2; $query = $db->prepare("SELECT * FROM posts WHERE INNER JOIN categories ON categories.category_id = posts.p_categories WHERE p_status = '1' && p_id < ".$get_id." ORDER BY p_id DESC LIMIT ".$showLimit." "); $query->execute(); if($query->rowCount() > 0){ while($row = $query->fetch(PDO::FETCH_ASSOC)){ $id = $row['p_id']; $date = getdate($row['p_date']); $day = $date['mday']; $month = $date['month']; $year = $date['year']; $title = $row['p_title']; $author = $row['p_author']; $author_image = $row['p_author_image']; $image = $row['p_image']; $categories = $row['p_categories']; $tags = $row['p_tags']; $post_data = $row['p_post']; $views = $row['p_views']; $status = $row['p_status']; $post_id = $id; $ing_aylar = array("January","February","March","May","April","June","July","August","September","October","November","December"); $tr_aylar = array("Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"); $ing_gunler = array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"); $tr_gunler = array("Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"); $month = str_replace($ing_aylar,$tr_aylar,$month); $day = str_replace($ing_gunler,$tr_gunler,$day); ?> <div class="col-12 timeline-items" id="<?=$post_id?>"> <div class="post-block-style"> <div class="row ts-gutter-20 align-items-center"> <div class="col-md-6"> <div class="post-thumb"> <a href="<?php echo $row["p_seolink"]; ?>"> <?php if(!empty($image) > 0){ ?> <img src="images/news/<?php echo $image;?>" width="100%" height="100%" title="<?php echo $title;?>" alt="Manset Fotoğrafı"> <?php } else { ?> <img src="images/resimYok.jpg" width="850" height="100%" title="<?php echo $title;?>" alt="Manset Fotoğrafı"> <?php } ?> </a> </div> </div> <div class="col-md-6"> <div class="post-content"> <a class="post-cat tech" href="kategori/<?php echo $row["category_url"]; ?>" title="<?php echo $row['category_title']; ?>"><?php echo $row['category_title']; ?></a> <h2 class="post-title title-md" title="<?php echo $title;?>"> <a href="<?php echo $row["p_seolink"]; ?>"><?php echo $title;?></a> </h2> <div class="post-meta mb-7"> <span class="post-author"> <?php if(!empty($author)){ ?> <a href="#" title="Yazar: <?php echo ucfirst($author);?>"><i class="fa fa-user"></i> <?php echo ucfirst($author);?></a> <?php } else { ?> <a href="#" title="Yazar: Patiliyoruz Ekibi"><i class="fa fa-user"></i> Patiliyoruz Ekibi</a> <?php } ?> </span> <span class="post-date"><i class="fa fa-clock-o"></i> <?php echo $day;?> <?php echo $month;?> <?php echo $year;?></span> </div> <?php $uzunluk = strlen($post_data); $limit = 150; if ($uzunluk > $limit) { ?> <p><?php echo substr($post_data,0,$limit) . "...";?></p> <?php } ?> </div> </div> </div> </div> </div> <?php } } else{ echo "<div align='center'><b>Hiçbir Haber Yazısı Mevcut Değil :(</b></div>"; } ?> <?php if($all_Rows > $showLimit){?> <div class="col-12 show_more_main" id="show_more_main<?php echo $post_id; ?>"> <div class="load-more-btn text-center"> <button id="<?php echo $post_id;?>" class="btn show_more">Daha Fazla Göster</button> </div> <center> <span class="loding" style="display: none;"></span> </center> </div><!-- tab content --> <?php } ?> <?php } ?>index.php içindeki kod satırı böyle şuanda
<?php define("INDEX", true); include 'pages/header.php'; ?> <!-- Site Title --> <title><?php echo $ayarcek["s_title"]; ?> - <?php echo $ayarcek["s_slogan"]; ?></title> <?php include 'pages/slider.php'; ?> <section class="block-wrapper"> <div class="container"> <div class="row ts-gutter-30"> <div class="col-lg-8 col-md-12"> <h2 class="block-title"> <span class="title-angle-shap"><i class="far fa-newspaper"></i> Haberler</span> </h2> <div class="row ts-gutter-30"> <?php $query = $db->prepare("SELECT * FROM posts INNER JOIN categories ON categories.category_id = posts.p_categories WHERE p_status = '1' ORDER BY p_id DESC LIMIT 1,6"); $query->execute(); if($query->rowCount() > 0){ while($row = $query->fetch(PDO::FETCH_ASSOC)){ $id = $row['p_id']; $date = getdate($row['p_date']); $day = $date['mday']; $month = $date['month']; $year = $date['year']; $title = $row['p_title']; $author = $row['p_author']; $author_image = $row['p_author_image']; $image = $row['p_image']; $categories = $row['p_categories']; $tags = $row['p_tags']; $post_data = $row['p_post']; $views = $row['p_views']; $status = $row['p_status']; $post_id = $id; $ing_aylar = array("January","February","March","May","April","June","July","August","September","October","November","December"); $tr_aylar = array("Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"); $ing_gunler = array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"); $tr_gunler = array("Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"); $month = str_replace($ing_aylar,$tr_aylar,$month); $day = str_replace($ing_gunler,$tr_gunler,$day); ?> <div class="col-12 timeline-item" id="<?=$post_id?>"> <div class="post-block-style"> <div class="row ts-gutter-20 align-items-center"> <div class="col-md-6"> <div class="post-thumb"> <a href="<?php echo $row["p_seolink"]; ?>"> <?php if(!empty($image) > 0){ ?> <img src="images/news/<?php echo $image;?>" width="100%" height="100%" title="<?php echo $title;?>" alt="Manset Fotoğrafı"> <?php } else { ?> <img src="images/resimYok.jpg" width="850" height="100%" title="<?php echo $title;?>" alt="Manset Fotoğrafı"> <?php } ?> </a> </div> </div> <div class="col-md-6"> <div class="post-content"> <a class="post-cat tech" href="kategori/<?php echo $row["category_url"]; ?>" title="<?php echo $row['category_title']; ?>"><?php echo $row['category_title']; ?></a> <h2 class="post-title title-md" title="<?php echo $title;?>"> <a href="<?php echo $row["p_seolink"]; ?>"><?php echo $title;?></a> </h2> <div class="post-meta mb-7"> <span class="post-author"> <?php if(!empty($author)){ ?> <a href="#" title="Yazar: <?php echo ucfirst($author);?>"><i class="fa fa-user"></i> <?php echo ucfirst($author);?></a> <?php } else { ?> <a href="#" title="Yazar: Patiliyoruz Ekibi"><i class="fa fa-user"></i> Patiliyoruz Ekibi</a> <?php } ?> </span> <span class="post-date"><i class="fa fa-clock-o"></i> <?php echo $day;?> <?php echo $month;?> <?php echo $year;?></span> </div> <?php $uzunluk = strlen($post_data); $limit = 150; if ($uzunluk > $limit) { ?> <p><?php echo substr($post_data,0,$limit) . "...";?></p> <?php } ?> </div> </div> </div> </div> </div> <?php } } else{ echo "<div align='center'><b>Hiçbir Haber Yazısı Mevcut Değil :(</b></div>"; } ?> <div class="col-12 show_more_main" id="show_more_main<?php echo $post_id; ?>"> <div class="load-more-btn text-center" id="<?php echo $post_id;?>"> <button class="btn">Daha Fazla Göster</button> </div> <center> <span class="loding" style="display: none;"></span> </center> </div><!-- tab content --> </div> </div> <?php include 'pages/sidebar.php'; ?> </section><!-- First block end --> <?php include 'pages/footer.php'; ?> - 13-08-2021, 20:19:32Hocam get kullanıcı sayfayı açtığı anda gönderilen talep post form gönderildiğindeki talep olduğundan çalışmayacaktır. Ben bu tür yükleme işlemlerini genelde bir url oluşturarak yapıyorum. Örneğin butona tıklandığında domain.com/getir/yazi?sira=7 gibi sira değişkeni string olarak geliyor. Ona göre veri tabanından kayıtları o sayfada gösteriyorum. O sayfada sadece ?sira=14 ise veri tabanından 7 kayıt atlayıp diğer 7 kaydı sayfaya getiriyorum. O sayfada sadece bu kayıtlar oluyor. Attığım kod sadece o sayfanın html ine erişim verir. O sayfadaki kayıtları da attığım kodla ekleyebilirsiniz. Api yazarsanız postu kullanabilirsiniz ancak bu tür işlemler en sağlıklı get ile yapılır. Attığım kodun çalışması için get isteği gönderdiğiniz sayfada getirilecek html in olması gerekiyor. O sayfadaki 7 kaydı alıp kendi sayfanıza appendchild ile eklerseniz hiçbir problem kalmayacaktır. Yapmanız gereken bir url e sayfalama görevi atamak. Back end tarafında .net core mvc ile front end tarafında vanilla js ile çalıştığımdan kodları incelesem de yardımcı olabileceğimi zannetmiyorum. Anlattığım şekilde yaparsanız sorunsuz çalışacaktır.yorgun1adam adlı üyeden alıntı: mesajı görüntüle
- 13-08-2021, 20:26:51Örnek olarak sayfalama yöntemini verdim. Daha fazla yükle butonu sonraki sayfadan çekerek ekler çoğunlukla (veya algortimanın sunduğu veriyi sayfalar). Burada yanlış anlaşılan şey daha fazla yükle butonu, çünkü sadece UI'dan ibaret.yorgun1adam adlı üyeden alıntı: mesajı görüntüle