Bootstrap 4 $(...).load is not a function - javascript

I'm trying to build a page using Bootstrap 4 as basis. Since I'm new to Bootstrap it's a bit of trial-and-error.
I want to use some buttons to load separate php-files into a DIV using jQuery / javascript. The files to load are in place and the javascript is executed, but it stops where I use the .load() function: there I receive the error: "TypeError: $(...).load is not a function".
There are several reports on SO, but I seem not to be able to find the right solution.
Header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Time Tracker<?php echo (isset($_SESSION['userrealname'])) ? " ::: ".$_SESSION['userrealname'] : ""; ?></title>
<!-- Bootstrap Core CSS -->
<!-- link href="css/bootstrap.min.css" rel="stylesheet" -->
<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">
<!-- Custom CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
My buttons:
<div class="container">
<button type="button" class="btn btn-primary" id="overview">Overview</button>
<button type="button" class="btn btn-primary" id="newcard">New Timecard</button>
The DIV to replace:
<div id="contents">
<?php
//include('inc/overview.php');
?>
</div>
And the bottom of my HTML:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<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 src="js/jquery.validate.min.js"></script>
<script src="js/crypto.js"></script>
<script src="js/user.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#overview" ).click(function(){
alert("OK");
$( "#contents" ).load("inc/overview.php");
});
$( "#newcard" ).click(function(){
$( "#contents" ).html("<strong>test</strong");
});
});
</script>
</body>
The alert("OK") works fine (added to test), but the next line $( "#contents" ).load("inc/overview.php"); causes the error.
Can anyone point me in the right direction to resolve? Thanks in advance!

jQuery slim doesn't have the load() function. You have to use the full version.

Just like Alex said, use the full JQuery.
I also recommend to avoid any further problem using :
var {insert name here} = JQuery.noConflict()

Related

Can't get javascript, JQuery to work with my PHP

Really nooby question, but couldn't find it on this site, and just can't get it to work.
How can I get javascript and jquery to work when putting CDN into headers / footers?
My javascript is working when I include the CDN and the tags right in with the HTML, but I want to have my javascript on other pages, rather than in with the HTML view pages.
I can't see what is wrong. Maybe you can help?
this is working
<div class="form-group">
<label for="caption">Event Description</label>
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<textarea class="form-control" name="event_description" id="body" cols="30" rows="20"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
</script>
</div>
However this is not
I have
<?php require_once("includes/header.php"); ?>
<?php require_once("includes/footer.php"); ?>
on all tops and bottom of HTML view pages.
Here are my headers and footers
<?php ob_start(); ?>
<?php require_once("init.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
footer
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
</body>
</html>
here is the scripts.js page
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
$(document).ready(function(){
alert('hello');
});
not sure why nothing works from the scripts.js page. The alert is not working. I have JQuery.js referenced also..
Thank you
You should put <script src="js/scripts.js"></script> after JQuery and other dependencies. Because your script.js is using JQuery before you imported it.
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
<!-- MY JS -->
<script src="js/scripts.js"></script>
</body>
</html>
Just make the following changes in your footer and everything will work fine.
Regarding to keep JS in header and footer
<script>-tag over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
It was trends before to put JavaScript code in the header but now because of SEO and site performance, it is better to put JavaScripts in the footer. yes, that means all the js code.
How to avoid such issues in future?
you first need to include the dependencies required by your code and other libraries. like jQuery is required by most of the libraries bootstraps, fancybox, jQuery full calendar and so on. so first include jQuery library then other js libraries if they have any other dependencies than include them before your custom javascript. it is just same as in your code you define something above. what if you try to use it before defining it? no way it will never work...
Now what about CSS dependencies?
always include them in the header inside tags.

Popover on <i> elements within a Table

I am trying to get the following behaviour on some font-awesome icons that are being used within a table.
When hover over the icon, shows a popover with more information for the user.
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/search.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/box.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
I thought I'd loaded the script correctly, but there is not the expected response when the file is put live onto the server (I checked bootstrap.js, it does include popover.js and tooltip.js inside of it as code sections.)
in the pastebin below is a version of the table where I have removed the majority of the rows whilst still keeping it visible what my intention is: http://pastebin.com/hYUBA711
(didn't want to paste it straight in cause tables always take up a lot of space, even this small 4 rows tall one, the real table is 16 rows)
Edit: oddly enough, when I try it on jsfiddle it does seem to work as I intend, but the live site doesn't... must be a different issue? The JSFiddle http://jsfiddle.net/zmug2y2q
Place your jquery code under jquery.js and bootstrap.js:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
});
</script>
Add a ; at the end of your jquery code: https://learn.jquery.com/using-jquery-core/document-ready/

Cannot load jQuery-ui on Dreamweaver

I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});

jQuery not running with the html file

I know there are enough and more questions on this topic, but none of them seem to fix up my problem. I am new to jquery and was trying it out for my code. It just doesn't seem to get up and running. I have tried changing the order in which the script occurs with other scripts, I have checked for the directory in which my jquery file resides, I have tried to use both the CDN version and the downloadable one. Nothing seems to work.
this is the head of my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i have put jquery at the end of the body of my html
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
In this code I have put the jquery code with the html code itself. I have tried another version by putting the code in a separate file and running it, that doesnt work either.
Any help is much appreciated
I think there's a typo where you add the jquery tag. the file name should end in the extension .js so probably something like this:
<script src="./js/jquery-1.11.3.js"></script>
Try
Change <script src="./js/jquery-1.11.3"></script> to <script src="//code.jquery.com/jquery-1.11.3.js"></script>
Change $(document).ready((function) { to $(function(){ or $(document).ready(function(){
Your jquery script src is missing the .js extension
Try this:
<script>
$(document).ready(function($) {
$("div").css("border", "3px solid red");
});
</script>
Put jQuery in the head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
</head>

Javascript controls not working for Bootstrap modal (and generally)

I'm using javascript to control a modal for a log in and registration page.
However I cant seem to get the javascript to fire.
Here is the header for my page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site </title>
<link rel="icon" href="myfavicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Landing Page CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery - UI CSS - Both v 1.11 and 2.1 -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- Starts all the Javascript-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<!-- Javascript for the admin page -->
<script src="js/sb-admin-2.js"></script>
<!-- jQuery - Both v 1.11 and 2.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Validator-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<!-- The Validator for the forms-->
<script src="js/validator.js"></script>
<!-- My Custom Javascript functions-->
<script src="js/mymain.js"></script>
My Login Function are held within the /js/mymain.js script. I also have the following call to the login function in a document.ready() within the <head> of this page.
$('#loginBtn').click(function(e){
alert('cliked');
e.preventDefault();
login();
});
The problem is that the alert given above is not firing, which suggests that there is something broken in the javascript, but I cant work out what it is.
All the Modals are as per the Bootstrap site, and are ID'd appropriately. Its just a problem with the Javascript/Jquery.

Categories

Resources