I found similar question ajax jquery .load() error 404 but I can't solve this problem.
This is my jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/admincss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://localhost:8080/CarRent/WebContent/pages/demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
and this a structure of my program
Thanks in advance!
Related
I have a test using jquery that s work fine when in html file but when I put it in anexternal js file it doesn t work , help please , I need it to continue my application. query.js is in /js directory
HTML : detail.jsp
<%# taglib uri="http://www.springframework.org/tags/form" prefix="springform" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Ajouter annonce</title>
<link type="text/css" href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet" >
<link type="text/css" href="/css/style.css" rel="stylesheet" >
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/query.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="body2">
<div id="test" class="test" > Allo</div>
</body>
</html>
Js file : query.js
$(document).ready(function(){
$("#test").click(function(){
alert("hello");
})
});
with the help of the comments, I found the error was in the path :
<script type="text/javascript" src="/js/query.js"></script>
instead of :
<script type="text/javascript" src="js/query.js"></script>
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">
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 '/')
I have 3 index pages say
index_ch.jsp
,index_ie.jsp
,index_me.jsp
and a main parent page named
browserdetect.jsp
when the user first enters my url in a browsere browserdetect.jsp will run ...... what i need is the jquery or java script that can be put in my browserdetect.jsp which will first detect the browser the user uses and then redirect to the respective index pages based on the browser he or she uses ...... can any one help me out please
Adding this script to my head section helped me to do what i wanted .... thank you for the help guys ........
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0))
{
window.location.replace("your page");
}
else if (navigator.userAgent.indexOf('Chrome') >= 0)
{
window.location.replace("your page");
}
else
{
window.location.replace("your page");
}
</script>
This code helps you to detect browser of user.
var x = "User-agent header sent: " + navigator.userAgent;
I guess you want to detect brower of user
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0))
{
the code of index_ie.jsp...
}
else if (navigator.userAgent.indexOf('Chrome') >= 0)
{
the code of index_ch.jsp...
}
else
{
the code of index_me.jsp...
}
browserdetect.jsp ------page
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function detectBrowser(){
var nAgent = navigator.userAgent;
var verOffset;
if ((nAgent.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
window.location = "index_ie.jsp";
}
else if ((verOffset=nAgent.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
window.location = "index_ch.jsp";
}
else if ((verOffset=nAgent.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
window.location = "index_me.jsp";
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body onload="detectBrowser()">
<h1>Hello World!</h1>
</body>
</html>
===============================================================================
index_ch.jsp -----page
<%#page contentType="text/html" 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" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World! Chrome</h1>
</body>
</html>
=========================================================================
index_ie.jsp -----page
<%#page contentType="text/html" 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" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World! Internet Explorer</h1>
</body>
</html>
=============================================================================
index_me.jsp -----page
<%#page contentType="text/html" 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" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World! Mozilla Firefox</h1>
</body>
</html>
you can use jsp redirecting tags
1. jsp:forward :- server side redirect [not show index_ie.jsp in the URL]
2. response.sendRedirect :-browser side redirect[ show index_ie.jsp in the URL]
instead of window .location.
I am new to JavaScript and here is a problem when I trying out prototype.
I want to update sample.jsp with Ajax.updater after the it is loaded, but it doesn't work. Here the source of smaple.jsp.
<%#page contentType="text/html" 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" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="prototype.js"></script>
<script>
function f1(){
var ajax = new Ajax.updater(
{success: 'state'},'part.html'
,{method:'get'});
}
document.observe('dom:loaded', function() {
f1();
});
</script>
</head>
<body>
state:
<div id="state"></div>
<br>
</body>
</html>
Could anyone tell me what's wrong with my code?
try "Ajax.Updater" (capital U) for starters
also I recommend that you try working with firefox and the firebug plugin, it's a great way to debug your javascript
I have tried another one and it works
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AJAX Zip Checker </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function checkZip() {
if($F('zip').length == 5) {
var url = 'checkzip.jsp';
var params = 'zip=' + $F('zip');
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
</script>
</head>
<body>
<label for="zip">zip:</label>
<input type="text" name="zip" id="zip" onkeyup="checkZip();" />
<div id="zipResult"></div><p/>
</body>
</html>
checkzip.jsp
<%
String zip = request.getParameter("zip");
if (zip.equals("10009")) {
%>
new york
<%} else {%>
unknown
<% }%>
Could anyone tell me the difference?