Script is loaded before the jquery

Question

I am trying to use grapesjs in my application. So, I added the jquery in the head of the html page and the script in the body. My jquery is loaded in that page but before jquery is loaded the script in the body is executed. So that the script is not working

JavaScript - How do I make sure a jQuery is loaded? using the above link i tried to give the query in the header tag and the script in the body, but it is not working.

<meta charset="utf-8">
<title>GrapesJS</title>
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
  <script src="https://unpkg.com/grapesjs"></script>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
   }
  </style>
  <div id="gjs" style="height:0px; overflow:hidden;">
    <div class="panel">
      <h1 class="welcome">Welcome to</h1>
        <div class="big-title">
          <svg class="logo" viewBox="0 0 100 100">
            <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
         </svg>
         <span>GrapesJS</span>
       </div>
       <div class="description">
        This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
        copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
    </div>
  </div>
 </div>

<script type="text/javascript">
  $(window).on('load', function(){
      var editor = grapesjs.init({
          showOffsets: 1,
          noticeOnUnload: 0,
          container: '#gjs',
          height: '100%',
          fromElement: true,
          storageManager: { autoload: 0 },
      });
  });

editor.BlockManager.add('testBlock', {
    label: 'Block',
    attributes: { class:'gjs-fonts gjs-f-b1' },
    content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})

The script in the body must be loaded after is query is downloaded or unpacked.

is this the full HTML file? You seem to be missing both `` and `` tags. You say you include jQuery script in the `` but it is not shown here. Please include the full file, or clarify that this is the full file (in which case we can advise on the necessary HTML elements, scripts, and order therof. — Josh KG, Dec 27 '18 at 06:51

score 0 · Answer 1 · answered Dec 27 '18 at 06:06

0

You have to place your script code inside document.ready function like this:

$(document).ready(function(){
  // your js code
});

or window.load like this:

$(window).on('load', function(){
  // your js code
});

Hope this will help you :)

answered Dec 27 '18 at 06:06

kravisingh

1,640
12
16

This is wrong because there's no jQuery on the page and the script is at the bottom of the document anyways so there's no need to wait for the load or ready events – robinsax Dec 27 '18 at 06:14

score 0 · Answer 2 · answered Dec 27 '18 at 08:31

Take out all the js from the head and add them after the body. Secondly take out all the script from html page and create a new js file and add you code there.

So your html file will look like this

<body>
 //rest of html
<script src="pathToJquery"></script>
 <script src="https://unpkg.com/grapesjs"></script>
<script src="pathToCustomJS"></script>
</body>

Script is loaded before the jquery

2 Answers2