let listType = $(".filter-action a.active").attr("data-value");
const $listTypeButtons = $(".filter-action a").on("click",function(){
listType = $(this).attr('data-value');
});
function Data_Send(query = '', page = 1) {
var action = 'UListPost';
var min_fiyat = $('#min_fiyat').val();
var max_fiyat = $('#max_fiyat').val();
var durumtag = Filtre('durumtag');
var kategori = Filtre('kategori');
var ozellik = Filtre('ozellik');
var goster = $("#UrunShow").val();
var Liste = listType;
$.ajax({
url:"/Data",
method:"POST",
dataType: "json",
data:{Liste, goster, query, page, action, min_fiyat, max_fiyat, durumtag, kategori, ozellik},
success:function(data){
$('.cikti').html(data.avg);
$('#sayfalama').html(data.pagination);
$('span#toplam').html(data.total);
}
});
}
function Data_Send(query = '', page = 1) {
var action = 'UListPost';
var min_fiyat = $('#min_fiyat').val();
var max_fiyat = $('#max_fiyat').val();
var durumtag = Filtre('durumtag');
var kategori = Filtre('kategori');
var ozellik = Filtre('ozellik');
var goster = $("#UrunShow").val();
var Liste = $(".filter-action a.active").attr("data-value");
$.ajax({
url:"/Data",
method:"POST",
dataType: "json",
data:{Liste, goster, query, page, action, min_fiyat, max_fiyat, durumtag, kategori, ozellik},
success:function(data){
$('.cikti').html(data.avg);
$('#sayfalama').html(data.pagination);
$('span#toplam').html(data.total);
}
});
}
O zaman post işleminden hemen önce input'ları seçmeli, boş olup olmadıklarını kontrol etmeli, boş olan varsa post işlemini yapmayıp input'lara bir uyarı amaçlı stillendirilmiş bir class atamalısınız.
Öncelikle input ekleme işlemi aşağıdaki gibi yapılıyor diyelim.
const $packetFrom = $('#packetFrom');
let counter = 1;
function addPacket() {
$packetFrom.append(`
<div class="row hidden_envelope" id="newPacket${counter}">
<input type="text" name="kullanici_id[]" required>
</div>
`);
counter++;
}
Bir doğrulama fonksiyonu oluşturalım. Bu fonksiyon,
- parametrede kendisine verilen elementin içindeki tüm input'ları kontrol etsin.
- required attribute'sine sahip input'ların boş olup olmadığını kontrol etsin.
- Eğer boş bir input'a rastlarsa ona "required" diye bir class atasın.
- Eğer boş bir input varsa fonksiyon false dönsün. Yoksa true dönsün.
function validation($wrapper) {
const $inputs = $wrapper.find("input[required]");
let validationStatus = true;
for(let i=0; i < $inputs.length; i++) {
const $input = $inputs.eq(i);
if($input.val().trim()=="") {
valitadionStatus = false;
$input.addClass("required");
$input.one("input", function(){ $(this).removeClass("required") });
}
}
return validationStatus;
}
Artık bu fonksiyonu submit işleminden önce çalıştırabiliriz. Eğer fonksiyon false dönerse submit yapmayız.
if(!validation($packetFrom)) {
// Doğrulama başarısız olduysa çalışacak kodlar...
return;
}
// Doğrulama başarılıysa çalışacak kodlar...
Ayrıca doğrulama başarısız olduğunda input'lara "required" diye bir class basılıyor. Bu class'a stil vererek zorunlu input'u kullanıcıya belirtebilirsiniz.
JQuery, normalde saf javascript ile de yapabileceğimiz işleri daha kolay yapabilelim diye javascript ile oluşturulmuş hazır fonksiyonlar barındırır.
Aynı soruyu Bootstrap ve CSS için de sorabilirsiniz. CSS varken Bootstrap'a neden ihtiyacımız olsun? Daha hızlı sonuç alabilmek için.
Aşağıda aynı işleve sahip kodun Javascript ve JQuery örneği var.
// SAF JAVASCRIPT
const $loginMenu = document.getElementById("loginMenu");
document.getElementById("login").addEventListener("click", () => {
$loginMenu.style.display = $loginMenu.style.display === "none" ? "inline" : "none";
});
// JQUERY
const $loginMenu = $("#loginMenu");
$("#login").click(() => {
$loginMenu.toggle();
});
(Kaynak: https://tr.bitdegree.org/tutorial/jquery-ve-javascript-arasindaki-fark)
JQuery javascript'ten daha iyi olduğu iddiasıyla çıkmadı. Zaten JQuery kullandığınızda sadece javascript ile önceden hazırlanmış hazır fonksiyonlar kullanmış oluyorsunuz.
JQuery ilk çıktığında "az kod çok iş" sloganıyla çıktı. Dediler ki "Javascript'te tekerleği yeniden keşfetmeyin, bakın biz sizin sıkça kullanacağınız işlemler için kolayca kullanabileceğiniz fonksiyonlar oluşturduk. Bunları kullanıp hızlıca sonuca ulaşın."
Performans olarak değerlendirirsek doğal olarak saf javascript daha performanslı çalışır. Çünkü sadece ihtiyacınız olan kodu kullanırsınız. JQuery ise kolay kullanım amacıyla hazır fonksiyonları içinde birçok şeyi kontrol etmek zorundadır.
JQuery'e rakip olarak React'ı gösterebiliriz. İkisi de javascript'i kullanmanın farklı yollarını sunar ama temelde ikisi de javascript ile oluşturulmuştur.
React da aynı şekilde javascript'ten daha iyi olduğunu iddia etmez. Ama JQuery'den iyi olduğunu iddia eder. Der ki "Benim yöntemlerimle kodlama yaparsanız JQuery'deki yöntemlerin yaratacağı performans kaybını yaşamazsınız."
Svelte de React için aynısını söyler.
React, Vue, Svelte... Bunların sorunu derlenerek kodu optimize etmesi gerekliliği. Ama JQuery doğrudan çalışma imkânı sunar.
JQuery kullandığınızda kodu değiştirip kaydettiğinizde iş bitmiştir. Ama React kullandığınızda önce kodu değiştirir, sonra build alır, sonra eski kod yerine bu yeni kodu koyarsınız. Tabi daha pratik yollardan bu işlemi yapmanın yolları da var ama o zaman da o daha pratik yolları oluşturmakla uğraşmanız gerekir.
Yani JQuery ve Javascript arasındaki meseleyi Bootstrap ve CSS arasındaki mesele gibi görebilirsiniz. Bootstrap da içinde bir sürü hiç kullanmayabileceğiniz kod barındırır. Hatta html kodunuzu da bir sürü kodla doldurur. Ama amacımız hızlı iş çıkarmaksa ve çok çok özgün bir iş yapmayacaksak kullanabiliriz.
Backend tarafında da PHP ile Laravel veya Codeigniter arasındaki ilişkiye benzetebiliriz. Laravel neticede PHP ile oluşturulmuştur ama saf PHP ile yapmanın çok zaman alacağı işleri daha kısa sürede yapabilmemizi sağlayan hazır fonksiyonlara ev sınıflara sahiptir.
Kodu güncelledim tekrar deneyin. Kod içinde geçen exit(); kodlarını silin.
Sayfanın altında üstünde başka kodlar varsa onlar etkiliyor da olabilir.
Sorun stillerin gelmemesiyse stilleri sayfanın üst kısımlarında yazın.
Şu an veriyi kutuya yazıyor olmalı. Ekran görüntüsü atabilir misiniz?
Stilllerinizi sayfanın üstünde çağırmalısınız.
<?php
$language = isset($_GET['language']) ? $_GET['language'] : 'en';
$userAgent = isset($_GET['userAgent']) ? $_GET['userAgent'] : 'WikiBot/1.0 (+http://'.$_SERVER['SERVER_NAME'].'/)';
$betterResults = !( isset($_GET['betterResults']) && ($_GET['betterResults'] == 'false' || $_GET['betterResults'] == 0));
$proxy = isset($_GET['proxy']) ? $_GET['proxy'] : null;
$imageProxy = !(isset($_GET['imageProxy']) && ($_GET['imageProxy'] == 'false' || $_GET['imageProxy']== 0));
$DEBUG = isset($_GET['DEBUG']) ? $_GET['DEBUG'] : null;
// Set the Parameter
$options = array(
'language' => $language,
'userAgent' => $userAgent,
'betterResults' => $betterResults,
'proxy' => $proxy,
'imageProxy' => $imageProxy,
'DEBUG' => $DEBUG,
);
require_once __DIR__.'/ciktisi.php';
// Start the Wikipedia API Class
$wiki = new wiki($options);
// Output the API Response
$apiResult = $wiki->api($_GET['q']);
if($apiResult) { ?>
<div class="kutucugumuz">
<div class="bilgi viki5">
<h3 class="yazilar"><i class="ikon"></i> Türkçe wikimiz</h3>
</div>
<div class="sag-bilgi">
<div class="left-s"><span class="digerb"></span></div>
<div class="">
<div class="kucuk">
<div class="">
<?=$apiResult?>
</div>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div>Buraya da sonuç dönmediğinde görüntülenecek içerik gelecek</div>
<?php }
// Print the Script Runtime in DEBUG Mode
if ( isset($DEBUG) ) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
}
?>
ekran görüntüsü görme şansım var mı?
İçine yazdığınızda div'leriniz görünüyor. Ama içi boş div'ler.
echo $apiResult; yazan yere var_dump($apiResult); yazıp sonuç geldiğinde oraya ne çıktı verdiğini bana göstermeniz gerekiyor.
Sonuç gelmediğinde de else içine yazdıklarınız görünüyor olmalı.
div'leri yukarı yazmayın.
Buraya sonuç döndüğünde ne istiyorsak o içerik gelecek. kutucuk, küçük, div'ler vs her ne istersek buraya...
yazdığım yere yazın.
else içindeki stilleri kaldırın. Ona gerek yok. Sonuç dönmediğinde görünecek html verisini oraya yazın.
div'lerinizi nereye yazıyorsunuz?
çalışınca ne hata veriyor?