Çö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.

eTiKeT™ · 12 Haz 2023

Merhabalar,
js ve css çağrı yaptığınz <link rel..... ve <script src... çağrılanızını <header>BU ALANA </head> etiketleri arasına eklemelisiniz.

nodesboard · 12 Haz 2023

eTiKeT™' Alıntı:
Merhabalar,
js ve css çağrı yaptığınz <link rel..... ve <script src... çağrılanızını <header>BU ALANA </head> etiketleri arasına eklemelisiniz.

düzelmedi hocam ne yazık ki.. Hem page_container hem de helper_js_global de denedim sonuç aynı. sayfayı normal açarken sıkıntı yok. overlay açınca veri gelmiyor.

eTiKeT™ · 12 Haz 2023

<script> </script> kodunuzu da eklediniz mi ?

nodesboard · 15 Haz 2023

Denedim hocam olmuyor ne yazık ki. Zaten bu kodu tek bir sayfada kullanmıyorum. bu kodun aynısının farklı varyasyonları 20-30 tane daha olacak.

Şöyle anlatayım:

Belirlediğim her konunun üstüne bir veri eklemek istiyorum.

Bunun için post_article_macros a şu kodu ekliyorum:

Kod:

<xf:include template="data" />

Ve daha sonra data isminde bir şablon oluşturup, yukarıdaki koddan 15 20 tane ekliyorum ( konu id değişkenini kullanarak).

Kod:

!-------------------------------------data1---------------------------------------->

<xf:if is="in_array($thread.thread_id, [21])">

<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>

</xf:if>

  <!-------------------------------------data1---------------------------------------->

<!-------------------------------------data2---------------------------------------->

<xf:if is="in_array($thread.thread_id, [20])">
<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>

</xf:if>

  <!-------------------------------------data2---------------------------------------->

yukarıda 2 konu için örnek var. bu şekilde hazırladığımda id numarası 20 ve 21 olan konuların üzerinde data görünüyor.
Fakat forumu forum olarak değil blog olarak kullanıyorum. giriş yapma, cevap yazma gibi özellikler kullanıcılar tarafından aktif değil. kullanılmıyor.
sadece ben yazıyorum. ve yazdığım her konu aslında bir makale oluyor.

Ve ben bu makaleleri anasayfada yayınlıyorum. devamını oku butonuna tıkladığımda ise overlay olarak direk makalenin açılmasını istiyorum.

Fakat overlay olarak açıldığında ne yazık ki normalde 20 ve 21 id numaralı konuların üzerinde görünen data görünmüyor.

eTiKeT™ · 15 Haz 2023

Şöyle bir durum var şimdi bir göz attım da, bu kodları head taglarına eklemek açıkcası mantıklı değil. Çünkü her sayfada bu veriyi sürekli siteniz çekecek bootstrap css çekmek ise bence gereksiz bir yük, kaynak kullanımı demek. Ve sadece onunla da kalmıyor js yapılanı da çağırmak gerekli. Benim görüşüm kesinlik bunu yapmamamanız yönünde.
Ancak yinede isterseniz fırsat bulduğumda bir deneyeceğim verdiğiniz kodları.

Ugur · 15 Haz 2023

Sıralamayı şu şekilde yapın:

CSS
SCRİPT
HTML

HTML:

<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">

<!-- 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>

<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>

nodesboard · 19 Haz 2023

Ugur' Alıntı:

Sıralamayı şu şekilde yapın:

CSS
SCRİPT
HTML

HTML:

<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">

<!-- 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>

<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>

Ekli dosyayı görüntüle 23617

Bu şekilde çalıştı, çok sağolun

nodesboard · 1 Tem 2023

Ugur' Alıntı:

Sıralamayı şu şekilde yapın:

CSS
SCRİPT
HTML

HTML:

<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">

<!-- 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>

<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>

Ekli dosyayı görüntüle 23617

Çalıştı ama çoklu da yine hata var. birden fazla yapınca overlay sayfada hepsi karışıyor birbirine giriyor.

Şöyle bir çözüm geldi aklııma bu kodu bbcode olarak nasıl uygulayabilirim? ya da uygulayabilir miyim? en sağlıklı çözüm o olacak.

Böylece bu kodla uğraşmayacağım:

Kod:

<xf:if is="in_array($thread.thread_id, [21])">

kod yapım sabit çünkü...
bbcode olarak yapıp koddaki sadece şu link farklı olacak.

Kod:

 $.getJSON ("https://dummyjson.com/users",  { mode: 'cors'})

Yani ilk mesajda yazdığım kodu bbcode a uygulayabilirsem ve sadece "https://dummyjson.com/users" linki değişecek şekilde ayarlayabilirsem her konuya farklı veri alabilirim bu şekilde diye düşünüyorum. ama bbcode nasıl yapabilirim bu kodu bilmiyorum.

Ugur · 1 Tem 2023

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.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Çözüldü Overlay Fetch Api Sorunu

nodesboard

Kullanıcı