Spring MVC, JSP

@asics · Регистрация: 09.09.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Есть следующая ситуация: есть jsp страница создания issue

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="/">Bugtracker</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <sec:authorize access="hasRole('ROLE_ADMIN')">
                    <li><a href="#">Admin page</a></li>
                </sec:authorize>
                <li><a href="/about">About</a></li>
                <sec:authorize access="isAuthenticated()">
                    <li><a href="/auth/logout">Logout</a></li>
                </sec:authorize>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>
 
<div class="formAdd">
    <div class = "container">
        <div class="col-sm-6">
            <h1 class="header">Create a new issue</h1>
            <sf:form cssClass="form-horizontal" method = "post" action="/issue/create" modelAttribute = "dto">
 
            <div class="form-group">
                <nobr><label>Project</label></nobr>
                <c:if test="${!empty userProjects}">
                    <sf:select path="projectId" cssClass="selectpicker">
                        <c:forEach items="${userProjects}" var="project">
                            <sf:option value="${project.id}">${project.nameOfTheProject}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty userProjects}">
                    There are no projects
                </c:if>
            </div>
 
            <div class="form-group">
                <nobr><label for="title">Title for issue</label></nobr>
                <input type="text" class="form-control" id="title" name="title" placeholder="Title for issue">
            </div>
 
            <div class="form-group">
                <nobr><label>Description</label></nobr>
                <textarea style="height: 150px;" class="form-control" id="description" name="description" placeholder="Description"></textarea>
            </div>
 
            <div class="form-group">
                <nobr><label>Priority</label></nobr>
                <c:if test="${!empty listOfPriority}">
                    <sf:select path="priority" cssClass="selectpicker" items="${listOfPriority}">
                    </sf:select>
                </c:if>
            </div>
 
            <div class="form-group">
                <nobr><label>Who will fix the issue?</label></nobr>
                <c:if test="${!empty project.usersInTheCurrentProject}">
                    <sf:select path="fixerId" cssClass="selectpicker">
                        <c:forEach items="${project.usersInTheCurrentProject}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty project.usersInTheCurrentProject}">
                    There are no users
                </c:if>
            </div>
 
            <div class="form-group">
                <button type="submit" class="btn btn-success">Submit</button>
                </sf:form>
            </div>
        </div>
    </div>
</div>
<link href="<c:url value="/resources/css/registration.css" />" rel="stylesheet"  property=""/>
 
</body>

в этом куске

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
                <nobr><label>Project</label></nobr>
                <c:if test="${!empty userProjects}">
                    <sf:select path="projectId" cssClass="selectpicker">
                        <c:forEach items="${userProjects}" var="project">
                            <sf:option value="${project.id}">${project.nameOfTheProject}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty userProjects}">
                    There are no projects
                </c:if>
            </div>

я выбираю в селекте проект, к которому должна относиться issue. Дальше мне нужно на той же самой странице сдесь

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
                <nobr><label>Who will fix the issue?</label></nobr>
                <c:if test="${!empty project.usersInTheCurrentProject}">
                    <sf:select path="fixerId" cssClass="selectpicker">
                        <c:forEach items="${project.usersInTheCurrentProject}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty project.usersInTheCurrentProject}">
                    There are no users
                </c:if>
            </div>

какм-то образом получить сам выбраный ранние проект, что бы я смог достать из него юзеров в даном проекте, как такое реализовать? Спасибо.

@asics · 01.05.2016, 19:00 **[ТС]**

ап.

Любопытный · 01.05.2016, 19:10

Насколько я понял, Вы хотите после выбора в первом селекте получить дополнительные данные от сервера(без перезагрузки страницы), основанные на этом выборе?
Если да, то смотрите Ajax

@asics · 01.05.2016, 19:15 **[ТС]**

Любопытный, возможно и з перезагрузкой. Да, я понимаю, что нужно юзнуть ajax, но просто не понимаю как это хотя б примерно должно выглядить.

Добавлено через 1 минуту
Любопытный, я пробовал как-то так с перезагрузкой сделать,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
                <p><label>Project</label></p>
                <c:if test="${!empty userProjects}">
                    <sf:select path="projectId" cssClass="selectpicker">
                        <c:forEach items="${userProjects}" var="project">
                            <sf:option value="${project.id}"><a href="/issue/create/project/${project.id}">${project.nameOfTheProject}</a></sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty userProjects}">
                    There are no projects
                </c:if>
            </div>

но не работает, не отсылаеться гет запрос при выборе.

