Csv viewer is not working in flask ? I have combined 2 different code

  ajax, csv, flask, javascript, python

my Csv viewer doesnot work in Flask….
CSV Viewer code

I have combined 2 different code .

    <!DOCTYPE html>
       <html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../../../maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="../../../ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="papaparse.min.js"></script>
  <style>
    .pdfobject-container { height: 100px;}
    .pdfobject { border: 1px solid #666; } ** Style **
  </style>
</head>
<body>

Side Navigation Bar

  <div class="wrapper">
    <div class="sidebar">
        <h2>Auto ML</h2>
        <ul>
            <li><a href='mainpage.html'>Machine Learning</a></li>
            <li><a href="#">Auto ML WorkSpace</a></li>
        </ul>
    </div>
      <div class="main_content">
          <div class="header"><p><b>AUTOMATED MACHINE LEARNING </b></p></div>
           <div class="info">
               <div> Automated machine learning (AutoML) is the process of automating the tasks of 
        applying machine learning to real-world problems. AutoML covers the complete pipeline from the raw dataset to the deployable machine learning model. AutoML was proposed as an artificial intelligence-based solution to the ever-growing challenge of applying machine learning.The high degree of automation in AutoML allows non-experts to make use of machine learning models and techniques without requiring them to become experts in machine learning. Automating the process of applying machine learning end-to-end additionally offers the advantages of producing simpler solutions, faster creation of those solutions, and models that often outperform hand-designed models. AutoML has been used to compare the relative importance of each factor in a prediction model.</div>
           </div>
      </div>
    </div>

CSV Viewer code beings

     <div class="container" style="padding:10px 10px;">
    <div id="header"></div>
    <div class="well">
        <div class="row">
        <form class="form-inline">
            <div class="form-group">
              <input type="file" id="files" name="file1"  class="form-control" accept=".csv" required />
            </div>
            <div class="form-group">
             <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
             </div>
        </form>
        </div>
        <div class="row"
            
            <div class="row" id="parsed_csv_list">
            </div>
        </div>
    </div>
    
A button which will render to next page
  <div class="form">
    <form action="/uploader" method="POST" enctype="multipart/form-data">
        <div class="Upload">
          <br> <button  type="submit" id="submit-file" >Next Page</button>
       </div>
     </form>
   </div>
  </div>
</body>
</html>

** Being of Javascript : this code is written for Csv viewer

<script type="text/javascript">
  $(document).ready(function(){
    $('#header').load('http://js-tutorials.com/demos/header-ads.html');
    $('#footer').load('http://js-tutorials.com/demos/footer-ads.html');
    
    $('#submit-file').on("click",function(e){
        e.preventDefault();
        $('#files').parse({
            config: {
                delimiter: "auto",
                complete: displayHTMLTable,
            },
            before: function(file, inputElem)
            {
                //console.log("Parsing file...", file);
            },
            error: function(err, file)
            {
                //console.log("ERROR:", err, file);
            },
            complete: function()
            {
                //console.log("Done with all files");
            }
        });
    });
    
    function displayHTMLTable(results){
        var table = "<table class='table'>";
        var data = results.data;
         
        for(i=0;i<data.length;i++){
            table+= "<tr>";
            var row = data[i];
            var cells = row.join(",").split(",");
             
            for(j=0;j<cells.length;j++){
                table+= "<td>";
                table+= cells[j];
                table+= "</th>";
            }
            table+= "</tr>";
        }

        table+= "</table>";
        $("#parsed_csv_list").html(table);
    }
  });
</script>

** Output in Browser **
enter image description here

** But When i run this code in flask **
enter image description here

Source: Python Questions

LEAVE A COMMENT