Bootstrap collapse - передать значение или получить объект DOM - PullRequest
Новая
       6

Bootstrap collapse - передать значение или получить объект DOM

0 голосов
/ 21 сентября 2018

Используя bootstrap, я работаю с функцией свернуть, чтобы свернуть мою таблицу вроде , как это .Я подключаюсь к свернутому js следующим образом: 

<script type="text/javascript">
$('#demo1').on('shown.bs.collapse', function () {
    that = $(this);
    $.ajax({
        url:'{{ (path('orders')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "id": "1"
                },
                async: true,
                success: function (data)
                {
                    console.log(data)
                    $('div#demo1').html('<img src="data:image/png;base64,' + data.output + '" />');
                }
            });
            return false;

        });
    </script>

Как я могу передать значение этой функции или получить имя элемента dom, который ее передал (то есть #demo1)?В основном мне нужно передать значение для передачи в качестве значения идентификатора ajax POST.

Я не могу статически отобразить значения, так как я просто генерирую строки на основе возврата из базы данных.Веточка 

        {% for x in search%}
            <tr data-toggle="collapse" data-target="#demo{{ loop.index }}" class="accordion-toggle">
                <th>{{ x.id}}</th>
            <tr>
                <td colspan="5" class="hiddenRow">
                    <div class="accordian-body collapse" id="demo{{ loop.index }}">
                        Demo{{ loop.index }} data
                    </div>
                </td>
            </tr>
        {% endfor %}

В основном, как указано выше, мне нужен доступ к x.id, чтобы перейти к начальной загрузке jQuery

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

На всякий случай, если кто-то захочет увидеть конечный код (основываясь на ответе Дэвида Ляна), чтобы узнать, как это сделать ...

веточка: 

    {% for x in search%}
        <tr data-toggle="collapse" data-target="#demo{{ loop.index }}" class="accordion-toggle">
            <th>{{ x.id}}</th>
        <tr>
            <td colspan="5" class="hiddenRow">
               <div class="accordian-body collapse" id="demo{{ loop.index }}" data-index="{{ x.id }}">
                    Loading...
               </div>
            </td>
        </tr>
    {% endfor %}

script: 

<script type="text/javascript">
$('.accordian-body.collapse').on('shown.bs.collapse', function (e) {
    let $collapsedTarget = $(e.target),
        record_id = $collapsedTarget.attr('data-index');
    $.ajax({
        url:'{{ (path('orders')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "id": record_id.toString()
                },
                async: true,
                success: function (data)
                {
                    console.log('Record ID: ' + record_id);
                    console.log(data)
                    $(e.target).html('<img src="data:image/png;base64,' + data.output + '" />');
                }
            });
            return false;    
        });
</script>

и он заменит «Загрузка ...» тем, что вы положили в .html () (в моем случае тег img).

0 голосов
/ 21 сентября 2018

Если вы нацелены на несколько свертываний, вы должны использовать селектор класса вместо селектора идентификатора: 

$(function(){
    $('.accordian-body.collapse').on('show.bs.collapse', function(e) {
        ...
    });
});

Вы можете получить свернутый идентификатор элемента DOM из e.target.id.

// If using your example:
//   if you click on 1st row you will get:
demo1
//   if you click on 2nd row you will get:
demo2
//   if you click on 3rd row you will get:
demo3

Если у вас есть больше данных, которые вам нужно получить, кроме идентификатора, вы можете связать данные, используя data-, когда вы создаете свой HTML, а затем jQuery на целиВозьмите объект и перейдите оттуда:

HTML 

<div class="accordian-body collapse" id="demo{{ loop.index }}" 
    data-index="{{ loop.index }}">
    Demo{{ loop.index }} data
</div>

JavaScript 

$('.accordian-body.collapse').on('show.bs.collapse', function(e) {
    let $collapsedTarget = $(e.target),
        index = $collapsedTarget.data('index');
});

Я не уверен, ответил я на ваш вопрос или нет, так как ваш вопрос не являетсямне тоже понятно.

0 голосов
/ 21 сентября 2018

Это не ясный вопрос, так как ответ зависит ...

Это должно быть легко, в Javascript вы устанавливаете переменную вне функции и объявляете ее так, чтобы она была глобальной.Т.е. 

<script>let variable;</script>

или 

<script>let variable = 0;</script>

или 

<script>let variable = 'word';</script>

Затем, может ли жесткий код изменить его или изменить его посредством ввода формы или выбора элемента, как он естьglobal это будет доступно в вашей функции как переменная.

Вы можете попробовать что-то вроде этого: 

{% for x in search <script>let variable=x;</script> %}
...