Всплывающее окно и содержимое в каждой строке таблицы

Question

Исходный код

<tbody id="table">
                            @foreach($services as $service)
                                    <tr>
                                        <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
                                          @if($service->brand != '')
                                            <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
                                          @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>@lang('general.package_id')</th>
                                        <th>@lang('general.name')</th>
                                        <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
                                        <th>@lang('general.minimum_quantity')</th>
                                        <th>@lang('general.maximum_quantity')</th>
                                        <th>@lang('general.description')</th>
                                    </tr>
                                    @foreach($packages as $package)
                                        @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
                                        <tr>
                                            <td>{{ $package->id }}</td>
                                            <td>{{ $package->name }}</td>
                                            <td>
                                                @php
                                                    $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
                                                @endphp
                                                {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
                                            </td>
                                            <td>{{ $package->minimum_quantity }}</td>
                                            <td>{{ $package->maximum_quantity }}</td>
                                            <td style="white-space: pre-line">{{ $package->description }}</td>

                                        </tr>



                                        @endif
                                    @endforeach
                            @endforeach
                        </tbody>

Я пытался заменить "{{$ package-> description}}" на кнопку, чтобы отобразить содержимое в новом всплывающем окне, используя это .

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" 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>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>

Но я получаю одно и то же содержимое на каждой кнопке, но содержимое должно быть разным, потому что каждая строка получила название службы + описание. Это описание должно отличаться во всплывающем окне.

Answer 1

Проблема может быть вызвана вашими модальными идентификаторами. Поскольку все ваши модальные окна имеют идентификатор exampleModalCenter, ваша кнопка, вероятно, открывает только первый из них, который может найти (поскольку идентификаторы должны быть уникальными). Если вы должны динамически изменить свой модальный-идентификатор и соответствующую цель-кнопку

Пример с добавлением вашего идентификатора пакета:

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter-{{ $package->id }}">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter-{{ $package->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" 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>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>