Simon
Simon

Reputation: 23

Getting fetch is undefined in internet explorer 11?

I am coming to an issue where my code below, says that 'fetch' is undefined in internet explorer 11. I am using the latest jquery which is jquery-3.3.1.min.js and I even tried $.ajax instead of fetch but that did not work. Can anyone help me solve this issue, with my code below. That it can even work in ie11. thank you very much!

Here is my code:

"use strict";

$(function () {
    var myData = [];


    $.get("#{request.contextPath}/JobSearchItem.xhtml", function (data) {

        $("#searchTextField").autocomplete({
            minLength: 2,
            source: myData,
            select: function select(event, ui) {
                event.preventDefault();
                var url = '#{request.contextPath}/index.xhtml';
                var searchValue = ui.item.value;
                var data = new FormData();
                data.append('searchValue', searchValue);
                fetch(url, {
                    body: data,
                    method: "post"
                }).then(function (res) {
                    return res.text();
                }).then(function (text) {
                    $('#results').append($(text).find('#textTable'));
                    $('#results').append($(text).find('table'));
                    $('#results').append($(text).find('#bestTable'));
                    $("#clearone").show();
                });
            },
            response: function response(event, ui) {
                if (!ui.content.length) {
                    var message = { value: "", label: "NO SEARCH RESULT FOUND" };
                    ui.content.push(message);
                }
            }

        });


        $.each(data, function (k, v) {
            myData.push({
                id: v.id,
                label: v.label,
                value: v.id

            });
        });
    });


    $("#sJobClass").change(function () {
        var jobClassCd = $(this).val();
        if (jobClassCd !== 0) {
            var url = '#{request.contextPath}/index.xhtml';
            var searchValue = $('#sJobClass').val();
            var data = new FormData();
            data.append('searchValue', searchValue);
             fetch(url, {
                body: data,
                method: "post"
            }).then(function (res) {
                return res.text();
            }).then(function (text) {
                $('#results').append($(text).find('#textTable'));
                $('#results').append($(text).find('table'));
                $('#results').append($(text).find('#bestTable'));
                $("#clearone").show();
            });
        };
    });


});

Upvotes: 2

Views: 9186

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 371049

Although if you're already using jQuery, it would make sense to use jQuery's built-in request functions like $.get, if you want to use fetch without changing your code, one option is to simply include a polyfill for fetch: add the following

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch"></script>

(or some other polyfill script which includes Fetch) to your HTML.

Upvotes: 7

Icehorn
Icehorn

Reputation: 1347

fetch is not supported by Internet Explorer.

For more info on what browsers support it: https://caniuse.com/#feat=fetch

Upvotes: 1

Related Questions