Giriş yapmadınız.

Duyuru

TÜRKÇE KİTAP DUYURUSU:
Laravel 5 : Laravel 5.1 Güzelliği (Türkçe)
Vue.js 2 : Vue.js 2 Majesteleri (Türkçe)

#1 25.01.2019 02:38:05

potti
Üye
Kayıtlı: 24.09.2018
Mesajlar: 68

Controller ve Ajax/Jquery baglantili Filter islemi

Daha once controller'da fetch ettigim datalara form ve select box ile filter edebiliyordum.
yalniz form/select box kullanmak yerine <ul> <li> ve Jquery ile islemi gerceklestirmeye calisiyorum. Fakat buradaki sorun,
hali hazirda controller'da spesifik olarak fetch ettigim datalari Jquery/Ajax a nasil gonderip, onu ul li ile filter islemini gerceklestirebilirim.

Filter menusu Jquery'yi buradaki jsfiddle'da gorebilirsini: https://jsfiddle.net/cv2q1rxh/

controller:

public function search(Request $request)
{
    $q = $request->q;
    $sortbyprice = $request->sortbyprice;
    $region = $request->region;
    $rooms = $request->rooms;
    $price = $request->price;
    $max = $request->input('max');
    $min = $request->input('min');

    $paginationData = [
        'q' => $q
    ];

    $estates = \DB::table('allestates')
        ->where('lat', '!=', '')
        ->where('lng', '!=', '')
        ->where('price', '!=', '')
        ->when($q, function($query, $q) use ($paginationData) {
            $paginationData['q'] = $q;
            return $query->where(function($query) use ($q) {
                        $query->where("building_name", "LIKE", "%" . $q . "%")
                            ->orWhere("address", "LIKE", "%" . $q . "%")
                            ->orWhere("company_name", "LIKE", "%" . $q . "%")
                            ->orWhere("region", "LIKE", "%" . $q . "%")
                            ->orWhere("rooms", "LIKE", "%" . $q . "%");
                    });
        })
        ->when($sortbyprice, function($query, $order) use ($paginationData) {
            if(!in_array($order, ['asc','desc'])) {
                $order = 'asc';
            }
            $paginationData['sortbyprice'] = $order;
            return $query->orderBy('price', $order);

        }, function($query) {
            return $query->orderBy('price');
        })
        ->when($region, function($query, $regionId) use ($paginationData) {
            $paginationData['region'] = $regionId;
            return $query->where('region', $regionId);
        })
        ->when($rooms, function($query, $roomsId) use ($paginationData) {
            $paginationData['rooms'] = $roomsId;
            return $query->where('rooms', "LIKE", "%" . $roomsId . "%");
        })
        ->when($max, function($query, $max) use ($min, $paginationData) {
            $paginationData['min'] = $min;
            $paginationData['max'] = $max;
            return $query->whereBetween('price', [$min, $max]);
        })
        // ->toSql()
        ->paginate(12);

    $paginationData = array_filter($paginationData);

    return view("home", compact('estates', 'q','paginationData'));
}

Çevrimdışı

#2 25.01.2019 06:51:48

mgsmus
Moderatör
Yer: Mersin
Kayıtlı: 17.08.2013
Mesajlar: 1,500
Website

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

Bir form oluşturup her bir alan için (rooms, region vs) gizli input oluşturacaksınız.
li elementine tıklanınca ilgili gizli input'a değeri işleyeceksiniz.
Sonra formu ajax ile post edeceksiniz.
Gelen sonuca göre sonuç alanını değiştireceksiniz.
Ayrıca filtreleme değerlerini de içerde tekrar tutmanız lazım.

Gelen sonuçlar sayfalanacaksa ajax pagination oluşturmanız gerekecek.
Sayfalama linkine tıklandığında içerde tekrar tuttuğunuz parametrelerle tekrar ajax ile göndereceksiniz, bu sefer page değeri ile.

Uzun iş...

Çevrimdışı

#3 25.01.2019 07:42:35

potti
Üye
Kayıtlı: 24.09.2018
Mesajlar: 68

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

Ben okurken, eminim siz de yazarken yorulmussunuzdur smile
Anladigimi su sekilde ozetleyeyim; ul ve li'leri form icine koyup, her bir li tag'inin icine input birakicam(display none).
daha onceki form'da optionlara verdigim name="" ve value="" degerlerini, bu kez inputlara verecegim?
Sonra da Ajax ile bunu post edecegim. "url: /home" seklinde, cunku controller'da datalari gonderdigim yer burasi.

