I tried loading js code in html but no js functionality is reflected in my code.
here is my html snippet
<!DOCTYPE html>
<html>
<head>
Point Of Sale
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/components.css" rel="stylesheet" type="text/css" />
<link href="css/icons.css" rel="stylesheet" type="text/css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
<link href="plugins/chosen/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="plugins/dataTables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/dataTables/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<link href="css/pages.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module" src="./js/pos.js"></script>
<script src="./jquery.min.js"></script>
<script src="./js/product-filter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/print-js"></script>
</head>`
Here is my js snippet
import path from 'path';
import moment from 'moment';
//import Swal from 'sweetalert2';
import { ipcRenderer } from 'electron';
import Store from 'electron-store';
import { remote } from 'electron';
import btoa from 'btoa';
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
import JsBarcode from 'jsbarcode';
import macaddress from 'macaddress';
import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import './renderer.js';
let cart = [];
let index = 0;
let allUsers = [];
let allProducts = [];
let allCustomers = [];
let allCategories = [];
let allTransactions = [];
let sold = [];
let state = [];
let sold_items = [];
let item;
let auth;
let holdOrder = 0;
let vat = 0;
let perms = null;
let deleteId = 0;
let paymentType = 0;
let receipt = '';
let totalVat = 0;
let subTotal = 0;
let method = '';
let order_index = 0;
let user_index = 0;
let product_index = 0;
let transaction_index;
//let host = 'localhost';
let host = 'xx.xx.xxx.xxx';
let port = 'xxxx';
let dotInterval = setInterval(function () { $(".dot").text('.') }, 3000);
// Define the path to the uploads directory within the current directory
//let api = 'http://' + host + ':' + port + '/rms/api/';
let api = 'https://' + host + '/rms/api/';
let categories = [];
let holdOrderList = [];
let customerOrderList = [];
let ownUserEdit = null;
let totalPrice = 0;
let orderTotal = 0;
let auth_error = 'Incorrect username or password';
let auth_empty = 'Please enter a username and password';
let holdOrderlocation = $("#randerHoldOrders");
let customerOrderLocation = $("#randerCustomerOrders");
let settings;
let platform;
let user = {};
let by_till = 0;
let by_user = 0;
let by_status = 1;
if (typeof remote !== 'undefined') {
// Code that uses remote
const app = remote.app;
//let img_path = app.getPath('userData') + '/POS/uploads/';
const img_path = path.join('undefined','POS', 'uploads/');
const currentDirectory = __dirname;
let storage = new Store();
let start = moment().startOf('month');
let end = moment();
let start_date = moment(start).toDate();
let end_date = moment(end).toDate();
}
$(function () {
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
});
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
The html details are displayed as well as the styling but the pos.js is not showing up. the pos.js contains the functionality. I also tried creating a http-server to see if it works but nothing worked
This code runs well in electron js. what i did, I refactored the code to see if it will work on browser but nothing works in my console in browser, i get this
Uncaught SyntaxError: import declarations may only appear at top level of a module pos.js:1:2
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/harry/React/Store-POS/MyPOS/www/js/pos.js. (Reason: CORS request not http).
Module source URI is not allowed in this document: “file:///home/harry/React/Store-POS/MyPOS/www/js/pos.js”. index.html:22:45
Uncaught ReferenceError: require is not defined
<anonymous> file:///home/harry/React/Store-POS/MyPOS/www/js/login.js:7
login.js:7:33
Source map error: NetworkError when attempting to fetch resource.
Resource URL: file:///home/harry/React/Store-POS/MyPOS/www/plugins/daterangepicker/daterangepicker.min.js
Source Map URL: /sm/3a884fe0bdb97cb3a94b410e67cf38fdc248890d5581232077b3e6241e25cd21.map
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: file:///home/harry/React/Store-POS/MyPOS/www/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
Source map error: NetworkError when attempting to fetch resource.
Resource URL: file:///home/harry/React/Store-POS/MyPOS/www/plugins/dataTables/pdfmake.min.js
Source Map URL: pdfmake.min.js.map
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>) before all other js files. then your other JS code will start working.importneeds a filename with the extension.import $ from 'jquery'so they're not getting it from the jquery script tag.