Любопытный · 01.05.2016, 19:27

asics, можно написать отдельный jsp с этим элементом(селектом),
после запроса jsp заполняете соответствующими данными на сервере, возвращаете ответом с сервера.
При успешном приеме в ajax заменяете старый селект на свежепринятые данные средствами JS.
Выйдет что то вроде

JavaScript
1
2
3
4
5
6
$.ajax({
  url: "someurl",
  success: function(data){
    $(".MySelectId").replaceWith(data);
  }
});

@asics · 01.05.2016, 20:34 **[ТС]**

Любопытный, а на стороне сервера мои какие действия?

Любопытный · 01.05.2016, 20:42

asics, такие же как при обработке обычного запроса. Приняли запрос, обработали входной параметр,
сделали нужные выборки из базы, на основе их заполнили шаблон jsp и отправили обратно.
Вся разница только в том как клиент ответ принимает.

@asics · 01.05.2016, 20:46 **[ТС]**

Любопытный, я не могу понять, как этим кодом

JavaScript
1
2
3
4
5
6
$.ajax({
  url: "someurl",
  success: function(data){
    $(".MySelectId").replaceWith(data);
  }
});

связать эти два селекта, то есть на пример, someurl это гет запрос на сервер? как описать data ? .MySelectId это айди селекта первого или уже второго?

Любопытный · 01.05.2016, 21:02

Сообщение от asics

я не могу понять, как этим кодом связать эти два селекта

Этот код должен выполняться, когда юзер изменяет состояние первого селекта. http://htmlbook.ru/html/attr/onchange

Сообщение от asics

someurl это гет запрос на сервер

Да

Сообщение от asics

как описать data

Не нужно описывать, в эту переменную запишутся те данные, которые пришли с сервера

Сообщение от asics

.MySelectId это айди селекта первого или уже второго?

Второго. Вы его заменяете теми данными, которые пришли с сервера, тоесть, заполненым новым селектом.

@asics · 01.05.2016, 21:11 **[ТС]**

Любопытный, а дополнительно как-то сам контроллер не нужно изменять? я просто вроде гуглил, то там есть свои фишки в обработке ajax запросов?
у меня он сейчас выгляди так

Кликните здесь для просмотра всего текста

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@Controller
public class CreateIssueController
{
    @Autowired
    UserService userService;
 
    @Autowired
    ProjectService projectService;
 
    @Autowired
    IssueService issueService;
 
    @RequestMapping(value = "/issue/create/project/{id}", method = RequestMethod.GET)
    public ModelAndView createIssueGet(Map<String, Object> map, @PathVariable("id") Integer id)
    {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        User currentUser = userService.getUser(auth.getName());
 
        Project selectedProject = projectService.getProject(id);
 
        map.put("dto", new IssueDto());
        map.put("userProjects", currentUser.getUserProjects());
        map.put("listOfPriority", new ArrayList<>(Arrays.asList(PriorityOfTheIssue.values())));
        map.put("listOfUsers", selectedProject.getUsersInTheCurrentProject());
 
        return new ModelAndView("issue-create-page");
    }
 
    @RequestMapping(value = "/issue/create", method = RequestMethod.POST)
    public ModelAndView createIssuePost(@ModelAttribute(value = "dto") IssueDto dto)
    {
        User fixer, tester;
        Project project = projectService.getProject(dto.getProjectId());
        fixer = userService.getUser(dto.getFixerId());
        tester = userService.getUser(dto.getTesterId());
 
        EmailSender emailSender = new EmailSender();
 
        Issue issue = new Issue();
        issue.setTitleOfIssue(dto.getTitle());
        issue.setDescription(dto.getDescription());
        issue.setPriority(PriorityOfTheIssue.valueOf(dto.getPriority()));
        issue.setProjectOfTheIssue(project);
        issue.setFixerOfTheIssue(fixer);
        issue.setTesterOfTheIssue(tester);
 
        project.getIssuesSet().add(issue);
        fixer.getIssuesToFix().add(issue);
        tester.getIssuesToTest().add(issue);
 
        /*emailSender.send("Issue Tracker", "You have been assigned to issue <" + issue.getTitleOfIssue() + "> as fixer",
                fixer.getEmail());
        emailSender.send("Issue Tracker", "You have been assigned to issue <" + issue.getTitleOfIssue() + "> as tester",
                tester.getEmail());*/
 
        issueService.createIssue(issue);
 
        return new ModelAndView("redirect:/profile");
    }
}

