Grapesjs: Jquery Conflict Issue

Created on 18 Aug 2017  路  9Comments  路  Source: artf/grapesjs

Hello again @artf, long time no see you hehehe, i have a problem with your GrapesJS.
The problem is when i try to init grapesJS with jquery included for sure, then in my canvas have a jquery's script too but different version, then i try to run it's error, can't drop anything component into the canvas and show error like this :
image

Then i remove jquery scripts inside the canvas, it's works.
Well, my question is, can i duplicate or overriding jquery inside or outside the canvas? it's make more compatibility with any component.

EDIT: Jquery Same version still error

Thank u and sorry for my bad english

outdated
Source
picture bungambohlah

All 9 comments

Hi @bungambohlah can you show me how you inject the script inside the canvas. Maybe this might help you https://github.com/artf/grapesjs/wiki/Components-&-JS#template-related

artf picture artf on 21 Aug 2017

Thank u for ur reply, i can show my code

First in the container with id "gjs" and grab the content directly from the element and load dynamically with .load jQuery, of course this is contain JQuery :

<html lang="en">
  <head>
    <link rel="stylesheet" href="/dev/css/toastr.min.css">
    <link rel="stylesheet" href="/dev/css/grapes.min.css">
    <link rel="stylesheet" href="/dev/css/grapesjs-preset-webpage.css">
    <link rel="stylesheet" href="/dev/css/tooltip.css">
    <link rel="stylesheet" href="/dev/css/perfect-scrollbar.css">
    <!--<link rel="stylesheet" href="/dev/css/grapesjs-plugin-filestack.css">-->
    <!--<script src="https://static.filestackapi.com/v3/filestack-0.1.12.js"></script>-->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="///feather.aviary.com/imaging/v3/editor.js"></script>
    <script src="/dev/js/perfect-scrollbar.min.js"></script>
    <script src="/dev/js/toastr.min.js"></script>
    <script src="/dev/js/grapes.min.js"></script>
    <script src="/dev/js/grapesjs-plugin-export.min.js"></script>
  </head>
  <body>
    <div id="gjs" style="height:0px; overflow:hidden"></div>

...
    <script>
    $( "#gjs" ).load( "someinternalhtmlforload.html", function( response, status, xhr ) {
      if ( status == "error" ) {
            var msg = "Sorry but there was an error: ";
            $( "#gjs" ).html( msg + xhr.status + " " + xhr.statusText );
      } else {
        // initialize grapesjs
        var editor  = grapesjs.init({
          allowScripts: 1,
          clearOnRender: true,
          autorender: 0,
          height: '100%',
          container : '#gjs',
          fromElement: true,
          showOffsets: true,
          plugins: ['gjs-plugin-export', 'gjs-preset-webpage', /*'gjs-plugin-filestack'*/,
            'gjs-aviary', 'gjs-blocks-basic', 'gjs-plugin-forms'],
          ....
        });
      }
    });
    </script>
  </body>
</html>

then in my someinternalhtmlforload.html contain JQuery like

<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    ...
  </head>
  <body>
    ...
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slider').slider();
      });
    </script>
  </body>
</html>

I will try for this option:
EDIT: sorry for my previous edit, this is really works, but can i initialize jQuery for the content directly from the element ?, it's make more easy because, my JQuery included in HTML section, not in grapesJS section
https://github.com/artf/grapesjs/wiki/Cmponents-&-JS#component-related

bungambohlah picture bungambohlah on 22 Aug 2017

@bungambohlah you're loading an entire HTML document inside another, don't do it, it's wrong just by definition. Basically, this is what happening before the browser fixes it by itself

...
</head>
  <body>
    <div id="gjs" style="height:0px; overflow:hidden">
       <html> <!-- not good -->
          <head>
          ...
             <!-- With this new jquery you're overriding the one already in and therefore breaks it -->
             <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
          ...
    </div>
    ...

can i initialize jQuery for the content directly from the element

Sure, this is what you see here
https://github.com/artf/grapesjs/wiki/Components-&-JS#component-related

artf picture artf on 22 Aug 2017

Thank u as ur help @artf ,

you're loading an entire HTML document inside another, don't do it, it's wrong just by definition. Basically, this is what happening before the browser fixes it by itself

Yes sure, i want to load dynamically html that changed or saved by user and could be edit again, it's done with load/save storage method but i want to get the file from my web designer intact and when the client made the first change will be sure load html entirely, and the second change and so on will use load/save storage method, am i right? or you have another suggestion?

i have a suggestion with this,
it's works when i try execute this script in my someinternalhtmlforload.html file that from my web designer :

...
<script>
    if(typeof jQuery == 'undefined')
    {
      console.log('inserting jquery...');
      var script = document.createElement('script');
      script.type = "text/javascript";
      script.src = "https://code.jquery.com/jquery-3.2.1.min.js";
      document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>
...

it's make more compatibility and not overriding with anyone component, i can give that script to my web designer :+1:

Thank u and sorry for my bad english

bungambohlah picture bungambohlah on 23 Aug 2017
👍1

Nice workaround, about how to store templates properly I think I'll make a quick guide later

artf picture artf on 23 Aug 2017
👍1

Hi

I have little bit different issue, but it is similar so posting here.

I'm using jQuery in component and I've tried both recommend options for loading custom script. Through canvas for all components:

    canvas: {
        scripts: ['jquery.min.js']
    }

and also inside component: 

var jquery = document.createElement('script');

jquery.src = "jquery.min.js";
jquery.onload = function() {
  var script = document.createElement('script');
  script.onload = initMySLider;
  script.src = "jquery.cycle2.min.js";
  document.body.appendChild(script);
};
document.body.appendChild(jquery);

initially bothways it works fine - I use jQuery cycle plugin and it works. But I'm trying to access that plugin when model change event is fired:

init() {
  this.listenTo(this, 'change:count', this.updateSlideCount);
},
updateSlideCount() {
  $(this.view.el).cycle('reinit');
},

this doesnt work, because here $ refers to jQuery loaded by GrapesJS and cycle plugin is not there.
any ideas how to fix this?

thanks

KMantas picture KMantas on 3 Dec 2017

Canvas works inside of a iframe. So, you can use document.querySelector('iframe').contentWindow.$; I think it should works

ateshuseyin picture ateshuseyin on 4 Dec 2017
👍1

it worked! thanks

KMantas picture KMantas on 4 Dec 2017

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 18 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

alibouaziz picture alibouaziz  路  3Comments
kosirm picture kosirm  路  3Comments
tribulant picture tribulant  路  3Comments
nojacko picture nojacko  路  3Comments
desilvaNSP picture desilvaNSP  路  3Comments