How to attach Jquery in CodePen Debug mode?

1

Uncaught Error: Bootstrap’s JavaScript requires jQuery
at bootstrap.min.js:6
Uncaught ReferenceError: $ is not defined
at XxrVwDpGGOgA:92

2

Do you have a working example? It’s easier to debug with actual code.

At first glance, it looks like you haven’t included jQuery in your pen. It isn’t included by default and it has to come before bootstrap.

3

Hi. I have the same thing you have in image. It works fine in editor mode. When I open in debug mode(codepen has this option on top right corner), a new tab opens with only the HTML page, that is where I get the issue of missing jquery

4

That is very curious. The only think debug mode should do is remove the codepen header and wrapper.

It seems to be working for me. My portfolio project:

Full View: https://codepen.io/cloudsociety/full/mwVPNJ/
Debug View: https://s.codepen.io/cloudsociety/debug/mwVPNJ

Would love to know if you’re getting that error with other pens like mine or just yours. If it’s just yours, we’ll need to see the actual pen in order to help further.

5

Please take a look at this


Wikipedia Viewer:
Debug mode: https://s.codepen.io/vj588/debug/LLoxgy/DqADdEQPoJGA

Another issue is the API fails often, after I try for 4-5 times I get result once.
And also I am trying to append the result divs but that does not work either. It looks like something is overwriting when I happen to get result from API.

6

Found it… I think. Took forever.

You, my good friend, are missing a closing angle bracket. Close the tag, and your debug works. :slight_smile:

Have a look:

7

https://s.codepen.io/vj588/debug/LLoxgy/VGkWNnpYqzdA?
Corrected that. I don’t think that was the issue.

8

I don’t see the jQuery error anymore (just an image from another site warning). Are you still seeing it?

Screen Shot 2017-07-26 at 22.14.20 .png1226×473 153 KB

9

Sorry.Now it’s gone. I should have posted the snapshot.
Can you see why the data is not getting appended. it looks like it is being overwritten.

10

Your form is being as a submit… which assumes that you’re going to another page, so it refreshes before your script can be called. You can stop this with a single line.

    if (e.which == 13) {
      e.preventDefault(); // this is the line you should add
      getData();
    }

Once I did that, it all popped into place. :slight_smile:

1 Like