Su kismi anlayamadim-->

Gelen sonuca göre sonuç alanını değiştireceksiniz.
Ayrıca filtreleme değerlerini de içerde tekrar tutmanız lazım.

Son olarak, hali hazirda controller'da pagination yapiyorum, ama bu Pagination ve Ajax pagination farkli gorev goruyorlar herhalde.

Çevrimdışı

#4 25.01.2019 12:29:56

mgsmus
Moderatör
Yer: Mersin
Kayıtlı: 17.08.2013
Mesajlar: 1,500
Website

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

ul/li form içinde olmasına gerek yok:

<ul>
    <li><a class="region" href="javascript:" data-value="関西">関西</a></li>
    <li><a class="region" href="javascript:" data-value="関東">関東</a></li>
    <li><a class="region" href="javascript:" data-value="北海道">北海道</a></li>
</ul>

<form id="ajaxFrm">
    <input type="hidden" name="region" id="region">
</form>
var $frm = $('#ajaxFrm');

$('a.region').on('click', function() {
    
    $('#region').val($(this).data('value'));
    
    $.ajax({
        type:'POST',
        url:'/ajax/veri/getiren/url',
        data:$frm.serialize(),
        success:function (response) {
            // Gelen sonuçları ekrana gösterme ile ilgili işlemler
        }
    })
});

Bu örnekte ilk linki tıkladığında #region id'li input'un değeri 関西 olacak ve formu POST yöntemi ile /ajax/veri/getiren/url adresine gönderecek. Siz de onu gönderdiği yöntem içerisinde $request->get('region'); ile o değere ulaşabileceksiniz.

Yol göstermesi için kısa bir örnek.

Çevrimdışı

#5 26.01.2019 11:19:27

potti
Üye
Kayıtlı: 24.09.2018
Mesajlar: 68

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

yonlendirmeniz icin tesekkurler. Bu sayede biraz ilerleyebildim. Fakat su an belli bir noktada takilmis durumdayim.

function fetchDataFromServer(options) {
    $.ajax({
        type: 'GET',
        url: '/home',
        data: options,
        success: function (response) {
            if (response.error) {
                console.error(response.error);
            } else {
                console.log(response);
                // updateDisplay(displayList);
            }
        },
        error: function (html, status) {
            console.log(html.responseText);
            console.log(status);
        }
    });
}

Bu sekilde bir GET yapiyorum. Fakat console'da bana donen layout sayfasinin HTML kodu oluyor.
POST ile yaptigimda ise su sekilde bir hatali dongu geliyor console'a

{
            "file": "/var/www/html/laravel/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
            "line": 151,
            "function": "then",
            "class": "Illuminate\\Pipeline\\Pipeline",
            "type": "->"
        },

Bunun controller ile bir ilgisimi var cunku, son olarak bahsettiginiz su kismi pek anlamadim. " $request->get('region'); "
Controller bir degisiklik mi yapmam gerekiyor? cunku, console.log(estates) yaptigimda ve filter ettigimde estate in icine filter edilmis datalar dusuyor.
ama sayfaya yansimiyor.(GET ile yaptigimda)

Controller'im yukaridaki mesaj'da oldugu gibi bir degisiklik yapmadim.

Son düzenleyen potti (26.01.2019 11:21:14)

Çevrimdışı

#6 26.01.2019 14:41:06

mgsmus
Moderatör
Yer: Mersin
Kayıtlı: 17.08.2013
Mesajlar: 1,500
Website

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

Ben size özellikle GET ya da POST yapın demiyorum. Size hangisi uygunsa onu kullanın, benim kodlarım sadece örnek. Siz benim örnekteki gibi yaptıysanız sizin search rotası POST değil GET kabul ediyordur o yüzden hata alıyorsunuzdur.

$request->get('region'); kısmını da örnek olarak verdim. Ajax ile gönderdiğiniz formdan gelen veriyi alırsınız diye.

Çevrimdışı

#7 26.01.2019 17:46:22

potti
Üye
Kayıtlı: 24.09.2018
Mesajlar: 68

Yanıt: Controller ve Ajax/Jquery baglantili Filter islemi

Evet, biraz sikintili da olsa sorunu halloldu, yardiminiz icin tesekkurler.

Çevrimdışı

Forum alt kısmı