Любопытный · 01.05.2016, 21:17

Он будет обрабатывать ajax запрос как и обычный любой запрос, ничего не нужно менять, пишете новый маппинг для urn ajax-запроса, и обрабатываете.

@asics · 01.05.2016, 21:25 **[ТС]**

Любопытный, я правильно написал?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    $('#selectForProject').change(function ()
    {
        $.ajax(
                {
                    url: "/issue/create/project/{id}",
                    success: function (data)
                    {
                        $('.selectForUsers').replaceWith(data);
                    }
                }
        )
    });

Любопытный · 01.05.2016, 21:30

asics, да, не забудьте jquery добавить на эту страницу.

@asics · 01.05.2016, 21:41 **[ТС]**

Любопытный, Да, jquery есть, так как такой код страбатывает

JavaScript
1
2
3
$('#myForm').one('submit', function() {
        $(this).find('button[type="submit"]').attr('disabled','disabled');
    });

но ajax запрос не обратываеться почему-то, + еще пичет ворнинг Unused property success
весь код страницы

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
 
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
 
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="/">Bugtracker</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <sec:authorize access="hasRole('ROLE_ADMIN')">
                    <li><a href="#">Admin page</a></li>
                </sec:authorize>
                <li><a href="/about">About</a></li>
                <sec:authorize access="isAuthenticated()">
                    <li><a href="/auth/logout">Logout</a></li>
                </sec:authorize>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>
 
<div class="formAdd">
    <div class = "container">
        <div class="col-sm-6">
            <h1 class="header">Create a new issue</h1>
            <sf:form id="myForm" cssClass="form-horizontal" method = "post" action="/issue/create" modelAttribute = "dto">
 
            <div class="form-group">
                <p><label>Project</label></p>
                <c:if test="${!empty userProjects}">
                    <sf:select id="selectForProject" path="projectId" cssClass="selectpicker">
                        <c:forEach items="${userProjects}" var="project">
                            <sf:option value="${project.id}">${project.nameOfTheProject}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty userProjects}">
                    There are no projects
                </c:if>
            </div>
 
            <div class="form-group">
                <nobr><label for="title">Title for issue</label></nobr>
                <input type="text" class="form-control" id="title" name="title" placeholder="Title for issue">
            </div>
 
            <div class="form-group">
                <nobr><label>Description</label></nobr>
                <textarea style="height: 150px;" class="form-control" id="description" name="description" placeholder="Description"></textarea>
            </div>
 
            <div class="form-group">
                <p><label>Priority</label></p>
                <c:if test="${!empty listOfPriority}">
                    <sf:select id="selectForUsers" path="priority" cssClass="selectpicker" items="${listOfPriority}">
                    </sf:select>
                </c:if>
            </div>
 
            <div class="form-group">
                <p><label>Who will fix the issue?</label></p>
                <c:if test="${!empty listOfUsers}">
                    <sf:select id="selectForUsers" path="fixerId" cssClass="selectpicker">
                        <c:forEach items="${listOfUsers}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty listOfUsers}">
                    There are no users
                </c:if>
            </div>
 
            <div class="form-group">
                <p><label>Who will verify the issue os fixed?</label></p>
                <c:if test="${!empty listOfUsers}">
                    <sf:select path="testerId" cssClass="selectpicker">
                        <c:forEach items="${listOfUsers}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty listOfUsers}">
                    There are no users
                </c:if>
            </div>
 
            <div class="form-group">
                <button type="submit" class="btn btn-success btn-lg">Submit</button>
                </sf:form>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    $('#myForm').one('submit', function() {
        $(this).find('button[type="submit"]').attr('disabled','disabled');
    });
 
    $('#selectForProject').change(function ()
    {
        $.ajax(
                {
                    url: "/issue/create/project/{id}",
                    success: function (data)
                    {
                        $('.selectForUsers').replaceWith(data);
                    }
                }
        )
    });
</script>
<link href="<c:url value="/resources/css/registration.css" />" rel="stylesheet"  property=""/>
 
</body>
</html>

Любопытный · 01.05.2016, 21:52

Сообщение от asics

url: "/issue/create/project/{id}"

Вместо {id} запишите туда id выбранного элемента

Например

JavaScript
1
url: "/issue/create/project/" + $('#selectForProject').val()

Правда я не помню, .val() для селекта вернет ключ или значение, если что - погуглите.

Добавлено через 1 минуту
Ну и JS лучше вынести в отдельный файл.

