Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Blade template - Selectbox değerine göre kod parse etme

YalcinSahin · 2022-01-13T07:41:32+00:00

Merhaba, Şu şekilde dışarıdan kontrolle aldığım bir template gösterimi var. @if(count($md) > 1) <livewire:integra...

YalcinSahin

@push("scripts")
<script>
    console.log("Çalıştı")
    </script>
@endpush

Dışarıdan script dosyalarını almayınca çalışıyor.

Aynı konuyu şurada da dile getirmişler:

https://stackoverflow.com/questions/68682185/laravel-8-push-to-stack-makes-script-not-working-as-expected

mgsmus

YalcinSahin Livewire dokümanlarında şöyle diyor:

Eğer $this->emit('postAdded', $post->id) şeklinde event ateşliyorsanız bunu javascript içinde şöyle dinleyebilirsiniz:

Livewire.on('postAdded', postId => {
    alert('A post was added with the id of: ' + postId);
})

Eğer $this->dispatchBrowserEvent('name-updated', ['newName' => $value]); kullanarak bir event ateşlediyseniz bunu javascript içinde şöyle dinleyebilirsiniz:

window.addEventListener('name-updated', event => {
    alert('Name updated to: ' + event.detail.newName);
})

Yani tarayıcı event'larını document değil window objesine ekliyor.

Ayrıca event ismi matchtypeselected değil matchTypeSelected. Çalışssın ya da çalışmasın, yazım şeklinde dikkat edin.

YalcinSahin

mgsmus

window olarak da denedim. Evet eventları yakalıyor ama alert('Name updated to: ' + event.detail.newName); kısmı selectbox her change ettiğinde doğru value değerini ateşlemiyor.

Ben de blade içerisindeki child-parent içerisindeki şu değerler ile çözmeye çalıştım.

https://laravel.com/docs/8.x/blade#stacks

Bunu fırlatırken sıkıntı yaratmıyor ama sonradan include edilen bir js dosyasını sistem algılamıyor.

Aslında şu konudaki gibi bir sıkıntı yaşıyorum.

https://stackoverflow.com/questions/68682185/laravel-8-push-to-stack-makes-script-not-working-as-expected

Yorumlarda yazan jquery js dosyan bundan önce eklenmeli kısmına da dikkat ediyorum aslında.

Js dosyamdaki bütün scriptleri @push @endpush arasına alıp yazdığımda ise sistem doğru düzgün çalışıyor.

Ben yukarıda verdiğim örnek gibi :

@push('scripts')
    <script src="/example.js"></script>
@endpush

<head>
    <!-- Head Contents -->

    @stack('scripts')
</head>

şeklinde çalıştıramıyorum. src olarak değil de kendim yazarsam js ler çalışıyor. Bunu bulamadım 🙂

Sistemimle mi alakalı acaba.

Aşamalar şu şekilde

admin.blade.php -> integration1.blade.php -> integration1-product-match.blade.php || integration1-category-match.blade.php

integration1-product-match.blade.php kısmında push atıp integration1.blade.php kısmında stack olarak almaya çalışıyorum.

admin.blade.php head alanım :

    @if(isset($m))
        @switch($m)
            @case("integration")
            @include("components.head.integration")
            @break
            @case("developer")
            @include("components.head.developer")
            @break
            @case("ftp")
            @include("components.head.ftp")
            @break
            @default
        @endswitch
    @else
        @include("components.css.default-css")
        @include("components.script.default-script")
    @endif

default-script componentim :

<script src="{{ asset('/cdn/jquery-3.2.1/jquery-3.2.1.min.js') }}"></script>

@livewireScripts

...

Bu şekilde ilerletiyorum süreci de bir de 3 dal değil de 2 dalı olan bir projede deneyeyim. Şu anda net bir çözüm bulamadım

mgsmus

YalcinSahin

YalcinSahin Hocam neden sevmiyorsun , gözlemlediğin eksiklikler ne ?

PHP ile JavaScript'in bu şekilde çarpık bir biçimde ilişkiye girmesini doğru bulmuyorum ve zaten yaşadığınız sorunların bir kısmı bundan çıkıyor. jQuery, Mootools zamanlarında sıkça yaşadığım sorunlar. Mantıklı olan API + Frontend şeklinde çalışmak. Bunun bir çok avantajı var. İlk başlarda yabancı olduğunuz bir ortam olduğu için garip gelebilir ama alıştıktan sonra oh be diyorsunuz. Modern javascript özellikle tarayıcı ile çalışırken ilk yapılandırması karışık gelebilir. Ortam ayarlama karmaşasından da kurtulmanın yolu var: https://vitejs.dev/

