Question posted in
You can find the official documentation here.

error with jQuery AJAX on Safari and iOS devices

I have a compatibility issue with Safari and all iOS devices. I created this jQuery code (see the link below ) for a project but I don’t understand why it doesn’t work with Safari.
With the Chrome, Firefox, Android it works well.

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
    e.preventDefault();
    
    $(this).find('.frm_message').addClass('d-none');

      var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
      //console.log(url);
      location.href = url;
    });
})(jQuery);

This is the error that I getting from the DevConsole:

enter image description here

Unhandled Promise Rejection [object Object]
  (anonymous function) - scripts.js:21
  asyncFunctionResume
  (anonymous function)
  promiseReactionJobWithoutPromise

How I can fix it? some idea?

Thanks!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This is the whole snippet:

    (function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/'; 
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);

  var closestForm = $('.service-location-form').closest('form');

  closestForm.submit(async function (e) {
    e.preventDefault();
    e.stopImmediatePropagation(); // <-- I fixed my issue with it

    $(this).find('.frm_message').addClass('d-none');

    var form = $(this).serializeArray();
    var service = form.find((x) => x['name'] == `item_meta[33]`).value;
    var loc = form.find((x) => x['name'] == `item_meta[34]`).value;
    var cat = loc + ',' + service;
    try {
      var posts = await $.ajax({
        type: 'post',
        async: true, // true was a string
        url: ajax_dir + 'posts-by-cat.php',
        dataType: 'json',
        data: {
          post_type: 'services',
          cat: cat,
        },
      });
    } catch (safariError) {
      console.error(safariError);
    }

    var url = await $.ajax({
      type: 'post',
      async: true, // also was 'true'
      url: ajax_dir + 'post-link-id.php',
      dataType: 'json',
      data: {
        id: posts[0],
      },
    });

    //console.log(url);
    location.href = url;
  });
})(jQuery);

  2. 0

    Currently, your code doesn’t have any error catching blocks.

    Try to insert the function content into the try/catch block

    (function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
      e.preventDefault();

      try {

        $(this).find('.frm_message').addClass('d-none');

        var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
        //console.log(url);
        location.href = url;
      } catch(err) {
        console.log(err);
        // Handle error here. - maybe ajax fail
      }
    });
})(jQuery);
    Login or Signup to reply.
  3. 0 
    return false;

    Try using a return false statement after ajax call

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search