I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
Related
I did read a lot of the same questions and I did try all of them, but here is the problem. Be easy on please, I use PHP include on the index file to do it, but Plesk told me I will break the hosting server and I must use HTML index file.
I call the jQuery like this inside the head:
<!doctype html>
<html lang="en">
<!-- Head start -->
<head>
<title>Advertron ISP - Placeholder</title>
<!-- Custom stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet"/>
<!-- Advertron ISP CSS -->
<link rel="stylesheet" href="css/advertronisp.css"/>
<!-- Custom font kit -->
<script src="https://kit.fontawesome.com/f6b2049012.js" crossorigin="anonymous"></script>
<!-- jQuery for replacing content on main html page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("templates/header-top.html");
$("#main").load("main.html");
$("#footer").load("footer.html");
});
</script>
</head>
<!--/ Head ends -->
<body>
<!-- Body start here -->
<div class="grid-container">
<!-- Header start here -->
<div id="header"></div>
<!--/ Header ends -->
<!-- Main content -->
<div id="main"></div>
<!--/ Main content ends -->
<!-- Footer start here -->
<div id="footer"></div>
<!--/ Footer ends -->
</div>
<!--/ Body ends-->
</body>
</html>
This work and then only load the header-top.html file, but the moment I insert (templates/) where I call from the folder before (main.html) or (footer.html)
Then it doesn't load and stop by searching kit.fontawesomesome.
I'm using my localhost as testing server and I'm on Linux and Apache server is running.
Then, I also like to replaceWith() when someone clicks on a link or tab inside the main.html file an element div on the main.html must be replaced with other content.
I read that I can use XML or ajax or jQuery to do it, but all my trying to do it just doesn't work. After I can solve the first issue then maybe that will solve the second issue too.
Blessings
Christo
I found a solution in https://www.w3schools.com/howto/howto_html_include.asp to address the problem to load header, main, and footer HTML files from folder to index HTML file.
It's much faster and it works. So if anyone else looking to do it, use the solution in W3Schools.
Blessings
Christo
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.
I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.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="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
#yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
#yield('script')
</body>
</html>
Content Page - page1.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<!-- Page Stuff -->
</div>
#endsection
#section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
#endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer command.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
install npm
remove vue template in resouces/js/app.js
type "npm run dev" and hit enter
repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags
Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet?
If not you can see in here : jquery Bootstap
I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.
Below is my Html code
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body >
<!-- MAin page -->
<div ng-app="first22" id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" ng-app="firsta" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
mainscope1.js
var first2 = angular.module('first22', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
})
var first2a=angular.module('firsta',[]);
first2a.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
})
Can anyone explain why firsta module is not working here. Thanks in advance
Try using angular boostrap , to happen when the document is ready:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});
Check this fiddle
You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?
If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body ng-app="myAngularApplication">
<!-- MAin page -->
<div id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
And the javascript would be:
var first2 = angular.module('myAngularApplication', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
});
first2.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
});
OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.
Possible duplicate of this question:
https://stackoverflow.com/a/12864137/1177295
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other. --
http://docs.angularjs.org/api/ng.directive:ngApp
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);