So I am currently getting a
Cross origin requests are only supported for HTTP.
After looking it on for a while I was able to determine it happens when you try to upload javascript files from local and not http that issue occurs.
My jsp on back end
<%# 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" %>
<html>
<head>
<title>Product Finder</title>
</head>
<body ng-app="myProductFinder">
<div class="generic-container" ng-controller="UserController as ctrl">
<form ng-submit="ctrl.submit()" name="myForm" class="form-horizontal">
<input type="text" ng-model="ctrl.searchString" id="uname" class="username form-control input-sm" placeholder="Enter your name" required/>
<input type="submit" value="Search" class="btn btn-primary btn-sm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="<c:url value='/static/js/app.js' />"></script>
<script src="<c:url value='/static/js/service/productSearchService.js' />"></script>
<script src="<c:url value='/static/js/controller/productSearchController.js' />"></script>
</body>
</html>
My rendered page on fron end source
<html>
<head>
<title>Product Finder</title>
</head>
<body ng-app="myProductFinder">
<div class="generic-container" ng-controller="UserController as ctrl">
<form ng-submit="ctrl.submit()" name="myForm" class="form-horizontal">
<input type="text" ng-model="ctrl.searchString" id="uname" class="username form-control input-sm" placeholder="Enter your name" required/>
<input type="submit" value="Search" class="btn btn-primary btn-sm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="/searchMart/static/js/app.js"></script>
<script src="/searchMart/static/js/service/productSearchService.js"></script>
<script src="/searchMart/static/js/controller/productSearchController.js"></script>
</body>
</html>
If you look at the script on last 3 lines it is pointing to local path and not through localhost which I would expect it to go through. I am using jetty to run it. Does anyone know why it is not picking the local host url
I was not putting http:// in my get request in my service js.
$http.get('http://localhost:8080/searchMart/index/search',productName)
Related
I would like to call external javaScript function in my HTML. When I open the local HTML file URL in Intellij Idea, the HTML will appear as expected. However, when I try to run the web application, the javaScript function will not appear. When I press F12 on the webpage, it mentions:
Failed to load resource: the server responded with a status of 404 () for the script.js.
I tried to use the absolute path for my javaScript file but the same problem persists. May I know how do I fix this? Below are my HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>New Employee Form</title>
<link rel = "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<style>
form {
text-align: center;
padding: 40px 0;
background: #EBF0F5;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">New Employee Form</h1>
<hr>
<h2 style="text-align:center;">Save Employee</h2>
<div id="ERRORS"> </div>
<form id="form" action="#" th:action="#{/saveEmployee}" th:object="${employee}"
method="POST">
<span class="error_form" id="fname_error_message"></span>
<input id="firstName" name="firstName" type="text" th:field="*{firstName}"
placeholder="Employee First Name" class="form-control mx-auto col-8 mb-3" >
<span class="error_form" id="lname_error_message"></span>
<input id="lastName" name="lastName" type="text" th:field="*{lastName}"
placeholder="Employee Last Name" class="form-control mx-auto col-8 mb-3" >
<span class="error_form" id="email_error_message"></span>
<input id="email" name="email" type="email" th:field="*{email}"
placeholder="Employee Email" class="form-control mx-auto col-8 mb-3" >
<br>
<button type="submit " class="btn btn-info col-2"> Save Employee</button>
</form>
<a th:href = "#{/employeeList}" class="btn btn-info col-2 "> View Employee</a>
<hr>
</div>
</body>
</html>
Below is where I save my HTML and javascript file.
you could try to move the script.js file into the directory of the project to fix the issue or you could try just copying javascript code straight into HTML in the <script></script> tag.
I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
How can I use <video> tag for my spring application in jsp page with jstl tags
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#page session="true"%>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.css" />"
rel="stylesheet">
<title>Login Page</title>
<style>
</style>
</head>
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/js/main.js" />"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<body onload='document.loginForm.username.focus();'>
<nav>
<h1>CHALLENGER</h1>
<video width="320" height="240" controls="controls">
<source src="C:\\Users\\ratheesh\\Downloads\Linux\\LinuxInspires.mp4" type="video/mp4" />
</video>
<ul>
<li id="login"><a id="login-trigger" href="#"> Log in <span></span>
</a>
<div id="login-content">
<c:if test="${not empty error}">
<div class="error">${error}</div>
</c:if>
<c:if test="${not empty msg}">
<div class="msg">${msg}</div>
</c:if>
<form name='loginForm'
action="<c:url value='/j_spring_security_check' />" method='POST'>
<fieldset id="inputs">
<input type='text' name='username' id="username"
placeholder="Your email address" required> <input
type='password' name='password' id="password"
placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input name="submit" type="submit" id="submit" value="submit" />
<label><input type="checkbox" checked="checked">
Keep me signed in</label>
</fieldset>
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />
</form>
</div></li>
</ul>
</nav>
</body>
</html>
I am wondering why this is not loading video on my jsp page
when I put the same video tag in stand alone html page it is working
Any help will be appreciated highly
I am not able to get the datepicker to work. this is a second page in the application and loads the header.jsp which has the navigation bar.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:include page="/WEB-INF/views/header.jsp" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<c:url value="/resources/js/bootstrap-datepicker.js" />"></script>
<jsp:useBean id="patient" class="com.mycompany.model.Patient" scope="session"/>
<jsp:setProperty name="patient" property="*"/>
<form class="navbar-form pull-left" method="POST" action="/myapp/success">
<div><table>
<tr><td>Patient ID </td><td> <input name ="pid" type="text" class="form-control" style="width: 200px;" required></td></tr>
<tr><td>First Name </td><td><input name="first_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Last Name </td><td><input name="last_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Age </td><td><input name="age" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td><button type="submit" class="btn btn-default">Save</button></td></tr>
</table></div>
</form>
<div>
<div class='well'>
<input type='text' class="form-control" id='datetimepicker6'/>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datepicker();
});
</script>
</div>
please tell me where i am going wrong... the jquery doesn't seem to be working for me
I am working on jquery and javascript. i am using an external library to make a function to work. but the code works fine with firefox. but the issue is with chrome. its not working like mozilla. since i am very new to this field i have googled and didnt find a solution. do i need to install any chrome extension file for this. any help would be appreciated. here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>login testing</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
</head>
<body>
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>
<div id="login">
<form id="loginform">
Uname:
<input type="text" id="uame" name="uname">
Pwd:
<input type="password" id="pwd" name="pwd">
<div class="Button1">
<button type="button" id="submit" value="Login" class="btn" >
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
</form>
</div>
<div class="container" style="display:none">
Welcome to the naughtyprogrammer website
</div>
</body>
</html>