Question

我在按钮上有一个功能和一个点击事件。该函数将数据从xmlhttprequest写入容器。这在页面重新加载时有效，因此似乎没有任何问题。

然后我有一个按钮将数据（也通过xmlhttprequest）写入某个DB。在成功发布时，正在调用上述功能。然后，这应该再次使用完整数据集填充容器。

这是功能

var refreshSearchCriteriaStorage = function () {
    var container = document.getElementById('search_storage_list');

    if (container === null) {
        return;
    }

    var request = new XMLHttpRequest();

    request.open('GET', '/wp-content/plugins/oshcr/run-ajax.php?call=search-criteria-listing', true);
    request.onload = function() {
        container.style.display = 'none';
        container.style.overflow.y = 'scroll';

        if (request.status >= 200 && request.status < 400) {
            var data = JSON.parse(request.responseText);

            if (data.count === undefined || data.storage === undefined) {
                container.innerHTML = '<li>Error fetching criteria. Please try reloading the site.</li>';
                container.style.display = 'block';

                return;
            }

            container.innerHTML = '';

            data.storage.forEach(function(entry) {
                container.insertAdjacentHTML(
                    'beforeend',
                    '<li><a href="/search-results/?' + entry.query + '">' + entry.title + '</a></li>'
                );
            });

            if (data.storage.length < 1) {
                container.innerHTML = '<li>You have no saved search criteria yet.</li>';
            }

            container.style.display = 'block';
        } else {
            if (debugMode) {
                console.log(response);
            }

            container.innerHTML = '<li>Error fetching criteria. Please try reloading the site.</li>';
            container.style.display = 'block';
        }

        container.style.display = 'block';
    };
    request.onerror = function() {
        if (debugMode) {
            console.debug(response);
        }

        container.innerHTML = '<li>Error fetching criteria. Please try reloading the site.</li>';
        container.style.display = 'block';
    };
    request.send();
};

这是按钮点击事件

/**
 * Save Search Criteria
 */
$('#save_search_criteria').on('click', function (e) {
    e.preventDefault();

    var criteriaTitle = $('#search_criteria_title').val();

    if (criteriaTitle === undefined || criteriaTitle.trim() === '') {
        alert("Please input a title for this search criteria\nThis way you will be able to quickly find your results again.");

        return false;
    }

    var request = new XMLHttpRequest();
    request.open('POST', '/wp-content/plugins/oshcr/run-ajax.php?call=save-search-criteria', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            if (debugMode) {
                console.debug(request.response);
            }

            document.getElementById('search_criteria_title').innerHTML = '';

            refreshSearchCriteriaStorage();

            var data = JSON.parse(request.responseText);

            if (data.message !== undefined) {
                alert(data.message);
            }
        } else {
            if (debugMode) {
                console.debug(request.response);
            }
        }
    };
    request.onerror = function() {
        if (debugMode) {
            console.debug(request.response);
        }
    };

    request.send(
           'title=' + criteriaTitle
        + '&query=' + $('#searchResultsForm').serialize()
    );
});

在初始页面重新加载时，只需通过

调用该函数

refreshSearchCriteriaStorage();

现在，当我单击按钮时，数据已成功写入后端。但是refreshSearchCriteriaStorage()似乎没有被调用。没有其他请求被触发，容器的内容也没有改变。

这只发生在IE / Edge中。我真的迷失了。所以任何意见都表示赞赏。

您可能会争辩说我应该通过JS动态追加列表，但结果会重新排序。所以它是一种懒惰的东西 - 它对我来说仍然没有意义，虽然它只在Microshit浏览器中不起作用，而其他所有人都会这样做。

JS Part不在IE / Edge上运行

0 个答案: