События происходят только для первого сообщения из нескольких

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

Здравствуйте!

Есть что-то типа форума - на странице выводится несколько сообщений с уникальными id

Код: Выделить всё

<div class="order-block" id="order-<?= $model->id ?>">
В каждом сообщении есть два редактируемых поля

Код: Выделить всё

<div class="col-xs-6">
  <?php $details = TypeDetail::find()->orderBy('typedetail')->all(); ?>
  <?= $form->field($detailadd, 'typedetail')->dropDownList(ArrayHelper::map($details, 'typedetail', function ($details) {return $details->detailname . ' - ' . $details->detailproduct;}), ['id' => 'new-detail-typedetail',]) ?>
</div>

<div class="col-xs-6">
  <?= $form->field($detailadd, 'detailquantity', ['inputOptions'=> ['id' => 'new-detail-detailquantity']]) ?>
</div>
Есть javascript - при обновлении первого поля

Код: Выделить всё

$("#new-detail-typedetail").change(function()
происходит некое вычисление и вычисленное значение присваивается второму полю.

Проблема в том, что скрипт отрабатывает только для первого сообщения, а при обновлении первого поля во втором и последующих сообщениях на странице - ничего не происходит.

Помогите, плиз.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: События происходят только для первого сообщения из нескольких

Сообщение andku83 »

FredSPB писал(а): 2018.02.19, 19:07 ... скрипт отрабатывает ...
а скрипт нам Ванга сообщит или вы хотите чтобы вам его кто-то заново придумал?
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

Сорри, вот скрипт:

Код: Выделить всё

$("#new-detail-typedetail").change(function() {
  var detailprice = "0";
  $("#new-detail-detailprice").val(detailprice);
});
Проблема в том, что этот скрипт вызывается (и нормально отрабатывает) только в том случае, когда он вызывается из первого сообщения на странице
dmg
Сообщения: 685
Зарегистрирован: 2012.10.15, 03:09

Re: События происходят только для первого сообщения из нескольких

Сообщение dmg »

Так события по ID вроде как только для одного элемента срабатывают. ID не должны повторяться.
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

Да, у элементов одинаковый ID, но они находятся в разных блоках, типа

Код: Выделить всё

<div class="order-block" id="order-18025">
,

Код: Выделить всё

<div class="order-block" id="order-18026">
или так нельзя?
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

А как же тогда реализовать такую функцию - при обновлении поля в ответе на одно из сообщений обновить значение другого поля в этом же ответе?
Как я понимаю, в javascript мы пишем функцию $("#new-detail-typedetail").change(function(), которая вызывается при изменении объекта new-detail-typedetail.
Если это не так, подскажите, плиз, как правильно реализовать эту функциональность
dmg
Сообщения: 685
Зарегистрирован: 2012.10.15, 03:09

Re: События происходят только для первого сообщения из нескольких

Сообщение dmg »

Вопрос не имеет отношения к yii. Изучите методы навешивания событий в javasript. Может имеет смысл использовать класс объекта?
Аватара пользователя
proctoleha
Сообщения: 298
Зарегистрирован: 2016.07.10, 19:00

Re: События происходят только для первого сообщения из нескольких

Сообщение proctoleha »

Еще выучите, что такое дерево DOM
Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст»
DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript
Главное понять, что все элементы страницы - это чьи-то родители, дети, соседи. Что document - это иерархическая структура. ID - уникальный идентификатор, class - не уникальный, для похожих эл-тов

В вашем случае, если я правильно понял, вы отслеживаете два связанных эл-та, присвоим им атрибут class, например, эл-т с классом myClass1 и др., с классом myClass2. Обернем каждую пару блоком div с классом, например, myParent. Эл-ты с классами myClass1 и myClass2 - это соседи, в моем примере, и у них общий родитель - блок с классом myParent
И в общем случае решение вашей задачи может выглядеть так:

Код: Выделить всё

$(function () {
    $('.myClass1').change(function () {
        var newValue = 'myValue';
        var myElement = $(this).siblings('.myClass2');
        myElement.val(newValue);
    });
});
Вот за что я не люблю линукс, так это за свои кривые, временами, руки
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

Спасибо за информацию по DOM.
Проблема в том, что эта функция НЕ вызывается при изменении myClass1 второго и последующих сообщений.
При изменении myClass1 в первом сообщении - работают и мои, и ваши построения.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: События происходят только для первого сообщения из нескольких

Сообщение andku83 »

приведите больше вашей структуры хтмл в которой нужно производить изменения, и более точно сформулируйте что должно происходить
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

Есть основная страница order.php, на которой выводятся сообщения:

Код: Выделить всё

    <div class="body-content">
        <?php
            echo \yii\widgets\ListView::widget([
                'dataProvider' => $orderview->search($ordersearch),
                'itemView'     => '_order',
                'layout'       => "{items}\n{summary}\n{pager}",
                'pager'        => [
                    'firstPageLabel' => '<<<',
                    'lastPageLabel'  => '>>>',
                ],
            ]);
        ?>
    </div>
И там же скрипт:

Код: Выделить всё

$("#new-detail-typedetail").change(function() {
  var detailprice = "999";
  $("#new-detail-detailprice").val(detailprice);
});
Каждое из сообщений в _order.php - со своим уникальным идентификатором:

Код: Выделить всё

<div class="order-block" id="order-<?= $model->id ?>">
В каждом из сообщений есть своя форма _detailladd.php для возможности редактирования данных:

Код: Выделить всё

    <div class="order-detail-add-form" style="display: none">
        <?php echo $this->render('_detailadd', ['model' => $model, 'idorder' => $model->id]); ?>
    </div>
В _detailladd.php есть два поля:

Код: Выделить всё

                <div class="col-xs-6">
                    <?php $details = TypeDetail::find()->orderBy('typedetail')->all(); ?>
                    <?= $form->field($detailadd, 'typedetail')->dropDownList(ArrayHelper::map($details, 'typedetail', function ($details) {return $details->detailname . ' - ' . $details->detailproduct;}), ['id' => 'new-detail-typedetail',]) ?>
                </div>

                <div class="col-xs-6">
                    <?= $form->field($detailadd, 'detailprice', ['inputOptions'=> ['id' => 'new-detail-detailprice']]) ?>
                </div>
При изменении значения поля new-detail-typedetail:
- для первого сообщения на странице изменяется значение поля new-detail-detailprice
- для последующих сообщений на странице - значение поля new-detail-detailprice НЕ изменяется
Аватара пользователя
proctoleha
Сообщения: 298
Зарегистрирован: 2016.07.10, 19:00

Re: События происходят только для первого сообщения из нескольких

Сообщение proctoleha »

FredSPB писал(а): 2018.02.20, 16:26 - для последующих сообщений на странице - значение поля new-detail-detailprice НЕ изменяется
И, никогда НЕ ИЗМЕНИТСЯ! Я по русски написал, что атрибут id - это уникальный идентификатор объекта в DOM дереве. Уникальный!!! Вы вешаете событие change на дерево, в котором куча объектов с одинаковым id. И как по вашему js будет следить за событиями? Он найдет первый элемент с нужным id, и повесит событие именно на этот первый элемент. Учим работу с деревом DOM, как правильно обратиться к тому, или иному элементу, или группе эл-тов. Это не yii2.
Вот за что я не люблю линукс, так это за свои кривые, временами, руки
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: События происходят только для первого сообщения из нескольких

Сообщение andku83 »

shnir писал(а): 2018.02.20, 15:47 ... более точно сформулируйте что ДОЛЖНО происходить
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: События происходят только для первого сообщения из нескольких

Сообщение andku83 »

возможно решит вашу проблему:

Код: Выделить всё

$(".order-detail-add-form input[id$='typedetail']").change(function() {
  var detailprice = "0";
  $(this).closest(".order-detail-add-form").find("input[id$='detailprice']").val(detailprice);
});
но как писалось выше, для того чтобы не использовать такие сложные селекторы (input[id$='typedetail']) лучше добавлять классы этим элементам
Последний раз редактировалось andku83 2018.02.20, 20:04, всего редактировалось 1 раз.
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

shnir писал(а): 2018.02.20, 18:24
shnir писал(а): 2018.02.20, 15:47 ... более точно сформулируйте что ДОЛЖНО происходить
значение поля new-detail-detailprice должно изменяться при изменении поля new-detail-typedetail в любом сообщении.
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

proctoleha писал(а): 2018.02.20, 17:12
FredSPB писал(а): 2018.02.20, 16:26 - для последующих сообщений на странице - значение поля new-detail-detailprice НЕ изменяется
И, никогда НЕ ИЗМЕНИТСЯ! Я по русски написал, что атрибут id - это уникальный идентификатор объекта в DOM дереве. Уникальный!!! Вы вешаете событие change на дерево, в котором куча объектов с одинаковым id. И как по вашему js будет следить за событиями? Он найдет первый элемент с нужным id, и повесит событие именно на этот первый элемент. Учим работу с деревом DOM, как правильно обратиться к тому, или иному элементу, или группе эл-тов. Это не yii2.
Я понимаю, что атрибут id - это уникальный идентификатор объекта, и что у меня куча объектов (поля типа и цены) с одинаковым id.
Но они находятся внутри других объектов

Код: Выделить всё

<div class="order-block" id="order-<?= $model->id ?>">
которые как раз все с уникальными id.
Как я думаю, надо смотреть в этом направлении

Код: Выделить всё

var details = $(this).closest(".order-block[id]").find(".new-detail-detailprice");
но у меня такая конструкция не работает.
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

shnir писал(а): 2018.02.20, 18:55 возможно решит вашу проблему:

Код: Выделить всё

$(".order-detail-add-form input[id$='typedetail']").change(function() {
  var detailprice = "0";
  $(this).parents(".order-detail-add-form").find("input[id$='detailprice']").val(detailprice);
});
но как писалось выше, для того чтобы не использовать такие сложные селекторы (input[id$='typedetail']) лучше добавлять классы этим элементам
как раз это я не совсем понимаю - как добавлять классы этим элементам и как этим воспользоваться, сорри :(
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: События происходят только для первого сообщения из нескольких

Сообщение andku83 »

при изменении typedetail должен поменяться только соседний detailprice или все detailprice на странице?
FredSPB
Сообщения: 19
Зарегистрирован: 2017.05.19, 21:32

Re: События происходят только для первого сообщения из нескольких

Сообщение FredSPB »

shnir писал(а): 2018.02.20, 20:07 при изменении typedetail должен поменяться только соседний detailprice или все detailprice на странице?
должен поменяться соседний detailprice (в этом же сообщении)
Ответить