Как получить конкретный элемент цикла?

Question

[Kirill_mont]

Короче говоря, я сейчас пытаюсь работать с jstl, у меня есть цикл foreach, который создаёт карточки товара по шаблону: Имя, цена, время подачи, кнопка Add to cart. Так вот, при нажатии кнопки информация о товаре записывается в лист для дальнейшей обработки, но сейчас я могу получить таким образом только 1-й элемент. Вопрос следующий, как получить тот элемент, на карточке которого была нажата кнопка? Например, 5й.

Читал про varStatus, но не очень понял как его применить.

<section>
    <form action="Controller" method="post">
    <sql:query dataSource = "${snapshot}" var = "result">
        SELECT * from menu where category='alcohol';
    </sql:query>
    <c:forEach var = "row" items = "${result.rows}">
        <div class="product-item">
            <div class="product-list">
                <h3><c:out value = "${row.name}"/> per bottle</h3>
                <input type="hidden" name="name" value="${row.name}"/>
                <span class="price">Price: $<c:out value = "${row.price}"/> </span>
                <input type="hidden" name="price" value="price">
                <span class="time">Filing time: <c:out value = "${row.time}"/>min</span>
                <input type="hidden" name="command" value="addtocart" />
                <input type="submit" class="button" value="Add to cart">
            </div>
        </div>
    </c:forEach>
    </form>
</section>

Answer 1

[Орхан Гасанлы]

После того, как шаблон был создан при помощи шаблонизатора и отдан клиенту, Java, jsp и т.д не играли роли. Дальше средствами js вы можете получить элемент, который был кликнут и I'd элементы например,при помощи ajax передать в бекэнд. Для этого нужны знания Javascript. Возможно, применение jquery

Comments

[Kirill_mont]

Спасибо за ответ!
UPD. Я смог получить нужные мне элементы по нажатию,

<script>
$(document).on('click', 'a[class^="button"]', function(e) {
e.preventDefault();
alert('You added item to cart ' + e.target.name);
});
</script>

Теперь вопрос такой, как то, что я получил передать не в alert, а в list, например? Мне нужно их передать в сервлет..

[Орхан Гасанлы]

Kirill_mont,

Мне нужно при клике по кнопке получать имя элемента.

Обычно, для отправки используют не имя, а идентификатор элемента (идентификатор товара, статьи и т.д.)

1) Добавьте в свой проект библиотеку jQuery - https://jquery.com/

2) Преобразуйте этот блок:
<div class="product-list">
Таким образом:
<div class="product-list" data-id="${row.id}"">
Обратите внимание, что я добавил дата атрибут data-id и у текущего элемента row получаю id товара. row.id может у вас отличаться например, row.productId и т.д. Подставьте свой вариант.

3) Дальше нужно написать js-код для кнопки, чтобы при нажатии у текущего элемента извлекался id и он отправлялся на сервер.
Вот, теги кнопки

<input type="submit" class="button" value="Add to cart">

А вот, селектор кнопки:
.product-list .button
Теперь, вот, примерный js-код

// Отлавливаем клик по кнопке
$('.product-item .button').on('click', function(event){

	event.preventDefault();

	var productId = 
	$(this)
	.parent() // находим родительский элемент по кнопке, на которой был произведен клик
	.data('id'); // у род. элемента находим дата атрибут id (data-id)


	/* 
		Тут уже дальше нужно дописать то, что вы хотите сделать после того, как кнопка была нажата.
		Например, можно пользователя перенаправить на страницу корзины или оформить заказ и отправить
		запрос на сервер
	*/

});

https://api.jquery.com/event.preventdefault/
https://api.jquery.com/data/
https://api.jquery.com/parent/
Если все же решите отправить именно имя вместо id, то соответственно, в дата атрибуте выведите имя и при клике получайте имя продукта по аналогии с указанным выше сниппетом

Если хотите отправить ajax запрос на сервер с id выбранного товара, то прочитайте:
https://api.jquery.com/jquery.ajax/
https://api.jquery.com/jquery.get/
https://api.jquery.com/jquery.post/

Т.е. для начала нужно решить, что должно происходить по нажатию кнопки Add to Cart после того, как имя или идентификатор текущего товара был получен. Т.е. нужно ли оформить заказ или добавить товар в корзину и т.д.

В backend должен быть контроллер, который обработает GET || POST запрос и примет идентификатор товара.

[Орхан Гасанлы]

Kirill_mont,

Теперь вопрос такой, как то, что я получил передать не в alert, а в list, например? Мне нужно их передать в сервлет..

Обычно, если речь идет об ИМ, то выбранные пользователем товары можно записывать в localStorage
https://www.w3schools.com/jsref/prop_win_localstor...
Т.е. некий массив с id товаров.

Далее по нажатию кнопки "Оформить заказ" массив с id отправляется в backend, а затем заказ обрабатывается соответствующим образом.

[Kirill_mont]

Орхан Гасанлы,
Огромное вам спасибо за помощь, без вас я бы точно не справился! Пойду воплощать в жизнь идеи:)

[Орхан Гасанлы]

Kirill_mont, рад помочь

Answer 2

[Kirill_mont]

Решил проблему не используя JS, не знаю, как я раньше не додумался, все нужные парамертры можно передать по ссылке, например:

<a href="Controller?command=addtocart&name=${row.name}&price=${row.price}&time=${row.time}" class="button">Add to cart</a>

Где

&name=${row.name}&price=${row.price}&time=${row.time}

И есть параметры, которые будут переданы в сервлет.

Comments

[Орхан Гасанлы]

Да, можно GET запросом тоже передать. Хорошее решение