Question

TL; DR -除了可以使购物车iframe最终刷新之外，其他所有功能都可以正常运行。甚至我认为强制重新加载整个页面的window.location.reload(true);也不起作用，但是按F5即可。

我的问题最终源于this question中提出的同一问题。 DataTables需要有效的HTML，因此<form>必须是<td>的子代。我正在尝试找到一个JavaScript解决方案，以便每一行的表单都可以在不支持form attribute标记的<form>的IE和较旧的Edge中工作，如下面的代表行所示。 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>&nbsp;</td>
        <td>0.52</td>
    </tr>
</table>

我想出了一个难看的javascript解决方案，用于拦截提交，查找其他2个输入并根据需要添加其数据，提交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会发生变化，以显示购物车。

或者，有没有更好的方法可以在IE中的dataTables的单行上提交表单？我知道我无法更改表格/表单HTML结构，并且必须在IE 11中支持它。

Answer 1

事实证明，我对DOM的了解还不够。更改

window.location.reload(true);

到

window.top.location.reload();

是重新加载整个页面所需的全部。：/

或者，这种方法也可以不必重新加载所有内容，而这正是我选择要做的。

destframe.src="cart.cfm";

dataTables表单无法在Internet Explorer中正确提交

1 个答案: