I'm trying to include a HTML fragment inside another HTML page like so (below), via JQuery, but nothing works. What could I be doing wrong?
The folder structure looks as follows:
---> Project_Root --> jquery --> jquery-migrate-1.2.1.min
--> index.html
--> parts --> header.html
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">
<script type="text/javascript" src="jquery/jquery-migrate-1.2.1.min"></script>
<script>
$(function(){
$("#navbar").load("parts/header.html");
});
</script>
<title>Sample</title>
</head>
<body>
<div id="navbar"></div>
</body>
</html>
header.html:
<p> This is my include file </p>
The actual jQuery library is missing:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jq/jquery-migrate-1.2.1.min"></script>
Migrate plugin is used when you want to use some removed/deprecated methods of jQuery which is not in the latest jQuery library.
Related
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<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>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>
I am working on a java spring project and would like to add a static javascript file to an HTML page. here is what I currently have it seems to work for the css but not the js. the basic file structure is
i am trying to get static js from /static/js/pie-chart.js and put it into /templates/show/match.html here is what i currently have for the html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- css is working -->
<link rel="stylesheet" href="../static/css/main.css" th:href="#{/css/main.css}">
</script>
</head>
<body>
<!-- the script does not seem to be linking to the page -->
<script src="../static/js/pie-chart.js" th:src="#{/js/pie-chart.js}">
<body>
</html>
Well, the static folder can be treat as the root path.So you don't have to add this '../static/' prefix in your href. You can try as following to see if it works.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- Delete the relative path-->
<link rel="stylesheet" href="/css/main.css">
</script>
</head>
<body>
<!- Delete the relative path-->
<script src="/js/pie-chart.js">
<body>
</html>
Use this in order to link your Js file in HTML Page :--
<script src="js/pie-chart.js">
This image in my sample boot project. you can using th:href="#{/your/js}".
like this :
readingList.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Reading List</title>
<link rel="stylesheet" th:href="#{/css/style.css}" />
</head>
<body>
<label>Reading List!!</label>
</body>
</html>
The is a part of my html where I am trying to include the another HTML file "content.html" but it is not working. Those addresses in the source are correct but still I am not able to make it happen.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-include src="'content.html'"></div>
</body>
</html>
and this is my content.html
<div class="container">
<h1>Heading!</h1>
</div>
You should add ng-app="" to your page html tag, so that angular will get kick off on the page. After that will start traversing the page & will collect all directive & it will compile them.
<html lang="en" ng-app="">
Instead of ng-include with src you could directly pass template value in ng-include attribute as well.
<div ng-include="'content.html'">
Demo Plunkr
I made a angularjs HTML SPA that works fine.In a specific situation I need the power of a HTA. As far as I know there are no restrictions in using a HTA in combination with angular or any other valid HTML. Nevertheless I get an error when using the line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
in a HTA, even when it's the only script tag in the header.
The error message is: Script error, Code 0, URL http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
I would expect that others have encountered this error before but I can't find anything on stackoverflow.Does anybody recognize this problem? Is there a solution or workaround?
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div >
...Do something
</div>
</body>
</html>
You have declared ng-app and ng-controller on HTML element, but its handlers are not defined. Also, as noted in comment, you must elevate implicit IE version to use sane JS engine with X-UA-Compatible meta. Adding those two lines fixes described error:
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){}])</script>
</head>
<body>
<div>
...Do something
</div>
</body>
</html>
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).