كيف أعرض بيانات من صفحة أل صفحة أخرى في electron.js?

Mohamed Lamin Mahmoudi · 10 أغسطس 2022

البيانات التي أريد أن أعرضها هي على شكل مصفوفة أمراض , وعند الضغط على إسم المصفوفة في صفحة التخصصات تفتح الصفحة الخاصة بعرض الامراض الخاصة بهذا التخصص

ملف index.js

let maladie=document.querySelectorAll('ul li');
 maladie.forEach(function(el){
  el.addEventListener('click',function(e){
   let des= PathData.filter(function(ele){
      if(ele.name===el.innerText){
        return ele;
      }
    });
  let dataMaladie=des[0].Diseases;
  
  ipcRenderer.send('openmaladie-page',dataMaladie);
   e.preventDefault();
     });
 });

dataMaldie هو مصفوفة فيها جميع الامراض الخاصة بالتخصص المضغوط عليه وهي تعرض بشكل صحيح

ملف Main.js

// إستقبال الامراض الخاصة بكل تخصص 
ipcMain.on('openmaladie-page',function(e,data){
// إرسالها إلى الامراض
console.log(data);
   win.webContents.send("dataMaladie",data);
   
   //فتح صفحة الامراض 
   creatWindow('maladie.html');
});

ملف maladie.js الخاص بالامراض

const {ipcRenderer} =require('electron');

ipcRenderer.on('dataMaladie',function(e,data){
    
    console.log(data);
    let con=document.querySelector('#Diseases');
    for(let i=0; i<data.length;i++){
        let li=` <li class="col-3 patho ">
        <a href="#">
                <span class="ml-4 ">${data[i]}<span>
        </a>    
     </li>`;
     con.append(li);
    }
   
});

هنا بعد ما أستقبل الامراض الموجودة في المصفوفة واحقنها في الصفحة ثم أعرض الصفحة لايحدث أي تغيير في صفحة html الخاصة بالامراض إضافة إلى عدم طباعة أي شئ في الكونسول !!

maladie.html صفحة الامراض المراد عرضها

 <div class="container-fluid ">
               <button class="btn btn-primary retour">
                <a href="./path.html" >RETOUR</a>
               </button> 
                 <ul id="Diseases" class="row  d-flex ">
                  <li class="col-3 patho ">
                    <a href="#">
                            <span class="ml-4 ">Disease name<span>
                    </a>    
                 </li>
                 </ul>
                </div>
              </div>
        <!-- نهاية العمليات الرئيسية -->
    </div>
   <script src="maladie.js"></script>

Wael Aljamal · 10 أغسطس 2022

يتم تمرير كائن الخطأ هنا حاول طباعته لربما تستفيد

ipcRenderer.on('dataMaladie',function(e,data){
    
    console.log(e);

   
});

Mohamed Lamin Mahmoudi · 10 أغسطس 2022

بتاريخ On 10‏/8‏/2022 at 21:02 قال Wael Aljamal:
يتم تمرير كائن الخطأ هنا حاول طباعته لربما تستفيد
ipcRenderer.on('dataMaladie',function(e,data){
    
    console.log(e);

   
});
أظهر المزيد

لايتم طباعة أي شئ داخل هذه الدالة ولا تنفذ أي تعليمة لا أعرف ما السبب ؟

Wael Aljamal · 10 أغسطس 2022

بتاريخ On 10‏/8‏/2022 at 21:07 قال Mohamed Lamin Mahmoudi:

لايتم طباعة أي شئ داخل هذه الدالة ولا تنفذ أي تعليمة لا أعرف ما السبب ؟

أظهر المزيد

بتاريخ On 10‏/8‏/2022 at 20:42 قال Mohamed Lamin Mahmoudi:

win.webContents.send("dataMaladie",data);

أظهر المزيد

إذاً هذا الحدث لا يتم إرساله بطريقة سليمة،

حاول البحث عن

mainWindow.webContents.send() not received by ipcRenderer.on() function

Mohamed Lamin Mahmoudi · 12 أغسطس 2022

بتاريخ On 10‏/8‏/2022 at 21:11 قال Wael Aljamal:

إذاً هذا الحدث لا يتم إرساله بطريقة سليمة،

حاول البحث عن

mainWindow.webContents.send() not received by ipcRenderer.on() function

أظهر المزيد

وجدت الحل وهو في استعمال الدالة setTimeouet بهذا الشكل

ipcMain.on('openmaladie-page', function(e,data,NamePath){
       
         setTimeout(()=>{
         win.webContents.send('data-Maladie', data,NamePath);
          },500);
       
       creatWindow('maladie.html');
       
        });

لكن المشكل أنني لم أفهم لماذا أستعمل الدالة setTime هنا علما أنني الدالة win.webContents.send في نفس الملف سابقا وتم إرسال البيانات بشكل صحيح

ثانيا المشكل في setTimouet أن البيانات أصبحت تعرض لي على حسب الجهاز إذا كان الجهاز ضعيف يكون بطئ في عرض البيانات

جربت إستعمال promise بهذا الشكل لم يتم عرض البيانات !

ipcMain.on('openmaladie-page', async function(e,data,NamePath){
       
        
       await  win.webContents.send('data-Maladie', data,NamePath);
       
       
       creatWindow('maladie.html');
       
        });

Wael Aljamal · 12 أغسطس 2022

بتاريخ On 12‏/8‏/2022 at 18:16 قال Mohamed Lamin Mahmoudi:
وجدت الحل وهو في استعمال الدالة setTimeouet بهذا الشكل
 
أظهر المزيد

هذا يعني أنك تحتاج لتأخير لكي تعمل الفكرة،

أي أن الصفحة لم تكن جاهزة لاستقبال البيانات. حاول انتظار الحدث did-finish-load ثم مرر البيانات لها

mainWindow.webContents.on('did-finish-load', ()=>{
  mainWindow.webContents.send('display', __dirname+'\\'+file)
})

Mohamed Lamin Mahmoudi · 12 أغسطس 2022

بتاريخ On 12‏/8‏/2022 at 18:19 قال Wael Aljamal:
هذا يعني أنك تحتاج لتأخير لكي تعمل الفكرة،

أي أن الصفحة لم تكن جاهزة لاستقبال البيانات. حاول انتظار الحدث did-finish-load ثم مرر البيانات لها
mainWindow.webContents.on('did-finish-load', ()=>{
  mainWindow.webContents.send('display', __dirname+'\\'+file)
})
أظهر المزيد

لا تعمل بهذا الشكل !! جربتها سابقا

Wael Aljamal · 12 أغسطس 2022

بتاريخ On 12‏/8‏/2022 at 18:26 قال Mohamed Lamin Mahmoudi:

لا تعمل بهذا الشكل !! جربتها سابقا

أظهر المزيد

السطرين 60-61 هل ترسل البيانات لصفحة لم يتم إنشائها بعد ؟ اليس create window يجب أن تتم قبل

كيف أعرض بيانات من صفحة أل صفحة أخرى في electron.js?

السؤال

Mohamed Lamin Mahmoudi

7 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

Mohamed Lamin Mahmoudi

Wael Aljamal

Mohamed Lamin Mahmoudi

Wael Aljamal

Mohamed Lamin Mahmoudi

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية