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:

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

The function:

functioncopyIE(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:

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