Question 370134 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Error when Loading js file in HTML. HTML unable to load my js file

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
Tags:

2

Answers


  1. 0

    Can’t see the opening tag for </head>. Please include that and try again.

    <html>
    <head>
    <!-- Your scripts here--->
    </head>
</html>
    Login or Signup to reply.
  2. 0 
    <html>
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" async defer></script>
</head>
    <body>
 Your HTML content here 
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search