You are viewing limited content. For full access, please sign in.

Question

Question

Unresponsive Forms

asked on October 19, 2020

Hello Everyone,

We are using JavaScript to load the Excel file data onto Forms after the user uploads it. However some Excel files are too large thereby rendering the forms page unresponsive. 

document.addEventListener("DOMContentLoaded", function(event){
     
    const jsLink = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js";
    const jqLink = "http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js";
         
    var selectedFile;
    let data=[{
        "SL.NO":"",
        "DESCRIPTION":"",
     }]; 
             
             
    function loadjsfile(filename, filetype)
    {
        if (filetype=="js")
            {
                    var fileref=document.createElement('script');
                    fileref.setAttribute("type","text/javascript");
                    fileref.setAttribute("src", filename);
            }
        if (typeof fileref!="undefined")
            {
                    document.getElementsByTagName("head")[0].appendChild(fileref);
            } 
    }
    loadjsfile(jsLink, "js");
     
         
    function loadjqfile(filename, filetype)
    {
        if (filetype=="js")
            {
                    var fileref=document.createElement('script');
                    fileref.setAttribute("type","text/javascript");
                    fileref.setAttribute("src", filename);
            }
        if (typeof fileref!="undefined")
            {
                    document.getElementsByTagName("head")[0].insertAdjacentHTML('afterbegin',fileref);
            } 
    }     
    loadjqfile(jqLink, "js");     
         
            
         
          
    document.getElementById('Field1').addEventListener("change", (event)=>{   //File_Upload
    
            selectedFile = event.target.files[0]; //filename
            XLSX.utils.json_to_sheet(data, 'out.xlsx');
            if(selectedFile)
               {
                  let fileReader = new FileReader();
                  fileReader.readAsBinaryString(selectedFile);
                  fileReader.onload = (event)=>{
                  let data = event.target.result;
                  let workbook = XLSX.read(data,{type:"binary"});
                  console.log(workbook);
                  workbook.SheetNames.forEach(sheet => {
                  let rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
                    
    
                    
    var table = document.getElementById('q14');  //Table
    var exceptionDisplay = document.getElementById('Field28');   //Comments 
    var j=1;                             
    var count = 0;

                

                   
                           
                          for(let i=0;i<rowObject.length;i++)
                             {
                                  if(j<rowObject.length)
                                  {
                                    $('#q13').click(); // Add row
                                  }
                               
                                  let sNo = table.querySelectorAll('input')[count+0];
                                  let description = table.querySelectorAll('input')[count+1];                                  
                                  
                                   for (const key in objectValue = rowObject[i])
                                      {
                                          
                                            if(key=="SL.NO")
                                            {
											 sNo.value = objectValue[key];
                                            }
                                           else if(key=="DESCRIPTION")
                                            {
                                             description.value = objectValue[key];
                                            }                                                                                        
                                      }
                                            count = count +  2;
                                            j++;                                          
                                       }                 
                            });
                        }
                    }
                });    
            });
		

Would appreciate insights on this.

 

Regards,

Aishwarya

0 0

Answer

SELECTED ANSWER
replied on October 21, 2020

You could try rewriting the code so that it runs asynchronously and doesn't block the main thread which is what is causing the unresponsiveness. Depending on what browsers you need to support you will need to either use Promises or if your only supporting modern browsers you may be able to the more modern async/await syntax (under the hood its just using promises so it's just syntactical sugar, but easier to read and write imo)

 

Note: For really old browsers (such as IE 11) you will need to load a 3rd party promise library first.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

1 0
replied on October 26, 2020

The async and await method works! Thank you so much for all the help!

0 0

Replies

replied on October 22, 2020

Thank you so much ! Let me try this method and will update. Appreciate the help!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.