AngularJS不能与其他JQuery脚本一起工作
AngularJS doesn't work with another JQuery script
我有一个AngularJS函数，显示我一个隐藏的表单点击按钮。但是，当我添加的功能，填补输入，进入模态窗口，从表的值，我点击按钮，显示我一个表单，它不起作用。显示下一条消息
jquery-2.1.4.min.js:2 Uncaught Error:语法错误，unrecognized expression: #
这是我的JSP页面与脚本。
<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="language"
value="${not empty param.language ? param.language : not empty language ? language : pageContext.request.locale}"
scope="session" />
<fmt:setLocale value="${language}" />
<fmt:setBundle basename="ua.khpi.shapoval.i18n.lang" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="users.anotheruser" /></title>
<link href="<c:url value="/resources/bootstrap/bootstrap.min.css"/>"
rel="stylesheet" type="text/css">
<link
href="<c:url value="/resources/bootstrap/bootstrap-theme.min.css"/>"
rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet"
type="text/css">
<script src="<c:url value="/resources/Jquery/jquery-2.1.4.min.js"/>"
type="text/javascript"></script>
<script src="<c:url value="/resources/angular/angular.min.js"/>"
type="text/javascript"></script>
</head>
<body>
<div id="header">
<%@ include file="/fragments/header.jspf"%>
</div>
<div class="col-md-8 centerBlock">
<table class="table table-hover">
<tr>
<th><fmt:message key="profile.name" /></th>
<th><fmt:message key="profile.surname" /></th>
<th><fmt:message key="profile.login" /></th>
<th><fmt:message key="profile.email" /></th>
<th><fmt:message key="profile.countofcars" /></th>
</tr>
<tr>
<td><c:out value="${user.name}" /></td>
<td><c:out value="${user.surname}" /></td>
<td><c:out value="${user.login}" /></td>
<td><c:out value="${user.email}" /></td>
<td><c:out value="${countOfCars}" /></td>
</tr>
</table>
</div>
<div class="centerBlock text-center col-xs-8 ">
<div ng-app="auto" ng-controller="carController">
<button class="btn btn-primary btn-lg " ng-click="addCarFunc()">
<fmt:message key="cars.addcar" />
</button>
<div ng-show="showForm">
<div class="col-xs-4 centerBlock text-center">
<form action="/Autostation/users" method="POST">
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.model" /> </label> <input
class="form-control input-sm" type="text" id="model"
name="model" required="true" />
</div>
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.type" /> </label> <select
class="form-control input-sm" name="type">
<option value="1"><fmt:message key="cars.mini" /></option>
<option value="2"><fmt:message key="cars.city" /></option>
<option value="3"><fmt:message key="cars.van" /></option>
<option value="4"><fmt:message key="cars.cargo" /></option>
</select>
</div>
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.serviceability" /> </label> <select
class="form-control input-sm" name="serviceability">
<option value="1"><fmt:message key="cars.service.good" /></option>
<option value="2"><fmt:message
key="cars.service.repair" /></option>
<option value="3"><fmt:message key="cars.service.fault" /></option>
</select>
</div>
<input type="hidden" name="command" value="add"> <input
type="hidden" name="login" value="${user.login}">
<button type="submit" class="btn btn-success btn-sm">
<fmt:message key="cars.addcar" />
</button>
</form>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('auto', []);
app.controller('carController', function($scope) {
$scope.showForm = false;
$scope.addCarFunc = function() {
$scope.showForm = !$scope.showForm;
}
});
</script>
<br>
<br>
<div class="col-md-8 centerBlock">
<table class="table table-hover" id="cars">
<tr>
<th>ID</th>
<th><fmt:message key="profile.car.model" /></th>
<th><fmt:message key="profile.car.type" /></th>
<th><fmt:message key="profile.car.serviceability" /></th>
<th>Update</th>
</tr>
<c:forEach items="${cars}" var="car">
<tr>
<td>${car.idCar}</td>
<td><c:out value="${car.model}" /></td>
<td><c:out value="${car.type}" /></td>
<td><c:out value="${car.serviceability}" /></td>
<td><button type="button" class="btn" data-toggle="modal"
id="car${car.idCar}" data-target="#myModal">Launch demo
modal</button></td>
</tr>
</c:forEach>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form method="POST" action="/Autostation/users">
<div class="modal-body">
<input id="val0" type="hidden" name="idCar" />
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.model" /></label> <input
class="form-control input-sm" name="model" id="val1" />
</div>
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.type" /></label> <input class="form-control input-sm"
name="carsType" id="val2" />
</div>
<div class="form-group">
<label class="control-label"><fmt:message
key="profile.car.serviceability" /></label> <input
class="form-control input-sm" name="serviceability" id="val3" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary"></button>
</div>
</form>
</div>
</div>
</div>
<script>
$("button.btn").click(function() {
var id = this.id;
$("table#cars tr").each(function(i) {
if ($(this).find("#" + id).length > 0) {
var tr = $(this).children();
for (var i = 0; i < (tr.length); i++)
$("#val" + i).val(tr[i].innerHTML);
}
});
$("div#myModal").show();
});
</script>
</body>
<script src="<c:url value="/resources/bootstrap/bootstrap.min.js"/>"
type="text/javascript"></script>
</html>
HTML代码从浏览器
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Профиль пользователя.</title>
<link href="/Autostation/resources/bootstrap/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link
href="/Autostation/resources/bootstrap/bootstrap-theme.min.css"
rel="stylesheet" type="text/css">
<link href="/Autostation/resources/css/styles.css" rel="stylesheet"
type="text/css">
<script src="/Autostation/resources/Jquery/jquery-2.1.4.min.js"
type="text/javascript"></script>
<script src="/Autostation/resources/angular/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Автостанция</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/Autostation/profile">Профиль</a></li>
<li><a href="/Autostation/trips">Рейсы</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Администрирование <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/Autostation/register">Добавить нового пользователя</a></li>
<li><a href="/Autostation/userlist">Пользователи</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Autostation/logout">Выйти</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="text-center">
<h2>
Автостанция
</h2>
<img height="100" width="300" alt="Logo" src='/Autostation/resources/logo/carLogo.png'>
</div>
</div>
<div class="col-md-8 centerBlock">
<table class="table table-hover">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Логин</th>
<th>Email</th>
<th>Количество автомобилей</th>
</tr>
<tr>
<td>Serg</td>
<td>Shapoval</td>
<td>acid</td>
<td>acidserg359@gmail.com</td>
<td></td>
</tr>
</table>
</div>
<div class="centerBlock text-center col-xs-8 ">
<div ng-app="auto" ng-controller="carController">
<button class="btn btn-primary btn-lg " ng-click="addCarFunc()">
Добавить автомобиль
</button>
<div ng-show="showForm">
<div class="col-xs-4 centerBlock text-center">
<form action="/Autostation/users" method="POST">
<div class="form-group">
<label class="control-label">Модель </label> <input
class="form-control input-sm" type="text"
name="model" required="true" />
</div>
<div class="form-group">
<label class="control-label">Тип </label> <select
class="form-control input-sm" name="type">
<option value="1">Мини</option>
<option value="2">Городская</option>
<option value="3">Фургон</option>
<option value="4">Грузовая</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Техническое состояние </label> <select
class="form-control input-sm" name="serviceability">
<option value="1">Рабочая</option>
<option value="2">В ремонте</option>
<option value="3">Сломана</option>
</select>
</div>
<input type="hidden" name="command" value="add"> <input
type="hidden" name="login" value="acid">
<button type="submit" class="btn btn-success btn-sm">
Добавить автомобиль
</button>
</form>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('auto', []);
app.controller('carController', function($scope) {
$scope.showForm = false;
$scope.addCarFunc = function() {
$scope.showForm = !$scope.showForm;
}
});
</script>
<br>
<br>
<div class="col-md-8 centerBlock">
<table class="table table-hover" id="cars">
<tr>
<th>ID</th>
<th>Модель</th>
<th>Тип</th>
<th>Техническое состояние</th>
<th>Update</th>
</tr>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form method="POST" action="/Autostation/users">
<div class="modal-body">
<input id="val0" type="hidden" name="idCar" />
<div class="form-group">
<label class="control-label">Модель</label> <input
class="form-control input-sm" name="model" id="val1" />
</div>
<div class="form-group">
<label class="control-label">Тип:</label> <label class="control-label" id="lb1">
</label> <select
class="form-control input-sm" name="type">
<option value="1">Мини</option>
<option value="2">Городская</option>
<option value="3">Фургон</option>
<option value="4">Грузовая</option>
</select>
<input type="hidden" id="val2">
</div>
<div class="form-group">
<label class="control-label">Техническое состояние: </label> <label
class="control-label" id="lb2"></label> <select
class="form-control input-sm" name="serviceability">
<option value=""></option>
<option value="1">Рабочая</option>
<option value="2">В ремонте</option>
<option value="3">Сломана</option>
</select> <input type="hidden" id="val3" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary"></button>
</div>
</form>
</div>
</div>
</div>
<script>
$("button.btn").click(function() {
var id = this.id;
$("table#cars tr").each(function(i) {
if ($(this).find("#" + id).length > 0) {
var tr = $(this).children();
for (var i = 0; i < (tr.length); i++) {
$("#val" + i).val(tr[i].innerHTML);
}
$("label#lb1").text(tr[2].innerHTML);
$("label#lb2").text(tr[3].innerHTML);
}
});
$("div#myModal").show();
});
</script>
</body>
<script src="/Autostation/resources/bootstrap/bootstrap.min.js"
type="text/javascript"></script>
</html>问题在这一行
if ($(this).find("#" + id).length > 0) {
打印的错误是"#"。不知道你在做什么。
但是如果你注释了这个块，你的错误就会消失。
我的意思是代码在JSP, AngularJS和jQuery一起使用的很多层面上都失败了。你可能想要删除AngularJS，或者用Angular的方式重新实现jQuery代码块。
你得到这个错误是因为你的按钮没有ID。因此，如果您尝试这样做:
var id = this.id;
你会得到错误。
对于这种情况，只需为按钮指定一个id值，例如:<button id="anything" type="submit" class="btn btn-success btn-sm">
Добавить автомобиль
</button>
相关文章：
- Javascript-如何让脚本与Ajax请求的数据一起运行
- 注入的元素和jQuery脚本.如何让他们一起工作
- jQuery脚本不想一起工作
- 在应用程序脚本中将 base64 编码的图像与 HtmlService 一起使用
- 如何使用内容脚本将另一个html连同css文件一起注入到html中
- 滚动到不与溢出一起工作的顶部脚本:滚动
- 为什么 AngularJS 不能与多个延迟脚本一起工作
- 如何使用循环 for 与 java 脚本一起检查输入中的值
- 拥有一个简单的浏览器内JS游戏，需要它与后端'Ruby脚本一起工作
- 为什么代码不能与名为jquery 19的脚本一起工作?
- AxWebBrowser在VB.net中如何与java脚本一起工作
- :hover不能与jquery脚本一起工作
- 使两个脚本一起为下拉菜单工作
- 最小化可能与其他脚本一起运行的JavaScript代码是否安全?
- HTML5中的多个相同的元素id -这应该如何与脚本一起工作?
- SuperDevMode不能与嵌套脚本一起工作
- 跟踪聊天窗口事件，我如何让这两个脚本一起工作
- AngularJS不能与其他JQuery脚本一起工作
- 如何让这两个jQuery脚本一起工作?
- 如何使PHP“if”代码在与Java脚本一起使用自动提交时工作
