تحميل العناصر الى javascript مع livewire

هل عند البحث عن العنصر في inspect هل يظهر معك أم لا ؟

بتاريخ 10 دقائق مضت قال Abdullah Baaqail:

team Modal

هل الكود الذي أرفقته للملف السابق هو الكود كاملا أم لا ؟

إذا كان هو الكود كاملا فالمشكلة لديك هنا 

بتاريخ 11 دقائق مضت قال Abdullah Baaqail:

<label class="form-label" for="wrapper_searchable">اسم اللجنة</label>
<div wire:ignore class="wrapper_searchable">
    <div class="form-control form_control_s">
        <span>اسم اللجنة</span>
        <i class="uil uil-angle-down"></i>
    </div>
    <div class="content-searchable">
        <div class="search-searchable">
            <i class="uil uil-search"></i>
            <input spellcheck="false" type="text" placeholder="بحث">
        </div>
        <ul class="options_searchable"></ul>
    </div>
</div>

حيث يجب أن يكون مكون livewire عبارة عن عنصر root واحد ولكنك هنا لديك عنصرين لذلك قم بوضع الكود بداخل عنصر واحد هكذا مثلا :

<div>
  <label class="form-label" for="wrapper_searchable">اسم اللجنة</label>
  <div wire:ignore class="wrapper_searchable">
      <div class="form-control form_control_s">
          <span>اسم اللجنة</span>
          <i class="uil uil-angle-down"></i>
      </div>
      <div class="content-searchable">
          <div class="search-searchable">
              <i class="uil uil-search"></i>
              <input spellcheck="false" type="text" placeholder="بحث">
          </div>
          <ul class="options_searchable"></ul>
      </div>
  </div>
</div>

بتاريخ 1 دقيقة مضت قال محمد عاطف17:

هل عند البحث عن العنصر في inspect هل يظهر معك أم لا ؟

هل الكود الذي أرفقته للملف السابق هو الكود كاملا أم لا ؟

إذا كان هو الكود كاملا فالمشكلة لديك هنا 

حيث يجب أن يكون مكون livewire عبارة عن عنصر root واحد ولكنك هنا لديك عنصرين لذلك قم بوضع الكود بداخل عنصر واحد هكذا مثلا :

<div>
  <label class="form-label" for="wrapper_searchable">اسم اللجنة</label>
  <div wire:ignore class="wrapper_searchable">
      <div class="form-control form_control_s">
          <span>اسم اللجنة</span>
          <i class="uil uil-angle-down"></i>
      </div>
      <div class="content-searchable">
          <div class="search-searchable">
              <i class="uil uil-search"></i>
              <input spellcheck="false" type="text" placeholder="بحث">
          </div>
          <ul class="options_searchable"></ul>
      </div>
  </div>
</div>

 

لا ليس كامل يوجد قبلة كود

بتاريخ 5 دقائق مضت قال Abdullah Baaqail:

لا ليس كامل يوجد قبلة كود

هل العنصر يتم تحميله في الصفحة ويظهر لك أم لا ؟

هل عند تنفيذ الكود التالي يظهر لك null أم يتم طباعة العنصر ؟

console.log(document.querySelector(".wrapper_searchable"))

حاول استخدام Livewire.hook لكي تتمكن جافاسكريبت من الوصول للـ DOM بعد الإنتهاء من تحميله، بحيث يصبح السكريبت كالتالي:

<script>
    Livewire.hook('message.processed', (message, component) => {
        if (component.fingerprint.name === 'TeamComponent') {
            const wrapper_searchable = document.querySelector(".wrapper_searchable");
            if (!wrapper_searchable) {
                console.error("Element .wrapper_searchable not found");
                return;
            }
            const selectBtn = wrapper_searchable.querySelector(".form-control"),
                  searchInp = wrapper_searchable.querySelector("input"),
                  options_searchable = wrapper_searchable.querySelector(".options_searchable");

            if (!selectBtn || !searchInp || !options_searchable) {
                console.error("One or more elements are not found");
                return;
            }


            let countries = ["Yemen", "Bangladesh", "Belgium", "Bhutan", "Brazil", "Canada", /*...*/ ];

            function addCountry(selectedCountry) {
                options_searchable.innerHTML = "";
                countries.forEach(country => {
                    let isSelected = country == selectedCountry ? "selected" : "";
                    let li = `<li onclick="updateName(this)" class="${isSelected}">${country}</li>`;
                    options_searchable.insertAdjacentHTML("beforeend", li);
                });
            }
            addCountry();

            function updateName(selectedLi) {
                searchInp.value = "";
                addCountry(selectedLi.innerText);
                wrapper_searchable.classList.remove("active");
                selectBtn.firstElementChild.innerText = selectedLi.innerText;
            }

            searchInp.addEventListener("keyup", () => {
                let arr = [];
                let searchWord = searchInp.value.toLowerCase();
                arr = countries.filter(data => data.toLowerCase().startsWith(searchWord))
                               .map(data => {
                                   let isSelected = data == selectBtn.firstElementChild.innerText ? "selected" : "";
                                   return `<li onclick="updateName(this)" class="${isSelected}">${data}</li>`;
                               }).join("");
                options_searchable.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Oops! Country not found</p>`;
            });

            selectBtn.addEventListener("click", () => wrapper_searchable.classList.toggle("active"));
        }
    });
</script>

بتاريخ 11 دقائق مضت قال محمد عاطف17:

هل العنصر يتم تحميله في الصفحة ويظهر لك أم لا ؟

هل عند تنفيذ الكود التالي يظهر لك null أم يتم طباعة العنصر ؟

console.log(document.querySelector(".wrapper_searchable"))

 

لا يتم تحميل كل هذا وكأن كود الjs لم ينفذ

console.log("ok");
console.log(document.querySelector(".wrapper_searchable"));

ولكن عند عندما يكون المودل مفتوح على طول عند تحميل الصفحة يتم تحميله والامور تمام
أي عند إلغاء الشرط isOpen$

{{-- @if ($isOpen) --}}
    @include('dashboard.admin.teams.modals.teams')
{{-- @endif --}}