-1
ボタンをクリックした隠しフォームを表示するAngularJS関数があります。しかし、入力を塗りつぶした関数を表の値からモーダルウィンドウに追加すると、フォームを表示するボタンをクリックしても機能しません。それは私に次のメッセージを表示しますAngularJSは別のJQueryスクリプトでは機能しません
jquery-2.1.4.min.js:2 Uncaught Error: Syntax 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>
UPDATED
HTML CODEブラウザ
<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"
\t rel="stylesheet" type="text/css">
<link
\t href="/Autostation/resources/bootstrap/bootstrap-theme.min.css"
\t rel="stylesheet" type="text/css">
<link href="/Autostation/resources/css/styles.css" rel="stylesheet"
\t type="text/css">
<script src="/Autostation/resources/Jquery/jquery-2.1.4.min.js"
\t type="text/javascript"></script>
<script src="/Autostation/resources/angular/angular.min.js"
\t type="text/javascript"></script>
</head>
<body>
\t <div id="header">
\t \t
<nav class="navbar navbar-default">
\t <div class="container-fluid">
\t \t <!-- Brand and toggle get grouped for better mobile display -->
\t \t <div class="navbar-header">
\t \t \t <button type="button" class="navbar-toggle collapsed"
\t \t \t \t data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
\t \t \t \t aria-expanded="false">
\t \t \t \t <span class="sr-only">Toggle navigation</span> <span
\t \t \t \t \t class="icon-bar"></span> <span class="icon-bar"></span> <span
\t \t \t \t \t class="icon-bar"></span>
\t \t \t </button>
\t \t \t <a class="navbar-brand" href="#"><strong>Автостанция</strong></a>
\t \t </div>
\t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t <div class="collapse navbar-collapse"
\t \t \t id="bs-example-navbar-collapse-1">
\t \t \t <ul class="nav navbar-nav">
\t \t \t \t <li><a href="/Autostation/profile">Профиль</a></li>
\t \t \t \t <li><a href="/Autostation/trips">Рейсы</a></li>
\t \t \t \t
\t \t \t \t \t
<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>
\t \t \t \t
\t \t \t </ul>
\t \t \t <form class="navbar-form navbar-left">
\t \t \t \t <div class="form-group">
\t \t \t \t \t <input type="text" class="form-control" placeholder="Search">
\t \t \t \t </div>
\t \t \t \t <button type="submit" class="btn btn-default">Submit</button>
\t \t \t </form>
\t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t <li><a href="/Autostation/logout">Выйти</a></li>
\t \t \t </ul>
\t \t </div>
\t \t <!-- /.navbar-collapse -->
\t </div>
\t <!-- /.container-fluid -->
</nav>
<div class="text-center">
\t <h2>
\t \t Автостанция
\t </h2>
\t <img height="100" width="300" alt="Logo" src='/Autostation/resources/logo/carLogo.png'>
</div>
\t </div>
\t <div class="col-md-8 centerBlock">
\t \t <table class="table table-hover">
\t \t \t <tr>
\t \t \t \t <th>Имя</th>
\t \t \t \t <th>Фамилия</th>
\t \t \t \t <th>Логин</th>
\t \t \t \t <th>Email</th>
\t \t \t \t <th>Количество автомобилей</th>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>Serg</td>
\t \t \t \t <td>Shapoval</td>
\t \t \t \t <td>acid</td>
\t \t \t \t <td>[email protected]</td>
\t \t \t \t <td></td>
\t \t \t </tr>
\t \t </table>
\t </div>
\t <div class="centerBlock text-center col-xs-8 ">
\t \t <div ng-app="auto" ng-controller="carController">
\t \t \t <button class="btn btn-primary btn-lg " ng-click="addCarFunc()">
\t \t \t \t Добавить автомобиль
\t \t \t </button>
\t \t \t <div ng-show="showForm">
\t \t \t \t <div class="col-xs-4 centerBlock text-center">
\t \t \t \t \t <form action="/Autostation/users" method="POST">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Модель </label> <input
\t \t \t \t \t \t \t \t class="form-control input-sm" type="text"
\t \t \t \t \t \t \t \t name="model" required="true" />
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Тип </label> <select
\t \t \t \t \t \t \t \t class="form-control input-sm" name="type">
\t \t \t \t \t \t \t \t <option value="1">Мини</option>
\t \t \t \t \t \t \t \t <option value="2">Городская</option>
\t \t \t \t \t \t \t \t <option value="3">Фургон</option>
\t \t \t \t \t \t \t \t <option value="4">Грузовая</option>
\t \t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Техническое состояние </label> <select
\t \t \t \t \t \t \t \t class="form-control input-sm" name="serviceability">
\t \t \t \t \t \t \t \t <option value="1">Рабочая</option>
\t \t \t \t \t \t \t \t <option value="2">В ремонте</option>
\t \t \t \t \t \t \t \t <option value="3">Сломана</option>
\t \t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <input type="hidden" name="command" value="add"> <input
\t \t \t \t \t \t \t type="hidden" name="login" value="acid">
\t \t \t \t \t \t <button type="submit" class="btn btn-success btn-sm">
\t \t \t \t \t \t \t Добавить автомобиль
\t \t \t \t \t \t </button>
\t \t \t \t \t </form>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <script>
\t \t var app = angular.module('auto', []);
\t \t app.controller('carController', function($scope) {
\t \t \t $scope.showForm = false;
\t \t \t $scope.addCarFunc = function() {
\t \t \t \t $scope.showForm = !$scope.showForm;
\t \t \t }
\t \t });
\t </script>
\t <br>
\t <br>
\t <div class="col-md-8 centerBlock">
\t \t <table class="table table-hover" id="cars">
\t \t \t <tr>
\t \t \t \t <th>ID</th>
\t \t \t \t <th>Модель</th>
\t \t \t \t <th>Тип</th>
\t \t \t \t <th>Техническое состояние</th>
\t \t \t \t <th>Update</th>
\t \t \t </tr>
\t \t \t
\t \t </table>
\t </div>
\t <!-- Modal -->
\t <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
\t \t aria-labelledby="myModalLabel">
\t \t <div class="modal-dialog" role="document">
\t \t \t <div class="modal-content">
\t \t \t \t <div class="modal-header">
\t \t \t \t \t <button type="button" class="close" data-dismiss="modal"
\t \t \t \t \t \t aria-label="Close">
\t \t \t \t \t \t <span aria-hidden="true">×</span>
\t \t \t \t \t </button>
\t \t \t \t \t <h4 class="modal-title" id="myModalLabel">Modal title</h4>
\t \t \t \t </div>
\t \t \t \t <form method="POST" action="/Autostation/users">
\t \t \t \t \t <div class="modal-body">
\t \t \t \t \t \t <input id="val0" type="hidden" name="idCar" />
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Модель</label> <input
\t \t \t \t \t \t \t \t class="form-control input-sm" name="model" id="val1" />
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Тип:</label> <label class="control-label" id="lb1">
\t \t \t \t \t \t \t </label> <select
\t \t \t \t \t \t \t \t class="form-control input-sm" name="type">
\t \t \t \t \t \t \t \t <option value="1">Мини</option>
\t \t \t \t \t \t \t \t <option value="2">Городская</option>
\t \t \t \t \t \t \t \t <option value="3">Фургон</option>
\t \t \t \t \t \t \t \t <option value="4">Грузовая</option>
\t \t \t \t \t \t \t </select>
\t \t \t \t \t \t \t <input type="hidden" id="val2">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <label class="control-label">Техническое состояние: </label> <label
\t \t \t \t \t \t \t \t class="control-label" id="lb2"></label> <select
\t \t \t \t \t \t \t \t class="form-control input-sm" name="serviceability">
\t \t \t \t \t \t \t \t <option value=""></option>
\t \t \t \t \t \t \t \t <option value="1">Рабочая</option>
\t \t \t \t \t \t \t \t <option value="2">В ремонте</option>
\t \t \t \t \t \t \t \t <option value="3">Сломана</option>
\t \t \t \t \t \t \t </select> <input type="hidden" id="val3" />
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="modal-footer">
\t \t \t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
\t \t \t \t \t \t <button type="submit" class="btn btn-primary"></button>
\t \t \t \t \t </div>
\t \t \t \t </form>
\t \t \t </div>
\t \t </div>
\t </div>
\t <script>
\t \t $("button.btn").click(function() {
\t \t \t var id = this.id;
\t \t \t $("table#cars tr").each(function(i) {
\t \t \t \t if ($(this).find("#" + id).length > 0) {
\t \t \t \t \t var tr = $(this).children();
\t \t \t \t \t for (var i = 0; i < (tr.length); i++) {
\t \t \t \t \t \t $("#val" + i).val(tr[i].innerHTML);
\t \t \t \t \t }
\t \t \t \t \t $("label#lb1").text(tr[2].innerHTML);
\t \t \t \t \t $("label#lb2").text(tr[3].innerHTML);
\t \t \t \t }
\t \t \t });
\t \t \t $("div#myModal").show();
\t \t });
\t </script>
</body>
<script src="/Autostation/resources/bootstrap/bootstrap.min.js"
\t type="text/javascript"></script>
</html>
私はあなたがAngularJSとjQueryを混在させないでください示唆しています。しかし、大きな問題は、AngularJSとJSPの2つの全く異なるテクノロジーを混在させてページを動的にすることです。しかし、AngularJSとjQueryの両方がブラウザで生成されたドキュメントを実行するので、生成されたHTML（ビューソースをクリック）をブラウザに貼り付けることができます。 – bhantol
@bhantol私は何をする必要がありますか？何が問題なの？私がjqueryスクリプトを削除しているときに原因で - すべて正常に動作します –
ブラウザでソースを表示し、JSPを貼り付ける代わりにHTMLを貼り付けます。または、htmlからplnkrを作成すると良いでしょう。 – bhantol