0

I'm getting this error in my console, and it relates to a js script i'm using (Trumbowyg WYSIWYG: http://alex-d.github.io/Trumbowyg/)

Here's a picture of the browser console with the error:

When I click on (index):166, it shows this in the source:

id_content is the id for the WSYIWYG editor, and this is the required function in my js file to make it work:

$('#id_content').trumbowyg({

});

I've looked at other solutions and they say to load the jquery script before every other js script, but I'm already doing that and it doesn't solve anything. Does anyone have any idea what the problem is? By the way, I'm using this package to integrate it with django: https://github.com/sandino/django-trumbowyg, not sure if that changes anything. I just load the widget in my forms like this:

class PostForm(forms.ModelForm):
    content = forms.CharField(widget=TrumbowygWidget(), required=False)

full html part:

< div >
< textarea
cols = "40"
id = "id_content"
name = "content"
rows = "10" >
< / textarea >
< script >
$("#id_content").trumbowyg({
    lang: "en",
    semantic: true,
    resetCss: true,
    autogrow: true,
    removeformatPasted: true,
    btnsDef: {
        image: {
            dropdown: ['upload', 'insertImage', 'base64', 'noembed'],
            ico: 'insertImage'
        }
    },
    btns: [
        ['formatting'],
        'btnGrp-semantic',
        ['link'],
        ['image'],
        'btnGrp-justify',
        'btnGrp-lists',
        'video',
        ['horizontalRule'],
        ['removeformat'],
        ['fullscreen'],
        ['viewHTML']
    ],
    plugins: {
        upload: {
            serverPath: '/trumbowyg/upload_image/',
            fileFieldName: 'image',
            statusPropertyName: 'message',
            urlPropertyName: 'file'
        }
    }
});
< / script >

< / div >

EDIT: keep in mind everything works fine, but I'm still getting this error. This is not a duplicate question, I've tried those solutions and none of them work.

end of the html file, scripts loading fine:

    ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script>
    <script src="/static/js/jquery-jvectormap-2.0.3.min.js"></script>
    <script src="http://jvectormap.com/js/jquery-jvectormap-world-mill.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>-->
    <script src="/static/js/Trumbowyg-master/dist/trumbowyg.js"></script>

</body>
Zorgan
  • 5,651
  • 13
  • 59
  • 140
  • Show please the full HTML code that has the `$` part. That's a lack of `jQuery` loading issue. – nik_m Apr 23 '17 at 11:23
  • 1
    `"but I'm already doing that and it doesn't solve anything"` - Your browser seems to think otherwise, and it's usually right about these things. – David Apr 23 '17 at 11:24
  • Does it work if you change `$` to `jQuery` for that instance? – charlietfl Apr 23 '17 at 11:27
  • @nik_m added in edit. David what do you mean? My jQuery is the first js file I load. – Zorgan Apr 23 '17 at 11:27
  • @charlietfl no I still get the same error. – Zorgan Apr 23 '17 at 11:30
  • If this is the full HTML then jQuery **is not** loaded. Maybe you're inheriting a `base.html` template? Right click on the page and click `page source` and then copy-paste that. Also, for the sake of the internet, please use `
    ` instead of `< div >`!
     – nik_m Apr 23 '17 at 12:14
  • I am inheriting a `base.html` but that's not the full HTML file, the full page source shows the scripts are loading fine (added in my edit). And that html part with the `< div >` is automatically generated from the WYSIWYG editor. – Zorgan Apr 23 '17 at 12:28
  • Try to put these lines `` and `` at the `` of the document. – nik_m Apr 23 '17 at 12:30
  • Already tried it and still get the error. – Zorgan Apr 23 '17 at 12:32
  • And if you open chrome dev tools and write `console.log($('#id_content'))` you get the same error? If yes, then `jQuery` is not loaded. Maybe there is confliction issue. See [`here`](http://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict) for that. – nik_m Apr 23 '17 at 12:42
  • Just tried that and I do not get an error, here's the output: https://i.imgur.com/BV5sVCv.png – Zorgan Apr 23 '17 at 12:57

1 Answers1

-1

It means your page does not have jQuery loaded.

Check network tab to see if jQuery had issues loading.

Or

Make sure that your code is being executed after jQuery in included.

Umair Ayub
  • 13,220
  • 12
  • 53
  • 124