Bootstrap+jquery file introduction error

This time I will bring you bootstrap+jquery file introduction error, bootstrap+jquery file introduction error What are the precautions, the following is a practical case, let’s take a look .

When working on a project, various bugs will always appear in the console. In fact, there is no need to panic. In the end, there are only a few types of errors. Every time I encounter an error during development, I am good at summarizing it. Next time When you see it, you will have a good idea of ​​what is going on. The following are some errors summarized during the development process and their solutions.

Error 1: Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined

Cause of error: File loading The order is wrong, the jQuery file must be in front

Method: Write the jQuery file in front of all script files

Error 2: Problem with relative path and absolute path of jsp page:

Normal path: ../../ in html, change it to jsp page The path cannot be found, and it looks like this at this time

At this time, you only need to add this code to the file:

Solution: Insert the following code between and

<%
 String path = request.getRequestURI();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path;
%>
<base href="<%=basePath%>" rel="external nofollow" >

Error three: Uncaught TypeError: $(...). tooltip is not a function

Uncaught TypeError: $(...).tooltip is not a function
 at HTMLDocument.<anonymous> (app.js:42)
 at l (jquery.min.js:4)
 at Object.fireWith [as resolveWith] (jquery.min.js:4)
 at Function.ready (jquery.min.js:4)
 at HTMLDocument.S (jquery.min.js:4)

Reason: Includes two different versions of jQuery UI. This may cause conflicts. Try removing

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Solution:

Edit:

<script>
jQuery( document ).ready(function( $ ) {
 $('.hasTooltip').tooltip();
});
</script>

Use it like this, solved my problem!

Error four: Uncaught TypeError: $(...).sortable is not a function

Uncaught TypeError: $(...).sortable is not a function
 at HTMLDocument.<anonymous> (dashboard.js:12)
 at l (VM552 jquery.min.js:4)
 at Object.fireWith [as resolveWith] (VM552 jquery.min.js:4)
 at Function.ready (VM552 jquery.min.js:4)
 at HTMLDocument.S (VM552 jquery.min.js:4)

Error Five: bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery

bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
 at bootstrap.min.js:7

Solution: Solution: Put jquery.min.js It doesn't matter if it is referenced before the bootstrap.min.js file, or the bootstrap.min.css file is referenced before or after the two files (tested multiple times).

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Request ajax in jquery and response ajax in servlet

Implement jquery on the startup page Load data immediately

#Realize the linkage effect between the input box and the drop-down box

The above is the detailed content of Bootstrap+jquery file introduction error. For more information, please follow other related articles on the PHP Chinese website!