Javascript has ceased functioning on the current server, however it is operational on a different

Need a hand with this tricky issue.

The company I'm with has its own website. I've been updating pages on the site for the past few days.

After finishing my updates and trying to upload the site, all of a sudden, the JavaScript stopped working.

Whenever I press f12, I see these error messages:

Uncaught SyntaxError: Invalid or unexpected token

base.js:1 Uncaught ReferenceError: $ is not defined at base.js:1

Everything works fine on my test server.

But on the the main server, it's all haywire.

Any idea what could be causing this? It's not just one page - it's all of them where the JavaScript fails.

[update]

I'm aware there are different versions of JavaScript. The testing environment on our website already addressed this. Yet, the problem persists.

Appreciate any insights,

Wesley

javascript

Answer №1

It has come to our attention that on the test site, jQuery 3.3.1 is being used:

<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

However, on the main site, jQuery 1.10.1 is currently in use:

<script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>

We recommend using version 3 across both sites unless there are specific requirements for a different version.

Answer №2

It seems like your JavaScript code is utilizing jQuery.

On the initial page, there is a script tag to load jQuery in the header:

<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

However, on the subsequent page, jQuery is not being loaded.

Without knowledge of your server's file structure, I cannot provide the exact path. Make sure to load jQuery similarly on your corporate site.

UPDATE:

I've observed that you are loading jQuery from 

https://www.aska-ltd.jp/js/jquery-1.10.1.min.js
. This file differs from the original one (compared with 
https://code.jquery.com/jquery-1.10.1.min.js
using MD5). If you prefer to use this older version (not recommended), you can attempt to re-download it or opt for the latest version from the official server (recommended).

Answer №3

As mentioned by @NoobTW and @SapuSeven, there seems to be a jQuery script error on the live site.

To resolve this issue on the live site, you can try replacing the current script tag: 

<script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
with the following updated version: 
<script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

Alternatively, consider loading jQuery from a CDN for a more streamlined approach. Here is one option using jQuery 3: 

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

For additional options, you can explore the resource available at:

Answer №4

The main server is having trouble loading JQuery properly. I attempted to inspect the code from the file stored on the server, only to find that the JQuery file being returned appears to be corrupted in some way.

https://i.sstatic.net/HHgOz.png

If this issue persists with a newer version of JQuery, it's worth investigating if the updated file is also affected by corruption. It’s possible that there is an error occurring during the server’s handling of these files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the selected option to be hidden in React?

I created a basic form demo using react material, featuring only one select field. I followed this link to set up the select options: https://material-ui.com/demos/selects/ With the help of the API, I managed to display the label at the top (by using shri ...

javascriptreactjsvalidationmaterial-designmaterial-ui

Tips on preserving type safety after compiling TypeScript to JavaScript

TS code : function myFunction(value:number) { console.log(value); } JS code, post-compilation: function myFunction(value) { console.log(value); } Are there methods to uphold type safety even after the conversion from TypeScript to JavaScript? ...

javascripttypescripttype-safety

Relocate the resizable handles in jQuery outside of the div elements

I currently have 3 nested divs. Using jQuery $(function() { $("#div1").resizable({ handles: "n, e, s, w, nw, ne, sw,se" }); $("#div1").draggable(); }); Within the HTML structure <div id="div1" style="left: ...

javascriptjqueryjquery-uiresizablehandles

What is the process for refreshing the component content in Angular 2?

There was a moment during execution when my URL had the following appearance: http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96 I desire to visit a page with a different GUID and different content. http://localhost:4200/personal/{other ...

javascriptangularcomponentsangular2-routing

Sending data from PHP to JavaScript using AJAX

I'm encountering an issue trying to pass data from a PHP file to a JavaScript file using echo. My PHP file contains the following code snippet: <?php ...establishing connection and retrieving list from database... for($i=0;$i<sizeOf($li ...

javascriptphpjqueryajax

I'm curious about the outcomes of the JavaScript test. Could someone provide an explanation

Recently, I was in the process of writing a blog post discussing the importance of checking for the existence of jQuery elements before attaching event handlers. To illustrate this, I quickly created a jsfiddle example here. What puzzles me is that the re ...

