CODEWITHSUNDEEP
javascriptjqueryhtml
varimax
varimax

Reputation: 121

jquery not loading when it is included before other javascript files

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>Electron Boilerplate</title>

    <link href="stylesheets/main.css" rel="stylesheet" type="text/css">
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../vendor/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>
<body>
  <div id="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">SB Admin v2.0</a>
      </div>
    ...



    </nav>
  </div>
    <script src="../vendor/jquery/jquery.min.js"></script>
    <script src="helpers/context_menu.js"></script>
    <script src="helpers/external_links.js"></script>

    <script src="app.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>
    <script src="../vendor/sb-admin-2.js"></script>
</body>
</html>

Currently console gives me the following three errors:

Uncaught Error: Bootstrap's JavaScript requires jQuery (bootstrap.min.js:16)

Uncaught ReferenceError: jQuery is not defined (metisMenu.min.js:9)

Uncaught ReferenceError: $ is not defined (sb-admin-2.js:6)

I've searched the net and I couldn't find a solution that fits my problem. I tried moving jquery.min.js to the header and changing the source of jquery to https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js. Both options do not work. I think it is probably because jquery is getting loaded after other javascript files are loaded. How can I fix this?

UPDATE: This is my folder structure:

enter image description here

vendor has: enter image description here

app.html is here:

enter image description here

I tried typing jQuery.fn.jquery and jQuery().jquery in the console. Both gave me Uncaught ReferenceError: jQuery is not defined(…). So it seems like jQuery is not loaded at all.

Upvotes: 1

Views: 2013

Answers (1)

Nikolay Osaulenko
Nikolay Osaulenko

Reputation: 1482

Seems like jQuery was loaded into an isolated scope in electron. You can insert this script before all script imports

<script>
if (typeof module === 'object') {
    window.module = module; 
    module = undefined;
}
</script>

This should work for browser and electron

Upvotes: 3

Related Questions