Hepsini denedim, hepsinin artı ve eksiklerini gözlemledim. Şu an sıfır bir projeye başlasam kesinlikle tercihim Laravel API + Vite olurdu. Vite içinde React ve Vue tercihi var, hangisini biliyorsanız onu seçersiniz ya da ilk defa başlayacaksanız iş imkanı açısından React (bizde) önde olduğu için onu tercih edebilirsiniz. Vue'yü sonra da öğrenebilirsiniz, bana göre Vue daha kolay bir öğrenme eğrisine sahip. Şu yaptığınız işlem örneğin Vue kullanarak o kadar basit ki...

YalcinSahin

mgsmus

Evet haklısınız ama burada da sıfırdan bir projeye aslında başlamamaktan kaynaklı oluşan bir durum var. Ayrıca front-end tarafını yapan arkadaşlar da farklı olduğu için esnek bir kütüphane geçişi sağlayamıyorum 🙂

Livewire kısmını da jetstream yüzünden öğrenmek ve kullanmak zorunda kaldım. Ama şu ana kadar dinamik bir yapı oluşturmamıştım. Bunları da sizler gibi zamanla tecrübe ediyorum.

Full stack olarak bir geliştirme sağlamadığım için de şu anki kaynaklar üzerinden bir çözüme gitmeye çalışıyorum. Css - bootstrap yeteneklerim biraz paslı hocam 😃

mgsmus

YalcinSahin Sayfa render edildiğinde tarayıcıdan kaynak koduna bakın, eklediğiniz script etiketi orada doğru yerde gözüküyor mu diye. Eğer gözüküyorsa sebebini kodların tamamını görmeden, debug etmeden bulmam zor. Bir de etkisi olur mu bilmiyorum ama defer ile deneyebilirsiniz, <script src="..." defer> şeklinde.

Son olarak tekrar edeyim, şu an yeni bir projeye başlasam iskeleti şöyle olur:

Backend: Laravel + Sanctum + spatie/laravel-query-builder + itsgoingd/clockwork + sentry.io
Frontend: Vite (Vue 3) + vuejs/vue-router-next + intlify/vue-i18n-next + axios/axios + tailwindlabs/tailwindcss

Boş zamanınızda deneyin derim.

YalcinSahin

mgsmus

Script dosyası ilgili yerde gözüküyor. Ama bu dosya içerisine attığım console.log() gibi bir basit ifade de çalışmıyor. defer çözümünüzü de deneyeyim

YalcinSahin

mgsmus

Hocam selam,

Bu konu hakkında çözüm üretebildiğimi sandım 😃

Diğer yöntemi yapamıyor olmam da sinirimi bozmadı değil.

parent.blade.php:

    <div class="wrapper" id="integration-form">
        <div x-data="{ open: false }" @matchTypeSelected.window="open = true">
            @if(!empty($component))
                <livewire:dynamic-component :component="$component" :wire:key="$wireKey"/>
            @endif
        </div>
    </div>
    @stack("scripts")

child.blade.php:

@push("scripts")
  <script>
      const js = document.createElement("script");

      js.type = "text/javascript";
      js.src = "{{asset('/js/Integrations/integration-1.js')}}";

      document.body.appendChild(js);
  </script>
@endpush

Bu kullanım çalıştırmaya yardımcı oldu sandım.(Hatta foruma çözüm olarak yazayım dedim)
Ama şu şekilde bir hata ile karşılaştım.

Uncaught SyntaxError: Identifier 'IntegrationForm' has already been declared

@push("scripts")
    <script>
        const id = "integration-1";

        if(document.getElementById(id) !== null)
        {
            document.getElementById(id).remove();
        }

        const js = document.createElement("script");

        js.type = "text/javascript";
        js.src = "{{asset("/js/Integrations/integration-1.js")}}";
        js.id = id;

        document.body.append(js);

    </script>
@endpush

Buradan girişmeye çalıştım bu da yemedi 😃

mgsmus

YalcinSahin Livewire'ı neden sevmediğimi ve (sorulursa) onun yerine ne kullanırdınız sorusuna cevap vermeye çalıştım. Durumunuzun farkındayım. Anlatmak istediğim, şu yaşadığınız script probleminin, frontend'e istediğinizde müdahale edememenizin sebebinin ve akabindeki problemlerin BE ve FE'nin iç içe girmesidir. Aynı sorunları biz de yaşıyoruz, bir daha yaşamamak için de çözümünü yazdım.

YalcinSahin

    @push("scripts")
        <script>
            $.getScript('{{asset("/js/Integrations/integration-1.js")}}')
                .done(function( script, textStatus ) {
                    console.log( textStatus );
                })
                .fail(function( jqxhr, settings, exception ) {
                    alert("Sistem hatası oluştu");
                    setTimeout(function () {
                        window.location.href = '{{route("admin")}}';
                    }, 2000);
                });
        </script>
    @endpush

script dosyamda da const olarak tuttuğum form değerini var olarak değiştirdim.

var IntegrationForm= $('#IntegrationForm');

Bu şekilde oldu gibi

YalcinSahin

Yukarıdaki kullanımda şayet 2 child blade sayfanızda da script içeri almaya çalışırsanız sistem çalışmıyor.

