Form Submit Button In A DataTable Not Working In IE 11(due To DataTable Bug)

I am using DataTable in a web application and I find that DataTable is not compatible with inline forms with a . In IE 1

Solution 1:

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)

Solution 2:

You can place your form inside each table data tag like the code below:

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