Кнопка отправки формы в DataTable не работает в IE 11 (из-за ошибки DataTable)

Я использую DataTable в веб-приложении и обнаружил, что DataTable несовместим со встроенными формами с <button type="submit" formaction="..."></button>. В IE 11 не работает; submit не работает, но в Chrome 65 и Firefox 59 работает.

Таблица представляет собой DataTable:

$('#dataTable-script').DataTable({
    "scrollX": true,                            /* horizontal scroll */
    "responsive": false,                        /* turn this OFF to enable scrollX. Conflict. */
    "columnDefs": [
        { "visible": true, "targets": [0, 1, 2, 3, 4] }, /* always show 5 columns */
        { "orderable": false, "targets": [9] }  /* the last column not sortable */
    ],
    "order": [
        [ 6, 'desc' ]                           /* initial ordering */
    ],
    "searching": true,                          /* enable searching/filtering; nothing to do with show/hide search input */
    /* dom elements manipulation */
    /* f: filter(search input); l: combobox of each page size, _T_ble, _I_nformation, _P_agination, p_R_ocessing-element. */
    "dom": "<'row'<'col-md-7 col-lg-9 col-sm-4'l><'col-md-4 col-lg-3 col-sm-5'f>>" + /* 'l' and 'f' on the same line */
           "<'row'<'col-md-12't>>" +             /* table with correct margin */
           "<'row'<'col-md-7 col-lg-9 col-sm-4'i><'col-md-4 col-lg-3 col-sm-5 pull-right'p>>" + /* 'i' and 'p' on the same line */
           "r", 
    "processing": true, /* indicate "processing..." when doing time-consuming task. Related to 'dom':'r': without 'r' it is hidden. */
)};

С каждой строкой как формой:

<tbody>
    {% for script in scripts %}
    <tr class="odd gradeX">
        <form enctype="multipart/form-data" method="post" id="formManager{{script.id}}">
            {% csrf_token %}
            <input type='hidden' name='scriptID' value='{{script.id}}' />
            <td>{{script.name}}</td>
            <td>{{script.category.name}}</td>
            <td>{{script.platform.name}}</td>
            ...

И в конце каждой строки кнопка вроде;

<button type="submit" formaction="{% url 'deleteScript' %}"
    onclick="return confirm()"
    class="btn btn-danger btn-circle" title="Delete script">
    <i class="fa fa-times"></i>
</button>

Я создал демонстрацию в jsfiddle, однако она показывает, что с DataTable она не работает даже в Chrome. ни Firefox, но это неправда; на самом деле он просто останавливается в IE, протестирован только в IE 11. Однако, если вы удалите определение DataTable, оно просто работает в IE и других современных веб-обозревателях, что то же самое с моим реальным кодом.

Я искал и обнаружил, что люди, говорящие о DataTables упорядочении, даже отключенном, удалят некоторые атрибуты и перестанут работать IE, но Chrome и FireFox могут работать без него.


javascript html jquery datatables
person WesternGun    schedule 28.03.2018    source источник
comment
Сделайте кнопку стандартной кнопкой и при нажатии создайте data самостоятельно, прежде чем отправлять ее на целевой URL-адрес с помощью ajax.   -  person Nope    schedule 28.03.2018
comment
Но тогда я должен сам сделать перенаправление. У меня есть несколько кнопок «Редактировать сценарий» и «Копировать сценарий», которые извлекают данные из базы данных, отображают новую страницу с данными и перенаправляют пользователя на другую страницу.   -  person WesternGun    schedule 28.03.2018
comment
Вы все еще можете выполнить отправку формы вне курса. Вы просто делаете это вручную. Глядя на ваш ответ, вы все равно это сделали, так что все хорошо.   -  person Nope    schedule 28.03.2018
comment
Что меня удивляет, так это то, что DataTable изменит таблицу и предотвратит поведение по умолчанию ... я думаю, это своеобразный угловой случай.   -  person WesternGun    schedule 28.03.2018
comment
DataTables не изменяет таблицу. Для этого требуется допустимый HTML-код, а тег form не может быть дочерним по отношению к тегу table или tr, поскольку вы его закодировали. Тег form должен быть либо родителем тега table, либо дочерним элементом тега td. На самом деле другой респондент в ссылка вы включили в свой ответ то же самое.   -  person topshot    schedule 03.04.2019

