AngularJS不适用于其他JQuery脚本

时间：2016-08-27 22:54:37

标签： javascript jquery angularjs jsp

我有一个AngularJS函数，它向我显示一个隐藏的表单，点击按钮。但是当我添加填充输入的函数，进入模态窗口，从表的值，我点击按钮，向我显示一个表单，它不起作用。它向我显示了下一条消息

  

jquery-2.1.4.min.js：2未捕获错误：语法错误，无法识别的表达式：＃

这是我的带有脚本的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">&times;</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">&times;</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>

2 个答案:

答案 0 :(得分：0)

问题在于

if ($(this).find("#" + id).length > 0) {

它正在打印的错误是'＃'。不确定你要做什么。

但是如果你评论这个阻止你的错误就会消失。

我的意思是代码失败的程度如JSP，AngularJS和jQuery一起使用。您可能想要删除AngularJS或以Angular方式重新实现该jQuery代码块。

答案 1 :(得分：0)

您收到错误，因为您的按钮没有ID。因此，如果您尝试执行以下操作：

var id = this.id;

你会收到错误。

就此而言，只需为您的按钮分配 id 值，例如：

<button id="anything" type="submit" class="btn btn-success btn-sm">
                            Добавить автомобиль
</button>
相关问题
最新问题