ayhan kesicioğlu

Ajax Metodunda Form Datalarının Yanında Ek Veriler Göndermek

Nisan 07, 2022

Ajax Method: Form Serialize + Additional Datas

Ajax methodunu kullanarak form verilerini $('#form').serialize() kullanarak kolayca gönderebiliyoruz. Fakat bu form verilerinin dışında ek datalar göndermek istediğinizde, aşağıdaki yöntemlerden birini kullanabilirsiniz.

Yöntem 1:

var data_ajax = $('#form').serialize() + '&quantity='+quantity+'&name=Ali';
$.ajax({
    url: 'index.php',
    type: 'POST',
    data: data_ajax,
    dataType: 'json',
    beforeSend: function() {
        $('#button').button('loading');
    },
    complete: function() {
        $('#button').button('reset');
    },
    success: function(json) {
        //..
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

Yöntem 2:

var data_ajax = $('#form').serializeArray();
data_ajax.push({name: 'quantity', value: quantity});
data_ajax.push({name: 'name', value: 'Ali'});
$.ajax({
    url: 'index.php',
    type: 'POST',
    data: data_ajax,
    dataType: 'json',
    beforeSend: function() {
        $('#button').button('loading');
    },
    complete: function() {
        $('#button').button('reset');
    },
    success: function(json) {
        //..
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

Devamını oku...

Javascript Turkish Title Case

Mart 03, 2020

Kelimelerin İlk Harflerini Türkçe Uyumlu Büyük Harf Yapma

Eğer Javascript veya Jquery kullanarak kelimelerin ilk harflerini büyük harfe çevirmek ve bunu Türkçe harfler için de sorunsuz çalıştırmak istiyorsanız aşağıdaki fonksiyonu kullanabilirsiniz.

Turkish TitleCase:

/**
 * Kelimelerin sadece ilk harfini buyuk hale cevirip yollar (Title Case)
 * Turkce karakterleri dogru cevirir.
 * . , ; ! : - ? ve bosluk karakterlerini kelime ayirici olarak sayar. 
 */
function toTitleCaseTR(str) {
    return str.toLocaleLowerCase('tr-TR').replace(/(?:^|\s|,|;|!|:|-|\.|\?)[a-z0-9ğçşüöı]/g, function(match) {
        return match.toLocaleUpperCase('tr-TR');
    });
}

Eğer metnin hepsini büyük veya küçük yapacaksanız aşağıdaki şekilde kullanabilirsiniz.

Turkish UpperCase:

str.toLocaleUpperCase('tr-TR');

Turkish LowerCase:

str.toLocaleLowerCase('tr-TR');

Devamını oku...

reveal.js Maximum call stack size exceeded error

Ekim 18, 2019

Maximum call stack size exceeded error

I added width and height value in settings. And I get some error:

reveal.js:1980 Uncaught RangeError: Maximum call stack size exceeded.

at dispatchEvent (reveal.js:1980)

at layout (reveal.js:2296)

at onWindowResize (reveal.js:5527)

at dispatchEvent (reveal.js:1980)

at layout (reveal.js:2296)

at onWindowResize (reveal.js:5527)

at dispatchEvent (reveal.js:1980)

at layout (reveal.js:2296)

at onWindowResize (reveal.js:5527)

at dispatchEvent (reveal.js:1980)

In order to fix it, go to line 2295 in reveal.js file. And replace if condition like this:

if( oldScale !== scale && typeof event == 'undefined' ) {
    dispatchEvent( 'resize', {
        'oldScale': oldScale,
        'scale': scale,
        'size': size
    } );
}

Devamını oku...

Best Jquery Range Sliders

Eylül 18, 2019

En İyi Jquery Aralık Seçiciler - Best Jquery Range Sliders

Bana göre en kullanılışlı jquery slider örneklerini listelemeye çalıştım.
Güncel: 18 Eylül 2019

1. Ion.RangeSlider
http://ionden.com/a/plugins/ion.rangeSlider/

2. Slider Pips
https://simeydotme.github.io/jQuery-ui-Slider-Pips/

3. Slider for Bootstrap
https://seiyria.com/bootstrap-slider/

4. jQuery rangeRover
https://www.jqueryscript.net/form/Dynamic-Range-Slider-Plugin-jQuery-rangeRover.html

Devamını oku...

jquery document ready | $(document).ready()

Eylül 03, 2019

jquery document ready | $(document).ready()

Sayfa tamamen yüklendikten sonra çalışmasını istediğiniz jquery kodları için aşağıdaki kodlardan istediğinizi kullanabilirsiniz.

1. kullanım:

$(document).ready(function() {
    console.log("Tüm sayfa yüklendi");
});

2. kullanım:

$(function() {
    console.log("Tüm sayfa yüklendi");
});

Devamını oku...

Wordpress'e Jquery Kodu Ekleme (functions.php)

Ağustos 23, 2019

Wordpress'e Jquery Kodu Ekleme (functions.php) | Add Additional Jquery Code into Wordpress

- Ftp'den, cpanel dosya yöneticisinden veya wordpress theme editor içinden functions.php dosyasını açın. Konumu: / httpdocs / wp-includes / functions.php
- En alta bu kodları ekleyin ve örnekteki gibi jquery kodlarınızı düzenleyin. Hepsi bu kadar. Böylece bu kodlar bütün sayfalarda çalışmış olacaktır.

function wpb_hook_javascript() {
    ?>
    <script>
    var $j = jQuery.noConflict();
    $j(function(){

        $j('.baslik').text('Deneme');
        $j('.metin').hide();

    });
    </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Devamını oku...

jquery-formatCurrency TL Uyumlu Yapma

Temmuz 29, 2019

Rakamları para formatına çevirmek için jquery-formatCurrency eklentisini kullanıyor iseniz (ki tavsiye ederim) ve TL uyumlu çevirmesini istiyorsanız basitçe başarabilirsiniz:

1. https://code.google.com/archive/p/jquery-formatcurrency/ adresinden son versiyonu indirin.
2. jquery.formatCurrency.js dosyasını açın ve aşağıdaki değişikliği yapın:

Gördüğünüz gibi EN için yazılmış kısmı TR haline çevirdik.
4. Sonra kaydedip bu dosyayı ftp den yükleyin.
5. Sayfanızda head etiketleri arasında bu js dosyasını çağırın:

<script src="jquery.formatCurrency.js"></script>

6. Sonrasında kullanımı basit. Diyelim rakamınız, id'si #ucret olan input giriş kutusunda yazıyor. Bu şekilde input kutusu içindeki rakamın formatını değiştirmiş olursunuz:

$('#ucret').formatCurrency();

Not: Dilerseniz regions['tr-TR'] şeklinde her dil için ayrı formatlar tanımlayabilirsiniz. O zaman aşağıdaki gibi kullanmanız gerekecektir:

$('#ucret').formatCurrency({roundToDecimalPlace: 2, region: 'tr-TR' }); //₺1.000,00

Devamını oku...

bootstrapValidator Tab Validation

Nisan 02, 2019

bootstrapValidator İle Tab Kontrolü | bootstrapValidator Tab Validation

bootstrapValidator kullanıyorsanız ve formunuz yukarıdaki resimde olduğu gibi tablardan oluşuyor ise validation işlemi sağlıklı çalışmayacaktır. Çünkü diğer tab'a geçtiğinizde önceki tab'larda oluşan hatalar görülmediği için sanki formda hata yokmuş gibi işleme devam etmektedir. Aşağıda verdiğim js kodlarını eklediğinizde tab'ların hepsi hatasız olana kadar submit butonu disable olacaktır. Fakat öncelikli olarak şu kontrolü yapın: formda hata oluşunca ilgili tab kırmızı olmalıdır yani hata oluşan tab .bv-tab-error class'ına sahip olmalıdır. Böyle olduğunu kabul ederek devam ediyorum.

$(document).ready(function() {
    $('#ayarlarForm').bootstrapValidator({
        excluded: [':disabled'],
        ...
    }).on('success.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    }).on('error.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    });
});

Bu kadar. Artık hatalar kalkana kadar yani tablardan herhangi biri .bv-tab-error class'ına sahip değil ise submit butonu aktif olacak ve devam edilebilecektir.

Devamını oku...

Jquery İle Oluşturulan Button'un Click Fonksiyonu

Aralık 01, 2018

Jquery İle Oluşturulan Button'un Click Fonksiyonu | Click Function of Button That Created with Jquery

1. İlk olarak jquery ile sayfamıza bir button ekleyelim.

$( document ).ready(function() {
    $("body").append("<input type="button" id="foo">");
});

2. Sonra bu butonun tıklanması fonksiyonunda bir uyarı mesajı çıkmasını sağlayalım.

✓ Doğru yöntem:

$(document).on("click","#foo",function() {
    alert("Merhaba");
});

✕ Yanlış yöntem:

$("#foo").on("click",function() {
    alert("Merhaba");
});

Not: Unutmayın buradaki fark; foo id'li butonun sayfanın ilk oluşturulması sırasında olmayıp sonradan sayfaya eklenmesidir. Bu nedenle ilk yöntemi kullanmalısınız. Eğer bu buton sayfa oluşturulurken zaten mevcut olarak geliyorsa o zaman her iki yöntem de kullanılabilir.

Devamını oku...

JQuery İle Yapılmış Seçme Örnekler

Kasım 16, 2012

Resim Kaydırma (Manşet, Banner, İçerik...):

jQuery Slider Evolution

Devamını oku...

JQuery Dünyasına Hoşgeldiniz

Nisan 11, 2011

Artık sitelerde sık sık görmeye başladığınız JQuery bence web sayfalarının görselliğinde yeni bir sayfa açtı. Size burda JQuery nedir diye anlatmayacağım. İnternette bu konu genişçe anlatılmış zaten. Fakat yararlandığım güzel ve seçme JQuery kaynak sitelerini ve yine seçme uygulamaları burada paylaşacağım.

JQuery Kaynak Siteler:

Devamını oku...

Maximum call stack size exceeded error

etiketler

görüntülenme