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.
2 answers
solution1
0 2018-12-27 06:06:18
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 :)
solution2
0 2018-12-27 08:31:24
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.