TL; DR - все работает достаточно хорошо, ЗА ИСКЛЮЧЕНИЕМ для обновления фрейма корзины в конце. Даже window.location.reload(true);, который, как я думал, заставил перезагрузить всю страницу, не работает, но нажатие F5 будет.
Мой вопрос, в конечном счете, связан с тем же вопросом, представленным в в этом вопросе . Для DataTables требуется действительный HTML, поэтому <form> должно быть дочерним по отношению к <td>. Я пытаюсь найти решение javascript, чтобы формы в каждой строке работали в IE и более старых Edge, которые не поддерживают form attribute для входных данных вне тегов <form>, как показано в этой репрезентативной строке dataTables (это обычно показывает 25 одновременно):
<table>
<tr>
<td></td>
<td>
<form id="101110" name="form" method="post" action="Cart.cfm" target="cart_frame">
<input name="ItemID" type="hidden" id="ItemID" value="101110">
<input title="Click to add to cart" name="Submit" type="submit" class="buttons" value="101110">
<input name="Qty" type="hidden" value="">
<input name="Brand" type="hidden" value="">
<input name="Pack" type="hidden" value="113">
<input name="UOM" type="hidden" value="CS">
</form>
</td>
<td><input form="101110" title="Type number and ENTER to add to cart" name="Qty" type="text" id="Qty" value="" size="1" maxlength="4"></td>
<td><input form="101110" name="Broken" type="checkbox" id="Broken"></td>
<td>MY AWESOME WIDGET #115</td>
<td></td>
<td>115</td>
<td>48.50</td>
<td> </td>
<td>0.52</td>
</tr>
</table>
Я придумала уродливое решение javascript для перехвата отправки, поиска двух других входных данных и добавления их данных по мере необходимости, отправки XMLHttpRequest и перезагрузки страницы. Однако, несмотря на то, что верный responseText возвращается и отправляется на cart_frame, рамка покажется пустой, пока я не нажму F5. Вот мой источник:
document.addEventListener('submit', function(e) {
// disable the normal form submit handler
e.preventDefault();
// store reference to form
const form = e.target;
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
// convert form elements into an array of URL-encoded key/value pairs.
for (var i = 0, element; element = form.elements[i++];) {
urlEncodedDataPairs.push(encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value));
};
/*
*** FIND THE QTY AND BROKEN INPUTS AND ADD TO ABOVE ARRAY
*** IF TABLE STRUCTURE CHANGES IT WILL BREAK THIS!!!
*/
// get the NEXT td element of the form's parent node
var tdSib1 = form.parentNode.nextElementSibling;
// get child element (Qty)
var input1 = tdSib1.firstElementChild;
urlEncodedDataPairs.push(encodeURIComponent(input1.name) + '=' + encodeURIComponent(input1.value));
// get the child of the NEXT td (Broken)
var input2 = tdSib1.nextElementSibling.firstElementChild;
//console.log(input2.name + '=' + input2.checked);
if (input2.checked) {
urlEncodedDataPairs.push(encodeURIComponent(input2.name) + '=on');
}
// convert array into a single string and replace all %-encoded spaces to
// the '+' character; matches the behaviour of browser form submissions.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
console.log(urlEncodedData);
XHR.addEventListener('load', function(event) {
// success
if (XHR.readyState === XHR.DONE) {
if (XHR.status === 200) {
var destframe = parent.document.getElementsByName('cart_frame')[0];
destframe.src = XHR.responseText;
//console.log(XHR.responseText);
//destframe.contentWindow.location.reload(true); //did not work either
// what do I need to get cart to refresh properly???
window.location.reload(true);
}
}
});
XHR.addEventListener('error', function(event) {
alert('Oops! Something went wrong.');
});
// Set up our request
XHR.open('POST', form.action);
// Add the required HTTP header for form data POST requests
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XHR.send(urlEncodedData);
});
Как заставить принудительно обновить iframe корзины, чтобы он показывал обновленный responseText? Если по какой-то причине это имеет значение, то этот iframe находится в скрытом <div> в то время, когда корзина обновляется в фоновом режиме, и просто отображает обновленное количество элементов на кнопке на главной странице, которая изменяет div показаны и скрыты, чтобы показать корзину, когда они готовы к оформлению заказа.
В качестве альтернативы, есть ли лучший способ выполнить отправку формы в одной строке dataTables в IE? Я знаю, что не могу изменить структуру HTML таблицы и формы, и она должна поддерживаться в IE 11. Я перенесу свой источник в свою собственную функцию, чтобы он также мог запускаться при нажатии Enter в элементе Qty input.