I have a file Inside.jsp which is included in the file total.jsp. I have an inputfield in Inside.jsp. When you click in it a calendar is supposed to appear on the screen. If you are in the browser at http://localhost:8080/inside.jsp the calendar opens but if you are in http://localhost:8080/total.jsp nothing happens (the calendar doesn't open instead it's just a normal input field). What can I do to fix that?
I belivee that it has something to do with my scripts or links but it would be good to get an explanation.
Inside.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/total.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
$(function() {
$("#pickdate").datepicker();
});
</script>
<title>Inside</title>
</head>
<body>
<input type="text" id="pickdate" class="form-control">
</body>
</html>
Total.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/total.css">
<title>Total</title>
</head>
<body>
<divt><jsp:include page="Inside.jsp" /></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
You're actually including a complete HTML page inside another, with the head and body parts which are already in the Total.jsp page,
To solve such an issue the inside.jsp should remain clean.. just the content you want, and you should move the libraries and css loading to the Total.jsp.
And leave the inside.jsp with only fields and that script which associates datepicket to the field.
Total.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/total.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>Total</title>
</head>
<body>
<divt><jsp:include page="Inside.jsp" /></div>
</body>
</html>
Inside.jsp:
<script>
$(function() {
$("#pickdate").datepicker();
});
</script>
<input type="text" id="pickdate" class="form-control">
Related
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
I want to use jQuery datepicker in my Struts app
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First JQuery Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/mytestcss.css">
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="formdiv">
<s:form>
<s:textfield label="username" name="username" ></s:textfield>
<s:password label="password" name="password" ></s:password>
<s:textfield label="date" id="datepicker" name="date"></s:textfield>
</s:form>
</div>
<input type="text" id="datepicker">
</body>
</html>
Did I miss anything?
Why datepicker is not loading?
You can use s:url tag to build correct path
<script src="<s:url value='/js/jquery-1.11.1.js'/>"></script>
JSTL c:url tag works similar
<script src="<c:url value='/js/jquery-1.11.1.js'/>"></script>
or use JSP EL
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
You should use document ready event to be sure your element is rendered
Try using this:
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First JQuery Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/mytestcss.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="formdiv">
<s:form>
<s:textfield label="username" name="username" ></s:textfield>
<s:password label="password" name="password" ></s:password>
<s:textfield label="date" id="datepicker" name="date"></s:textfield>
</s:form>
</div>
</body>
</html>
The .js file was not loaded ,because of /js/jquery-1.11.1.js i changed it to js/jquery-1.11.1.js (removed '/')
The html file is
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website /title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
and my script3.js file is
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
how am I linking it wrong?
when i used jfiddle to test my code, the alert works when i click the button. however, i'm using notepad++ and i'm not sure what I'm doing wrong.
I see two issues, and something else you should fix.
In the script3.js, you have a missing });. So it should be:
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
});
The title tag is not formatted correctly:
<title>My Website /title>
Needs to be:
<title>My Website </title>
EDIT: Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website </title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<input type="button" id="checkOut" value="check out" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
Hy guys ! I have a problem with my menu from index.It appears that after i load another page with ajax , the menu isn't working anymore.Can you help ? Thanks
Is a problem that index and header1 have the same javascript ?
INDEX HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<!--Menu-->
<div id="menu"><img src="img/menu/menu.png" width="900" height="517" /></div>
<div id="service" class="font-menu" >SERVICE</div>
<div id="service-buton" class="font-menu-bold" >SERVICE</div>
</div>
<!--End of Menu-->
<div id="content"></div>
</body>
</html>
Javascript :
$(document).ready(function() {
$("#toggle").hide();
$('#service').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'hidden');$("#service-buton").css('visibility', 'visible');});
$('#service-buton').click(function() { $('#toggle').toggle();$("#service").css('visibility', 'visible');$("#service-buton").css('visibility', 'hidden');});
$('#acasa').click(function() {
$.ajax({
url:"header1.html",
success: function(data) {
$("#content").html(data)}
});
});
});
Header1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lukcomputers</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="fonts/fonts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Content-->
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>
<!--End of Content-->
</body>
</html>
What you are doing is a bad practice. use .load() if you want to load a specific part of a page into your current page. In your case, it is
$('#content').load('header1.html #paragraf1');
Your header1 html file shoud have only this line
<div id="paragraf1" class="myriad">Instalare sisteme oferare<br />(WINDOWS, LINUX),<br />instalare aplicatii, back-up date.</div>
<?php
//require 'includes/db.inc.php';
require 'includes/configs.inc.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php $site_name ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/jquery.imageTickBox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input:[type=checkbox]").imageTickBox({
tickedImage: "/images/checked.png",
unTickedImage: "/images/unchecked.png",
imageClass: "tickbox"
});
});
</script>
</head>
<body>
<div id="mirror" class="center">
<!--some code deleted-->
<input type="checkbox" id="Music" name="hobbies[]" value="Music">
<!--some code deleted-->
</div>
</body>
</html>
any wrong with the code above????name index.php and put it on root dir.
but not work , i see the jquery checkbox plugin guide at
http://blog.leenix.co.uk/2009/10/jquery-plugin-imagetickbox-change-any.html
ALWAYS close your script tags, even if using external resources.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You need to close the jquery script tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>