DataTable中的表单提交按钮在IE 11中不起作用(由于DataTable错误) [英] Form submit button in a DataTable not working in IE 11(due to DataTable bug)

问题描述

我在Web应用程序中使用DataTable，但我发现DataTable与带有<button type="submit" formaction="..."></button>的内联表单不兼容.在IE 11中，它无法正常工作；提交不起作用，但是在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和其他现代Web资源管理器中有效，这与我的真实代码相同.

我已经搜索并找到了有关DataTables排序的ppl，即使禁用了该命令，也会删除某些属性并阻止IE正常工作，但是Chrome和FireFox可以在不使用该命令的情况下正常工作.

解决方案

我的一位同事找到了解决方案:将formaction更改为href并在URL后面附加参数，例如

功能:

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}}以区分每一行)

I am using DataTable in a web application and I find that DataTable is not compatible with inline forms with a <button type="submit" formaction="..."></button>. In IE 11 it is not working; submit does not work, but in Chrome 65 and Firefox 59 it is working.

Table is a 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. */
)};

With every line as a form:

<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>
            ...

And at the end of every line, a button like;

<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>

I have created a demo in jsfiddle, however it shows that with DataTable it does not work even in Chrome neither Firefox, but it is not true; in reality it just stops in IE, only tested IE 11. However, if you delete the DataTable definition, it just works in IE and other modern web explorers, which is the same with my real code.

I have searched and find ppl talking about DataTables ordering, even disabled, will delete some attributes and stop IE from working, but Chrome and FireFox can work without it.

解决方案

A colleague of mine found a solution: change the formaction into href and append param after the url, something like what this question states, but with details:

Buttons change type to button and attached with a onclick function:

<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>

The function:

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();
}

(the line form is named formManager{{proc.id}} to distinguish between each row)

这篇关于DataTable中的表单提交按钮在IE 11中不起作用(由于DataTable错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！