I have a Spring Boot 1.3.0.BUILD-SNAPSHOT with Spring security for authentication. I have a layout.html page for use by my other pages.
When I go to my login.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/custom.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<script src="/libs/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div th:replace="layout :: head"> </div>
<div style="padding-top:60px;">
....
</div>
<div th:include="layout :: foot"/>
</body>
</html>
Where here is my layout:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<div th:fragment="head" class="my-header">
<div class="navbar navbar-default navbar-fixed-top navbar-transparent" role="navigation">
...
</div>
</body>
</html>
The form submits a POST, which returns a 302:
And then the url is redirected to http://localhost:9001/js/bootstrap.min.js instead of http://localhost:9001/ so that the browser just shows the contents of the bootstrap js file. If I manually change the URL to http://localhost:9001 then my authenticated window is shown. All other pages behave normally, its just the login page that shows the js file content.
I cannot figure out where the call to display js/bootstrap.min.js is coming from, I grep'd my files and all references to it are in the format:
<script src="/libs/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Thank you for your time in reading this and offering any advice on what might be causing this issue.
Related
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I've just created this theme with the jquery mobile theme rooler, and included it in my page like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
But the default theme is displayed:
The chrome console isn't reporting any errors.
What could be the problem?
Move your theme which I'm presuming is themename.min.css below jquery.mobile-1.4.5.min.css. The way themes work in CSS is usually by overriding selectors, such as class names. If two stylesheets apply styles to the same selector, the last defined instance is the one that's used. Currently, you're defining your theme and overriding it with the main jQuery theme. Reverse the order and your problem should be fixed. Below would be an optimal loading scenario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
For CSS:
Load the default jQuery Mobile Theme
Load the jQuery Mobile Icon overrides
Load your custom theme `thememain.min.css`
In addition, it's wise to move the JavaScript below the CSS files. CSS Files are downloaded in parallel whereas JavaScript files are usually downloaded and parsed one at a time.
I want to change dynamically the content of a div.
My html page looks somehow like this
<!DOCTYPE HTML>
<html>
...
<body>
<div data-role="page">
<div data-role="header">
//Image
</div>
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
</body>
</html>
in wlCommonInit() I call this:
$("#pagePort").load("page2.html", function(){
});
and nothing happen but if I include a timeout it works fine. So my intuition is that I have to wait for the div to be ready?
But on which event can I wait to call the .load() statement?
I cannot reproduce your claim.
I have tested the following in both Worklight 6.1.0.01-20140821-0406 (this is actually 6.1.0.2) and 6.2.0.00-20140918-1910 , and in both page2.html loaded right away as the application was displayed while previewing it via Worklight Console:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.4.4.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div data-role="header">
Header
</div>
<div id="pagePort"></div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
main.js:
function wlCommonInit(){
$("#pagePort").load("page2.html");
}
page2.html resides on the same level as index.html and contains only <h1>Success</h1>
I'm curious problem linking my js files in my php webpage. First at all, I put it at the end of the file (just before closing body tag) and in local mode everything works ok. But when I upload my web to my server js files seems not linking, I have to put it in header to work it.
So that way could be important to say all my functions are in a separated file called "scripts".
It's not important trouble, but I'm concerned. Anybody could explain me?
Thanks in advance
Edited
Thank you #Pointy and #Jochen for your quickly answer. I tried using chrome inspector. No errors show, only not load files. This is my web structure (I don't copy complete code cause would be so extense)
<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--CSS starter-->
<link href="" rel="stylesheet" media="screen">
<!--CSS font-awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link href="font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- javascript (here links working) -->
</head>
<body>
<!--sections-->
<!--/sections-->
<!-- javascript (here not working) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/messages_es.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I guess this path is wrong, try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Do we need to include CSS and JS files in every html page of mobile site developed in JQueryMobile?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
I think it's not in the documentation or I just missed it.
You should have a single html document with a <div data-role="page"> for each page that you need in your application. Check out source code of Multi page template.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<!-- CSS and JS files here-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">/script>
</head>
<body>
<div data-role="page" id="first">
<!-- Code for your first page -->
</div>
<div data-role="page" id="second">
<!-- Code for your second page -->
</div>
</body>
</html>