jQuery working on HTML, not in JSP
Question
I have a virtual keyboard package (obtained from the http://mottie.github.io/Keyboard/ ) that I am trying to get working on my website. Following their documentation, I was able to get it working on an HTML page, with the following:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script> <link href="css/keyboard.css" rel="stylesheet"> <script src="js/jquery.keyboard.js" type="text/javascript"></script> <script> $(function(){ $('#keyboard').keyboard(); }); </script> <script type="text/javascript"> window.onload = function() { var tfrow = document.getElementById('tfhover').rows.length; var tbRow = []; for (var i = 1; i < tfrow; i++) { tbRow[i] = document.getElementById('tfhover').rows[i]; tbRow[i].onmouseover = function() { this.style.backgroundColor = '#ffffff'; }; tbRow[i].onmouseout = function() { this.style.backgroundColor = '#d4e3e5'; }; } }; </script> <title>Login Page</title> </head> <body viewsource="no"> <div id="wrap"> <input id="keyboard" type="text"> </div> </body> </html>
However, when the exact same content is in a file with a .jsp extension (that I encode using eclipse / spring) on a tomcat server, the jQuery doesn't work. The only jQuery function that I have been able to run on the jsp page is to pop up an alert.
I looked at an earlier questions here and here and here that I thought was similar, but didn't find anything that helped.
Any help is appreciated by this newbie!
Update: Including JSP code:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <%@page import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%> <html> <head> <meta charset="utf-8"> <link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script> <link href="css/keyboard.css" rel="stylesheet"> <script src="js/jquery.keyboard.js" type="text/javascript"></script> <script> $(function(){ $('#keyboard').keyboard(); }); </script> <script type="text/javascript"> window.onload = function() { var tfrow = document.getElementById('tfhover').rows.length; var tbRow = []; for (var i = 1; i < tfrow; i++) { tbRow[i] = document.getElementById('tfhover').rows[i]; tbRow[i].onmouseover = function() { this.style.backgroundColor = '#ffffff'; }; tbRow[i].onmouseout = function() { this.style.backgroundColor = '#d4e3e5'; }; } }; </script> <title>Login Page</title> </head> <body viewsource="no"> <div id="wrap"> <input id="keyboard" type="text"> </div> </body> </html>
1 answers
solution1
1 2014-10-29 20:19:14
Alright, I got it working by adding the following under the script:
$('#username').focus();
and the naming the input field username as follows:
<div id="wrap"> <input id="keyboard" name='username' type="text"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.