Aynı sayfada post işlemi
<div class="col-md-2 col-sm-12">
<!-- dyil tüm yayınlar 1 SUCCESS -->
<div class="card card-primary card-outline shadow-sm">
<div class="card-header">
<form action="" method="post">
<div class="input-group">
<select id="mySelect2" class="form-control select2bs4 is-info" name="yilsecim" data-placeholder="Any" value="<?= $item["dyil"]; ?>">
<?php
$yilyazi = $db->VeriGetir('yazilar', "where durum=?", array(1), "group by dyil desc"); ?>
<?php foreach ($yilyazi as $item) { ?>
<option value="<?= $item["dyil"]; ?>"><?= $item["dyil"]; ?>
</option>
<?php } ?>
</select>
<input type="submit" name="submit" value="Listele">
</div>
</form>
</div>
<!-- /.card-header -->
<?php
if (isset($_POST['submit'])) {
if (!empty($_POST['yilsecim'])) {
$selected = $_POST['yilsecim'] ?>
<div class="card-body">
<?= $selected; ?> yılı yayınlarımız:<br>
<hr>
<?php
$item = $db->VeriAl("Select dbaslik,dlink,dyil from yazilar", "where durum=? AND dyil=?", array(1, $selected), "");
foreach ($item as $item) { ?>
<li><a href="<?= URL ?>yazilar/<?= $item["dlink"]; ?>"><?= $item["dbaslik"]; ?></a></li>
<?php }
}
} else { ?>
<div class="card-body">
<?= $veri[0]["dyil"] ?> yılı yayınlarımız:<br>
<hr>
<?php
$item = $db->VeriAl("Select dbaslik,dlink,dyil from yazilar", "where durum=? AND dyil=?", array(1, $veri[0]["dyil"]), "");
foreach ($item as $item) { ?>
<li><a href="<?= URL ?>yazilar/<?= $item["dlink"]; ?>"><?= $item["dbaslik"]; ?></a></li>
<?php
}
} ?>
</div>
<!-- /.card-body -->
</div>
<!--/.dyil tüm yayinlar son -->
</div>
<!--rightside end-->
</div>
Not: $veri[0]
Sayfanın Main Body kısmında yazıyı çekmekte kullandığım kod onu buraya yapıştırmadım.
Aynı sayfada yazının tüm içeriği MAin Body kısmında ve sayfanın sağında küçük bir kart içinde (yukardaki kod bloğu) tüm yazıların yıllara göre listelemesini yapıyorum.
Option value ile yılı seçiyorum bunu aynı sayfada post edip cardın body kısmında bu post a göre o yılın yazı başlıklarını listeletiyorum.
Bu haliyle çalışıyor ama bunun yerine jquery ile yapmak daha mı uygun? bu konuda yardımcı olur musunuz? javascript ve jquery den anlamıyorum.
Bu şekil aynı sayfada post etmek sanki sıkıntı yaratacak gibime geliyor. Ayrıca mobil görünümde yıl seçip listeletince sayfada refresh olduğundan ister istemez sayfa yukarı kayıyor tekrar aşağı kaydırmak gerekiyor. Bu da kullanım açısından sıkıntı yaratıyor.
Daha uygun bir kod yazımı için yardımınızı rica ediyorum.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (12)
Menüyü de içine almasının sebebi başta header.php yi de sayfaya çağırmanız. Onun için postu yakalayan php kodlarından önce bir çıktı olmaması gerekli. Sayfanın en başına yazın dememin sebebi de bu. Dönen cevabın öncesinde ve sonrasında bir çıktı olmaması lazım. En iyisi farklı bir sayfaya istek gönderin. Bir ajax.php oluşturun, ajax isteklerini o sayfada yapın.
Javascript kodlarını da body kapanış taginden hemen önce jquery dosyasını sayfaya çağırmanızdan SONRA yazarsanız çalışması gerekir
yaziyili.js diye bir dosya oluşturdum. İçine direk Aşağıdaki kodları attım.
$(function () {
$("#mySelect2").on("change", function () {
$.ajax(location.href, {
method: 'POST',
data: {
yillar: $(this).val()
}
}).done(e => {
$(".years_list").html(e)
$(".year").text($(this).val)
})
})
})
index php de body arasına diğer scriptler gibi onu da çağırttım.
<body>
<?php
include_once(DATA . "header.php");
...
.
..
?>
...
...
...
<script src="<?=$URL;?>styles/yaziyili.js"></script>
..
....
.
.
.
</body>
Bu şekilde çalışıyor ama header.php den nav-menüyü de içine çekiyor. onun altına listelemeyi yapıyor.
formun kodlarını eklediğim sayfama (yazilar.php) aşağıdaki şekilde eklediğimde bu defada hiç istek atmıyor. Sayfanın en altına da katsam nereye katarsam katayım çalışmıyor.
<script src="<?=$URL;?>styles/yaziyili.js"></script>
Hocam ajax ın bu şartlarda çalışması lazım. Bir de alttaki kodları sayfanın en üstüne koymanız gerek sanırım.
<?php
if (isset($_POST['yillar'])) {
$query = $db->VeriAl("Select dbaslik,dlink,dyil from yazilar", "where durum=? AND dyil=?", [1, $_POST['yillar']], "");
$str = '';
foreach ($query as $item) {
$str .= ' <li><a href="'.URL.'yazilar/'. $item["dlink"] .'">'. $item["dbaslik"] .'</a></li>';
}
echo $str;
exit();
}
?>
Hocam şu şekilde bir deneyin bakalım olmuş mu. Biraz düzenlemeye çalıştım
<div class="col-md-2 col-sm-12">
<!-- dyil tüm yayınlar 1 SUCCESS -->
<div class="card card-primary card-outline shadow-sm">
<div class="card-header">
<?php
if (isset($_POST['yillar'])) {
$query = $db->VeriAl("Select dbaslik,dlink,dyil from yazilar", "where durum=? AND dyil=?", [1, $_POST['yillar']], "");
$str = '';
foreach ($query as $item) {
$str .= ' <li><a href="'.URL.'yazilar/'. $item["dlink"] .'">'. $item["dbaslik"] .'</a></li>';
}
echo $str;
exit();
}
?>
<form action="" method="post">
<div class="input-group">
<select id="mySelect2" class="form-control select2bs4 is-info" name="yilsecim" data-placeholder="Any">
<?php
$yilyazi = $db->VeriGetir('yazilar', "where durum=?", [1], "group by dyil desc"); ?>
<?php foreach ($yilyazi as $item) { ?>
<option value="<?= $item["dyil"]; ?>"><?= $item["dyil"]; ?></option>
<?php } ?>
</select>
</div>
</form>
</div>
<!-- /.card-header -->
<div class="card-body">
<h4> <span class="year"><?= $veri[0]["dyil"] ?></span> yılı yayınlarımız:</h4>
<hr>
<ul class="years_list">
<?php
$query = $db->VeriAl("Select dbaslik,dlink,dyil from yazilar", "where durum=? AND dyil=?", [1, $veri[0]["dyil"]], "");
foreach ($query as $item) { ?>
<li><a href="<?= URL ?>yazilar/<?= $item["dlink"]; ?>"><?= $item["dbaslik"] ?></a></li>
<?php } ?>
</ul>
<!-- /.card-body -->
</div>
<!--/.dyil tüm yayinlar son -->
</div>
<!--rightside end-->
</div>
ajax
$(function () {
$("#mySelect2").on("change", function () {
$.ajax(location.href, {
method: 'POST',
data: {
yillar: $(this).val()
}
}).done(e => {
$(".years_list").html(e)
$(".year").text($(this).val)
})
})
})
Aynı sayfada post etmende sakınca yok aslında.. basit şekilde çözüm istersen eğer, form action kısmına "#liste" şeklinde forma bir çapa ekle sonra sonuçları listeleyeceğin divin id="liste" değerini ekle. sonuçları listele butonuna tıkladığında sayfa yenilediğinde #liste divinden göstermeye başlayacaktır böylelikle mobilde sıkıntın çözülecektir.