jQuery script doesn't work properly in IE

Question

There is a jQuery script on my website with additional JS code.

Example:

$("[data-type='phone'] .input .form-control").intlTelInput({

  allowDropdown: true,
  autoPlaceholder: "aggressive",
  initialCountry: "auto",
  geoIpLookup: function(success, failure) {
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      success(countryCode);
    });
  },
});

let targets = document.querySelectorAll('.selected-flag'),
  options = {
    'attributes': true
  },
  observationHandler = function(mutations, observer) {
    for (let mutation of mutations) {
      let target = mutation.target,
        recipient = target.closest('div.fields').querySelector('[data-type="hidden"] input');
          recipient.value = target.title;
    }
  },
  observer = new MutationObserver(observationHandler);
  
  targets.forEach(
    (target) => observer.observe(target, options)
  );

.field {
  padding: 10px 0;
}

.form-control {
  padding: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css">
<h2>Main form on page</h2>
<div class="fields">
  <div class="field" data-type="phone" style="width: 247px;">
    <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div>
  </div>
  <div class="field" data-type="hidden" style="width: 247px;">
    <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div>
  </div>
</div>

<!-- MODAL FORM 1 -->
<h2>Modal form 1</h2>
<div class="modal-body">
  <div class="macros-form">
    <div class="outer">
      <div class="inner">
        <div class="vertical none size-default">
          <div class="body">
            <div class="cont"></div>
            <form class="form text-top" data-form=""
              data-fields="">
              <div class="fields">
                <div class="field" data-type="phone">
                  <div class="name">Telefonnummer</div>
                  <div class="input"><input class="form-control text" style="border-radius: 4px;"></div>
                  </div>
                <div class="field hidden" data-type="hidden">
                  <div class="input"><input class="form-control hidden-field" value="Hidden field"></div>
                </div>
              </div>
            </form>
            <div class="cont"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- MODAL FORM 2 -->
<h2>Modal form 2</h2>
<div class="modal-body">
  <div class="macros-form">
    <div class="outer">
      <div class="inner">
        <div class="vertical none size-default">
          <div class="body">
            <div class="cont"></div>
            <form class="form text-top" data-form=""
              data-fields="">
              <div class="fields">
                <div class="field" data-type="phone">
                  <div class="name">Telefonnummer</div>
                  <div class="input"><input class="form-control text" style="border-radius: 4px;"></div>
                  </div>
                <div class="field hidden" data-type="hidden">
                  <div class="input"><input class="form-control hidden-field" value="Hidden field"></div>
                </div>
              </div>
              <div class="macros-button">
                <div class="btn-out full xs-none">
                </div>
              </div>
            </form>
            <div class="cont"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script>

Example: https://jsfiddle.net/kerm131/at5sL2jc/12/

It works fine in Google Chrome, Opera, Edge and Mozilla browsers. But unfortunately, it doesn't work with IE 11.

Console shows that ";" expected near this strings:

observationHandler = function(mutations, observer) {
    for (let mutation of mutations) {
      let target = mutation.target,

I don't know JS well, so I'm frustrated. Please, give me a hint to to solve this issue.

I tried Babel service, but it doesn't works well in IE11: https://jsfiddle.net/kerm131/xpvt214o/984507/

In this case console says that object doesn't support property or method "forEach" in

targets.forEach(function (target) {
  return observer.observe(target, options);
});

IE11 doesn’t support ES6 features, like [arrow functions](https://caniuse.com/#feat=arrow-functions) etc. Do you babelfy your code before running it in IE11? — insertusernamehere, Dec 06 '18 at 07:04
See also https://stackoverflow.com/questions/2356830/what-browsers-currently-support-javascripts-let-keyword — Igal S., Dec 06 '18 at 07:07
Besides arrow functions, IE10 doesn't support `let` and `MutationObserver` either. — Asons, Dec 06 '18 at 07:54
@LGSon Thank you! I will be fully satisfied if it work in IE11 — Anton, Dec 06 '18 at 08:06
With your edit error, change `targets.forEach(function (target) {...});` to a `for` loop... — Asons, Dec 06 '18 at 08:09
... e.g. `for (var i = 0; i < targets.length; i++) { return observer.observe(targets[i], options);}` — Asons, Dec 06 '18 at 08:10
@LGSon could you check syntax, please. Something wrong https://jsfiddle.net/kerm131/8m24a0kt/ — Anton, Dec 06 '18 at 08:20
@Anton The last `});` in your script shouldn't be there ... and if you check the console error, it shows that. If you use the dev.tools provided in most browsers, it will save you a lot of time, not to mention spending time to write questions. — Asons, Dec 06 '18 at 08:23
@LGSon I'm sorry. Thank you for you patiece. Unfortunately, it still doesn't work properly. Console shows error "The instruction 'return' outside the function". And as you can see - https://jsfiddle.net/kerm131/8m24a0kt/2/ 2nd and 3rd forms don't get value with country and code. — Anton, Dec 06 '18 at 08:35
@Anton I don't have time to debug all your code, follow my previous recommendation or post/edit your question to narrow the issue down. — Asons, Dec 06 '18 at 08:41

score 0 · Answer 1 · answered Dec 06 '18 at 14:28

To make it works I add polyfill library:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

And change this:

targets.forEach(function (target) {
  return observer.observe(target, options);
});

to this:

[].forEach.call(targets, function (target) {
  return observer.observe(target, options);
});

(but I think it not necessary, first try without changing this string)

jQuery script doesn't work properly in IE

1 Answers1

Linked