CODEWITHSUNDEEP
javascriptnode.jsbrowserify
FireWallSP
FireWallSP

Reputation: 19

Js functions do not work with node and browserify

I'm a beginner in Node and browserify, and I'm having a problem, if I use browserify it doesn't work the functions that come from the html by imputs or buttons from the error pickCSV is not defined

being that it is an onchange in html but it doesn't work when called, if i don't use browserify it works normal, but i need browserify because i will use node comm mysql for the bank's select's, I accept recommendations for this application and a tip to run the node on the client side

html

 <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- 
    scalable=no" />
   <title>SIM TELEGESTÃO</title>
   <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
   <script src="node_modules/leaflet/dist/leaflet-src.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
   <div id="map"></div>
   <input type="file" id="inputCSV" onchange="pegarCSV(this)">
   <script src="bundle.js"></script>
   </body>
   </html>

JS

   // require modules
      var L = require('leaflet');
      var $ = require('jquery');
      var mysql = require('mysql');

      var tcsv = [];
      var nMuc;
      var arMuc= [];
      var bounds = [];
      var arMu = [];
      var leitorDeCSV = new FileReader();
      var tcsv1 = [];
      var achMuc;
      var lcz2;
      var selMuc = [];
      // Create the map
      var map = L.map('map').setView([-90.59431,-70.82561], 18);

      // Indicate leaflet the specific location of the images folder that it needs to render the page
      L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';

      // Use OpenStreetMap tiles and attribution
      var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var attribution = '© OpenStreetMap contributors';

      // Create the basemap and add it to the map
      L.tileLayer(osmTiles, {
      maxZoom: 18,
      attribution: attribution
      }).addTo(map);


     function pegarCSV (inputFile){
      var file = inputFile.files[0];
      leitorDeCSV.readAsText(file);
      leitorDeCSV.onload = leCSV;
     }

Upvotes: 1

Views: 203

Answers (1)

t.niese
t.niese

Reputation: 40842

To get require work browserify is wrapping your whole code into a function and as of that all functions that you defined in your file won't be available in the global scope. This - and other things - are the reason why you should not use inline event handlers (attributes), to register events, those will only work with functions that are visible in the global scope.

What you want to do is to change <input type="file" id="inputCSV" onchange="pegarCSV(this)"> to <input type="file" id="inputCSV">

and add the following to the end of the file:

document.getElementById('inputCSV').addEventListener('change', 
  function(event) {
    pegarCSV(event.currentTarget);
  }, false)

Upvotes: 2

Related Questions