@asics · 07.05.2016, 12:37 **[ТС]**

Любопытный, я так понимаю, что в ответ на ajax запрос, я должен возвращать не целую страницу, как у меня прописано сейчас в контроллере, а только страницу с теми селектами, которые я хочу асинхронно подменить, так?

Добавлено через 35 минут
Сделал так: issue-create-page.jsp

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
 
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
 
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="/">Bugtracker</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">${currentUser.firstName} ${currentUser.lastName}</a></li>
            </ul>
 
            <ul class="nav navbar-nav navbar-right">
                <sec:authorize access="hasRole('ROLE_ADMIN')">
                    <li><a href="#">Admin page</a></li>
                </sec:authorize>
                <li><a href="/about">About</a></li>
                <sec:authorize access="isAuthenticated()">
                    <li><a href="/auth/logout">Logout</a></li>
                </sec:authorize>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>
 
<div class="formAdd">
    <div class = "container">
        <div class="col-sm-6">
            <h1 class="header">Create a new issue</h1>
            <sf:form id="myForm" cssClass="form-horizontal" method = "post" action="/issue/create" modelAttribute = "dto">
 
            <div class="form-group">
                <p><label>Project</label></p>
                <c:if test="${!empty userProjects}">
                    <sf:select id="selectForProject" path="projectId" cssClass="selectpicker">
                        <c:forEach items="${userProjects}" var="project">
                            <sf:option value="${project.id}">${project.nameOfTheProject}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty userProjects}">
                    There are no projects
                </c:if>
            </div>
 
            <div class="form-group">
                <nobr><label for="title">Title for issue</label></nobr>
                <input type="text" class="form-control" id="title" name="title" placeholder="Title for issue">
            </div>
 
            <div class="form-group">
                <nobr><label>Description</label></nobr>
                <textarea style="height: 150px;" class="form-control" id="description" name="description" placeholder="Description"></textarea>
            </div>
 
            <div class="form-group">
                <p><label>Priority</label></p>
                <c:if test="${!empty listOfPriority}">
                    <sf:select path="priority" cssClass="selectpicker" items="${listOfPriority}">
                    </sf:select>
                </c:if>
            </div>
 
            <div class="form-group">
                <p><label>Who will fix the issue?</label></p>
                <c:if test="${!empty listOfUsers}">
                    <sf:select id="selectForUsers" path="fixerId" cssClass="selectpicker">
                        <c:forEach items="${listOfUsers}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty listOfUsers}">
                    There are no users
                </c:if>
            </div>
 
            <div class="form-group">
                <p><label>Who will verify the issue is fixed?</label></p>
                <c:if test="${!empty listOfUsers}">
                    <sf:select path="testerId" cssClass="selectpicker">
                        <c:forEach items="${listOfUsers}" var="user">
                            <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
                        </c:forEach>
                    </sf:select>
                </c:if>
                <c:if test="${empty listOfUsers}">
                    There are no users
                </c:if>
            </div>
 
            <div class="form-group">
                <button type="submit" class="btn btn-success btn-lg">Submit</button>
                </sf:form>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    $('#myForm').one('submit', function() {
        $(this).find('button[type="submit"]').attr('disabled','disabled');
    });
 
    // get all measurement and replace elemId with it
    function getData(elemId, url) {
        $.get(url, function (data) {
            $(elemId).replaceWith(data);
        });
    }
    function selectProject(selectId, replaceId, url) {
        $(selectId).change(function () {
            getData(replaceId, url);
        });
    }
    $(document).ready(function () {
        // bind handlers
        selectProject("#selectForProject", "#selectForUsers", "/issue/create/project/" + $("#selectForProject").val());
    });
</script>
<link href="<c:url value="/resources/css/registration.css" />" rel="stylesheet"  property=""/>
 
</body>
</html>

select-page.jsp

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<div class="form-group">
  <p><label>Who will fix the issue?</label></p>
  <c:if test="${!empty listOfUsers}">
    <sf:select id="selectForUsers" path="fixerId" cssClass="selectpicker">
      <c:forEach items="${listOfUsers}" var="user">
        <sf:option value="${user.id}">${user.firstName} ${user.lastName}</sf:option>
      </c:forEach>
    </sf:select>
  </c:if>
  <c:if test="${empty listOfUsers}">
    There are no users
  </c:if>
</div>
</body>
</html>