javascriptjquerytestingoptimization

React Three Fiber - THREE.BufferGeometry.computeBoundingSphere(): The calculated radius is invalid. It is possible that the "position" attribute contains NaN values causing this issue

Currently, I am working on a website using Reactjs and React Three Fiber for 3D components. Out of the total 3 3D components, 2 are functioning properly. However, one of them suddenly stopped working more than 6 hours ago, and I have been unable to find a ...

javascriptreactjsthree.jswebglreact-three-fiber

Testing URL Parameters in JEST with an API

Seeking integration tests using Jest for an API endpoint. Here's the specific endpoint: http://localhost/universities/ucla/class/2013/studentalis/johndoe. When tested with a put request, it returns 201 on Postman. However, the testing encountered a t ...

javascriptexpressjestjssupertest

Storing query for later utilization using form and javascript

I have implemented a function to create charts using the following code snippet: $('#button_submit').click(function() { var start_date = $('#start_date').val(); var end_date = $('#end_date').val(); var type = $( ...

javascriptjqueryajax

Steps for incorporating events on Jquery UI button

I have a question about utilizing Jquery UI for the first time. After successfully adding a button using Jquery UI, I am now interested in adding events for when a radio switch is turned on and off. When the radiobox is switched on, I want an alert window ...

javascriptjqueryjquery-ui

Activating a function on a click or item selection in React using Office UI Fabric's

<div> <CommandBar areNamesVisible={false} areIconsVisible={true} items={[ { name:"James Towns", className:"noHoverEffect", }, { key:"Info", icon:"Contact", onItemClick={this.handlePanel} ...

javascriptreactjsonclickjsxonitemclick

Having trouble grasping the functionality of Javascript in this code (using Coffeescript and Commander in Node.js)

I'm facing some issues when using Commander in Node.js - the parseInt function doesn't seem to be working correctly in my code: commander = require 'commander' #parseInt = (str) => parseInt str #I attempted to add this line witho ...

javascriptnode.jscoffeescriptnode-commander

Mongoose and ES6 promises are not delivering the expected results

I'm currently working on a piece of code that involves creating an array of promises to save specific numbers. The issue I'm facing is that when the output is printed, it displays the same record 10 times. Below is the code snippet: 'use s ...

javascriptnode.jsmongoosepromiseco

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

I am having trouble saving the text from a textarea to the Controller session using jQuery AJAX post method in Codeigniter Smarty. I am unable to save the data to the session. Can someone please provide me with guidance and a detailed example of how to ach ...

javascriptphpjqueryajaxcodeigniter

What exactly does form.getHeaders(); mean?

Attempting to streamline the upload process, I have come up with the following code: var http = require('http'); var request = http.request({ method: 'post', host: 'https://www.ws-ti.4bank.com', path: '/img/create ...

javascriptnode.jsjsonpostrequest

Loop through the elements of one array using the indexes from a second array

Hey there! I need help with the following code snippet: let names = ["josh", "tony", "daniel"]; let arrayplaces = ["30", "60", "90"]; names.forEach((elem, indexed) => { const num2 = arrayp ...

javascriptarraysloops

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

javascriptcssdatagridtemplatecolumn

Purge precise LocalStorage data in HTML/JavaScript

How can a specific item in the localStorage be cleared using javascript within an html file? localStorage.setItem("one"); localStorage.setItem("two"); //What is the method to clear only "one" ...

javascripthtml

Clicking on a Vuetify v-btn with the :href attribute set to download will open the XML file

I'm having trouble getting the v-btn to download an XML file instead of opening it in the browser. <v-btn :disabled="!exportUrl" block x-large height="100" color="primary" :href="exportUrl" download> ...

javascripthtmlvue.jsvuetify.js

Node.js server experiences a crash after attempting to send a large string using res.send()

I've recently started learning JavaScript and NodeJs. I'm facing an issue with my Nodejs application crashing when a get request is made, specifically when trying to return a large string. app.mjs app.get('/log', function (req, res) { ...

javascriptnode.jsexpressasynchronousxmlhttprequest