Ответы (2)


arrow_upward
0
arrow_downward

Мой коллега нашел решение: изменить formaction на href и добавить параметр после URL-адреса, что-то вроде этого в этом вопросе говорится, но с подробностями:

Кнопки меняют тип на button и присоединяются к функции onclick:

<button type="button" url="{% url 'copyProcess' %}" onClick="copyIE(this,{{proc.id}})" class="btn btn-success btn-circle"><i class="fa fa-clone" title="RELOAD PROCESS"></i></button>

Функция:

function copyIE(elem,indent){

  var url = $(elem).attr("url");
  formManager='#formManager'+indent;
  csrfValue=$("input[name=csrfmiddlewaretoken]").val()
  $(formManager).attr("action", url);
  /* get the hidden input's value, construct another input element, and append to the form */
  $('<input>').attr({
    type: 'hidden',
    id: 'id',
    name: 'id',
    value: indent
  }).appendTo(formManager);

  /* get the csrf token, construct another input element, and append to the form */
  $('<input>').attr({
    type: 'hidden',
    id: 'csrfmiddlewaretoken',
    name: 'csrfmiddlewaretoken',
    value: csrfValue
  }).appendTo(formManager);

  $(formManager).submit();
}

(форма строки называется formManager{{proc.id}}, чтобы различать каждую строку)

person WesternGun    schedule 28.03.2018

arrow_upward
0
arrow_downward

Вы можете разместить свою форму внутри каждого тега данных таблицы, как показано ниже:

    <table id="example1" class="table table-bordered table-hover table-head-fixed">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Unit Name</th>
                        <th scope="col">Accommodation Type</th>
                        <th scope="col">House Keeping</th>
                        <th scope="col">Type ID</th>
                        <th scope="col">Unit ID</th>
                        <th scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for unit in units %}
                        <input type="hidden" value="{{ dates_details.checkindate }}" name="checkindate">
                        <input type="hidden" value="{{ dates_details.checkoutdate }}" name="checkoutdate">
                        <input type="hidden" value="{{ dates_details.no_of_nights }}" name="no_of_nights">
                        <tr>
                            <td scope="row">{{ forloop.counter }}</td>
                            <td><input value="{{ unit.unit_name }}" type="hidden"
                                       name="unit_name">{{ unit.unit_name }}</td>
                            <td><input value="{{ unit.accommodation_type_name }}" type="hidden"
                                       name="accommodation_type_name">{{ unit.accommodation_type_name }}
                            </td>
                            <td><input value="{{ unit.house_keeping }}" type="hidden"
                                       name="house_keeping">{{ unit.house_keeping }}</td>
                            <td><input value="{{ unit.accommodation_type_id }}" type="hidden"
                                       name="accommodation_type_id">{{ unit.accommodation_type_id }}
                            </td>
                            <td><input value="{{ unit.id }}" type="hidden"
                                       name="unit_id">{{ unit.id }}
                            </td>
                            <td>
                                <form method="post" action="customer_booking_details">
                                    {% csrf_token %}
                                    <input type="hidden" value="{{ dates_details.checkindate }}" name="checkindate">
                                    <input type="hidden" value="{{ dates_details.checkoutdate }}"
                                           name="checkoutdate">
                                    <input type="hidden" value="{{ dates_details.no_of_nights }}"
                                           name="no_of_nights">
                                    <input value="{{ unit.unit_name }}" type="hidden"
                                           name="unit_name">
                                    <input value="{{ unit.accommodation_type_name }}" type="hidden"
                                           name="accommodation_type_name">
                                    <input value="{{ unit.house_keeping }}" type="hidden"
                                           name="house_keeping">
                                    <input value="{{ unit.accommodation_type_id }}" type="hidden"
                                           name="accommodation_type_id">
                                    <input value="{{ unit.id }}" type="hidden"
                                           name="unit_id">
                                    <button type="submit"
                                            class="btn btn-outline-primary btn-sm m-1 float-md-left"><i
                                            class="fas fa-step-forward mr-2"></i>SELECT
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% empty %}
                        <div class="alert alert-default-info" role="alert">
                            No Units available at the moment
                        </div>
                    {% endfor %}
                    </tbody>
                </table>
person Munyiri Tom    schedule 16.01.2020