Динамический модальный контент с несколькими переменными - PullRequest
Новая
       23

Динамический модальный контент с несколькими переменными

0 голосов
/ 30 мая 2019

Я понимаю, что об этом уже спрашивали несколько способов, но за свою жизнь я не могу найти тот, который похож на мою проблему .... Я адаптировал «распознанный» код в документации для показа динамического контента в модальном режиме следующим образом.

Вытаскиваю волосы и уверен, что просто делаю что-то глупое .......

HTML для звонка 

                                <div class="row">
                                    <?php $option=array_column($options, 'name', 'id');?>
                                    <div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
                                    <div class="col-7 col-md-6 col-lg-4">
                                        <a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
                                            <?php echo $option[$vesseldata['Engine1Type']];?>
                                        </a>
                                    </div>
                                    <div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
                                </div>

Тогда скрипт просто встроен в страницу, чтобы попытаться упростить жизнь. 

                <script>
                        $('#Engine2Modal').on('show.bs.modal', function (event) {
                          var trigger = $(event.relatedTarget); // Button that triggered the modal
                          var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
                          var thing2 = trigger.data('thing2'); // Extract info from data-* attributes
                          // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                          // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                          var modal = $(this);
                          modal.find('.modal-title').text(thing1 + '<br>Serial # ' + thing2);
                          });
                                      </script>

Тогда модальный HTML здесь 

<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog"  aria-labelledby="ModalLabel" aria-hidden="true">
    <form id="service_form"  method="get">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
                            <div class="col-xs-8  col-md-7">
                            <input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
                            <?php if(!empty($registration_error['DesignRef'])) { ?>
                                    <br/>
                                    <div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
                            <?php } ?>
                            </div>
                        </div>
                    </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </form>
</div>

1 Ответ

0 голосов
/ 30 мая 2019

Наконец нашел его ......

Нашел статью, в которой объясняется, что текстовый метод на самом деле не тот, который нужно использовать, если вы хотите разобрать HTML.И на самом деле в jQuery есть метод HTML ...: -) 

                        modal.find('.modal-title1').html(item);

работает.

...