контроллер

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping(value = "/issue/create/project/{id}", method = RequestMethod.GET)
    public ModelAndView createIssueGet(@PathVariable("id") Integer id)
    {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        User currentUser = userService.getUser(auth.getName());
 
        Project selectedProject = projectService.getProject(id);
 
        ModelAndView modelAndView = new ModelAndView("select-page");
 
        modelAndView.addObject("listOfUsers", selectedProject.getUsersInTheCurrentProject());
 
        return modelAndView;
    }

но работает не корректно, почему то не заменяет селект а просто добавляет еще один

Любопытный · 07.05.2016, 20:50

Запостите отдельно функцию js с отправкой запроса и изменением элемента.

@asics · 07.05.2016, 20:53 **[ТС]**

Любопытный,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getData(elemId, url) {
        $.get(url, function (data) {
            $(elemId).replaceWith(data);
        });
    }
    function selectProject(selectId, replaceId, url) {
        $(selectId).change(function () {
            getData(replaceId, url);
        });
    }
    $(document).ready(function () {
        // bind handlers
        selectProject("#selectForProject", "#selectForUsers", "/issue/create/project/" + $("#selectForProject").val());
    });

так?

@asics · 07.05.2016, 20:57 **[ТС]**

Любопытный, сейчас оно работает так(картинка), не реплейсит селект, да и data з контроллера не получает.

Любопытный · 07.05.2016, 22:40

Сообщение от asics

да и data з контроллера не получает

Если добавляется новый селект - то от сервера какие то данные точно приходят. Может не те, что Вы планировали, но тут уже вопрос к Вашей реализации.

Насколько я понимаю, Вы при загрузке страницы вызываете функцию, передаете в нее текущее состояние селекта.
Эта функция биндит триггер на ивент change, с этими параметрами.
И при каждом изменении состояния вызывается эта функция с изначальными параметрами.

Добавлено через 4 минуты
В общем уберите

Сообщение от asics

$(document).ready(function () {
* * * * // bind handlers
* * * * selectProject("#selectForProject", "#selectForUsers", "/issue/create/project/" + $("#selectForProject").val());
* * });

В jsp на селекте напишите onchange с вызовом в нем функции.
В функции составляйте url в зависимости от текущего состояния селекта.

В итоге функцию представляю себе примерно в таком виде:

JavaScript
1
2
3
4
5
6
function changeUserSelect() {
url = "/issue/create/project/" + $("#selectForProject").val());
$.get(url, function (data) {
            $(#selectForUsers).replaceWith(data);
        });
    }

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@asics Freelance 2891 / 1826 / 356 Регистрация: 09.09.2010 Сообщений: 3,841
	01.05.2016, 19:00 [ТС]
	ап. 0

Любопытный 149 / 162 / 48 Регистрация: 19.10.2012 Сообщений: 530
	01.05.2016, 19:10
	Насколько я понял, Вы хотите после выбора в первом селекте получить дополнительные данные от сервера(без перезагрузки страницы), основанные на этом выборе? Если да, то смотрите Ajax 1

@asics Freelance 2891 / 1826 / 356 Регистрация: 09.09.2010 Сообщений: 3,841
	01.05.2016, 20:34 [ТС]
	Любопытный, а на стороне сервера мои какие действия? 0

Любопытный 149 / 162 / 48 Регистрация: 19.10.2012 Сообщений: 530
	01.05.2016, 20:42
	asics, такие же как при обработке обычного запроса. Приняли запрос, обработали входной параметр, сделали нужные выборки из базы, на основе их заполнили шаблон jsp и отправили обратно. Вся разница только в том как клиент ответ принимает. 1

Любопытный 149 / 162 / 48 Регистрация: 19.10.2012 Сообщений: 530
	01.05.2016, 21:17
	Он будет обрабатывать ajax запрос как и обычный любой запрос, ничего не нужно менять, пишете новый маппинг для urn ajax-запроса, и обрабатываете. 1

Любопытный 149 / 162 / 48 Регистрация: 19.10.2012 Сообщений: 530
	01.05.2016, 21:30
	asics, да, не забудьте jquery добавить на эту страницу. 1

Любопытный 149 / 162 / 48 Регистрация: 19.10.2012 Сообщений: 530
	07.05.2016, 20:50
	Запостите отдельно функцию js с отправкой запроса и изменением элемента. 1

@asics Freelance 2891 / 1826 / 356 Регистрация: 09.09.2010 Сообщений: 3,841
	07.05.2016, 20:57 [ТС]
	Любопытный, сейчас оно работает так(картинка), не реплейсит селект, да и data з контроллера не получает. Изображения 0