Çözüldü Overlay Fetch Api Sorunu

nodesboard · 11 Haz 2023

Selamlar bir custom page oluşturuyorum aşağıdaki kodları kullanarak:

Kod:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">




<section style="text-align: -webkit-center;">


 <!-- table area -->
 <table id="data" class="table table-striped" style="width:50%">
     <thead>
         <tr>
             <th class="text-xs font-medium leading-4 tracking-wider text-left uppercase">NAME</th>
             <th class="text-xs font-medium leading-4 tracking-wider text-left uppercase">LASTNAME</th>
               <th class="text-xs font-medium leading-4 tracking-wider text-left uppercase">GENDER</th>
         </tr>
     </thead>
     <tbody class="bg-white divide-y divide-gray-200 data">

     </tbody>

 </table>
</section>


<!-- js library -->

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>


<script>



 $.getJSON ("https://dummyjson.com/users",  { mode: 'cors'})
     .then(data=>{
         console.log('data',data);

         displayProducts(data.users);
     })

 async function displayProducts(products) {
     let html = '';
     await products.forEach((product, index, array) => {
         html += '<tr>';
         html += `
                
                 <td>${product.firstName}</td>
                 <td>${product.lastName}</td>
                 <td>${product.gender}</td>
                
              `;
         html += '</tr>';
     })
     document.querySelector('.data').innerHTML = await html;
     //
     $(document).ready(function () {
         $('#data').DataTable();
     });
 }
</script>

Bu kodu kullanarak bir sayfa oluşturuyorum ve sayfayı açtığım zaman sorunsuz fetch ediyor. herhangi bir problem yok.

Ama bu sayfayı bir butona overlay eklediğimde ve sayfayı overlay açtığımda dataları çekmiyor. yardımcı olursanız çok sevinirim.

nodesboard · 2 Tem 2023

Ugur' Alıntı:
BBcode olarak kullanacaksanız <xf:if is="in_array($thread.thread_id, [21])"> koduna gerek kalmaz.

BBcode içinde farklı link kullanmak için sadece şu kısmı değiştirmeniz yeterli olur;

Kod:

$.getJSON ("{text}", { mode: 'cors'})

data başlıklı bir bbcode oluşturup konu içinde şu şekil kullanabilirsiniz:

[data]https://dummyjson.com/users[/data]

[data]https://başka bir link[/data]

BBcode oluşturup denemedim ama bu mantıkla çalışması gerekir.

BBcode yaptım ama şöyle bir sorun var:

2 tane konu açıyorum ve 2 konuya da bbcode ile ekliyorum. A konusu ve B konusu diyelim.

site.com/Akonusu şeklinde girince sorunsuz fetch ediyor
site.com/Bkonusu şeklinde girince de sorunsuz fetch ediyor.

anasayfaya A konusunu ve B konusunu overlay link veriyorum.

A konusuna tıklayınca sorunsuz fetch ediyor. overlayı kapatıp bu sefer B konusunu açtığımda B konusunu fetch etmiyor.
ya da tam tersi ilk B konusuna tıklarasm B konusunu overlayda fetch ediyor kapatıp A konusunu açınca fetch etmiyor.

ve fetch etmeyeni ilk konuda fetch ediyor bu sefer.

Overlay A konusunu açtım diyelim fetch etti sorunsuz overlayı kapatıp B konusunu açtım B konusunu fetch etmedi. Overlay B konusunu kapatıp tekrar overlay A konusunu açtığımda B konusunun datasını A konusunda gösteriyor. Umarım anlatabilmişimdir. pek çözülecek bir sorun gibi durmuyor :/

Ugur · 2 Tem 2023

id ler çakıştığı için oluyor tahminim.

Bu sorun bbcode içinde option kullanarak aşılabilir diye düşünüyorum. Örneğin html koddaki bu kodu

<table id="data" class="table table-striped" style="width:50%">

şu şekilde değiştirin.

<table id="{option}" class="table table-striped" style="width:50%">

Aynı şekilde js içindeki bu kodu da

JavaScript:

     $(document).ready(function () {
         $('#data').DataTable();
     });

şu şekilde değiştirin.

JavaScript:

     $(document).ready(function () {
         $('#{option}').DataTable();
     });

Eklediğiniz bbcode da düzenleyin. Seçenek parametresini destekler EVET yapın.

Örnek kullanım
[data=data1]link1[/data]

[data=data2]link2[/data]

Ben kodu denemedim. Yukarda anlattığım şekilde deneme yanılma yoluyla çalıştırabilirsiniz.

nodesboard · 3 Tem 2023

Ugur' Alıntı:
id ler çakıştığı için oluyor tahminim.

Bu sorun bbcode içinde option kullanarak aşılabilir diye düşünüyorum. Örneğin html koddaki bu kodu

<table id="data" class="table table-striped" style="width:50%">

şu şekilde değiştirin.

<table id="{option}" class="table table-striped" style="width:50%">

Aynı şekilde js içindeki bu kodu da

JavaScript:

$(document).ready(function () { $('#data').DataTable(); });

şu şekilde değiştirin.

JavaScript:

$(document).ready(function () { $('#{option}').DataTable(); });

Eklediğiniz bbcode da düzenleyin. Seçenek parametresini destekler EVET yapın.

Örnek kullanım
[data=data1]link1[/data]

[data=data2]link2[/data]

Ben kodu denemedim. Yukarda anlattığım şekilde deneme yanılma yoluyla çalıştırabilirsiniz.

çok sağolun sorunsuz çalıştı.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Çözüldü Overlay Fetch Api Sorunu

nodesboard

Kullanıcı