parent.blade.php

   <div x-data="{ open: false }" @matchTypeSelected.window="open = true">
            @if(!empty($component))
                <livewire:dynamic-component :component="$component" :wire:key="$wireKey"/>
            @endif
        </div>
   @stack('scripts')

Eğer stack kısmını @matchTypeSelected.window olarak belirttiğiniz kısmın içerisine aldığınızda event ateşine göre yüklemeyi tekrar yapıyor.

 <div x-data="{ open: false }" @matchTypeSelected.window="open = true">
            @if(!empty($component))
                <livewire:dynamic-component :component="$component" :wire:key="$wireKey"/>
            @endif
             @stack('scripts')
        </div>

child.blade.php kullanımını henüz bulamadım. Ama şu şekilde çalıştırıyorum. Src versiyonunda ne eksik bulursam yazacağım.

    @push("scripts")
        <script>
            $.getScript('{{asset("/js/Integrations/integration-1-product.js")}}')
                .done(function (script, textStatus) {
                    console.log(textStatus);
                })
                .fail(function (jqxhr, settings, exception) {
                    alert("Sistem hatası oluştu");
                    setTimeout(function () {
                        window.location.href = '{{route("admin")}}';
                    }, 2000);
                });
        </script>
    @endpush

mgsmus

YalcinSahin Bir istek gelir, Blade derlenir ve önbelleğe alınır, sonra servis edilir. Blade (ve PHP aslında) böyle çalışır ama siz AlpineJs ile DOM manipülasyonu yapıyorsunuz, içinde Blade direktifi var. Blade derlendikten sonra x-data ile değişen kısımda Blade direktifi tekrar derlenmez, mevcut derleme sonrası oluşan HTML üzerinde işlem yapıyorsunuz. Burada işte bahsettiğim Javascript ile PHP arasındaki çarpık ilişki oluşmuş ve Javascript dinamik ama PHP statik olduğu için, yaşam döngüleri farklı olduğu için anlaşamıyorlar. 2 yol var: Ya scripti componentlerin kullanıldığı sayfada head etiketi içine ekleyeceksiniz, component kullansın kullanmasın yüklenecek ya da ilgili scriptleri component şablonuna inline ekleyip deneyeceksiniz. Js frameworklerdeki dinamik chunk mantığını Blade ile yapamazsınız.

YalcinSahin

mgsmus

Hocam , head kısmına koyamıyorum. Çünkü component yüklendiği gibi ilgili script dosyasını illa 1 defa çalışması lazım. İlgili kısımlar yüklendiğinde ajax isteklerimin hem çalışması lazım , hem de select2 ve datatable olarak işlediğim kısımların ataması yapılması gerekiyor.

Inline olarak kullan kısmını anlayamadım.

https://laravel-livewire.com/docs/2.x/events#browser

Burada ilgili component eventı ateşlendiğinde AlpineJS'nin eventı yakalama işlevi ile aslında durum yakalanıyor ona göre component yükleniyor. O sırada da stack olarak scriptleri yakalayabileceğimi düşündüm. Dediğiniz gibi src olarak çekemiyorum. Ya burada script dosyaları içerisine yazmam lazım. Ya da bu yaptığım gibi kullanmam gerekiyor.

AlpineJS allows you to easily listen for these window events within your HTML:

<div x-data="{ open: false }" @name-updated.window="open = false">
    <!-- Modal with a Livewire name update form -->
</div>

İlerleyen zamanlarda düzeltmek adına sadece bir soru sormak istiyorum. Şayet bu şekilde kullanım yapmayıp livewire tarafından çektiğim dynamic componenti event olarak yukarıdaki gibi yakaladığımda farklı bir js kütüphanesi ile js veya css dosyalarını anlık olarak yükleme veya değiştirme şansım varsa yama yapayım olmaz mı 😃

Livewire ile birlikte diğer js kütüphanelerini de aynı anda birbiri ile entegre etmem yanlış mı olur ?

Şu an zamansal açıdan da sıkışık bir proje aşamasında olduğum için hem doğru hem de hızlı bir çözüm bulmaya çalışıyorum. Yanlış düşündüğüm bir nokta varsa düzeltin lütfen 🙂

mgsmus

YalcinSahin Livewire component'i oluşturunca resources/views/livewire/ içine component'in Blade dosyasını ekliyor. Siz ilgili scriptleri o dosyaya koymuyor musunuz? @stack('scripts') direktifini AlpineJs kapsamından çıkartıp uygulamanın head kısmına ekleyin.

Ana şablon:

<html>
    <head>
        ...
        @stack('scripts')
    </head>
    <body>
    ...
    </body>
</html>

ya da

<html>
    <head>
        ...
    </head>
    <body>
        ...
        @stack('scripts')
    </body>
</html>

resources/views/livewire/my-component.blade.php:

<div>
    ...
</div>

@push('scripts')
<script>
    ...
</script>
@endpush

« Önceki Sayfa