CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
shurup
shurup

Reputation: 871

Why is jQuery not working with Bootstrap 4 alpha 6?

I am attempting to use jQuery and it is giving me various errors. I tried shuffling different script tags around, but had no success. Here is some code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
 <style>
/*some css here*/
  </style>

        <!--a bunch of HTML here-->
      <script>
if(jQuery){
alert('yes');
}
    $(window).load(function(){
            $('.intro').fadeIn(500, function(){
                $(".welcomeSize").fadeIn(500);
            });
        });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

I get an error saying that jQuery is undefined. If I put the jquery CDN before my script, I get this error: 

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery.min.js:4)
    at newsite.html:129

Is there something I am missing?

Upvotes: 0

Views: 9050

Answers (3)

Azzaz
Azzaz

Reputation: 124

Note that you've been using the jQuery commands before linking the script. The script tag which source(src) attribute is pointing to Google CDN must come before the jQuery command.

Upvotes: -1

azs06
azs06

Reputation: 3517

Your problem is not related with bootstrap, you are adding jQuery dependent script before it's loaded. Add your script after jQuery and use $(document).ready(), .load() is deprecated. https://api.jquery.com/load-event/

.intro{
	width: 200px;
	height: 200px;
	background: purple;
	display: none;
}
.welcomeSize{
	width: 200px;
	height: 200px;
	background: violet;
	display: none;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JQuery+Bootstrap</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>

<div class="intro">
	
</div>
	  <div class="welcomeSize">
	  	
	  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	       <script>
if(jQuery){
console.log('yes');
}
    $(document).ready(function(){
            $('.intro').fadeIn(500, function(){
                $(".welcomeSize").fadeIn(500);
            });
        });
    </script> 
  </body>
</html>
</body>
</html>

Upvotes: 6

Amr Aly
Amr Aly

Reputation: 3905

you have to import jquery before write any code using jquery so what you have to do is 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

// then your code goes here

the second thing for Uncaught TypeError: a.indexOf is not a function

you should use $(window).on('load', function() { ... });

instead of

$(window).load(function() { ... });

load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

Upvotes: 2

Related Questions