jQuery Ajax not working in iOS (with list.js)

Question

Found a feature that's not working on our website — but only on iOS devices (iPad, iPhone).

We're using list.js to do a live filtering of a directory based on what's typed in an input. There are also two select fields that allow for filtering based on taxonomies. These work fine.

The live-filtering feature works in Chrome, Firefox, Safari, IE and Android. I'm not sure where to go next for debugging, as we've done the following to no avail:

Checked to ensure no upper/lowercase file names and/or paths that could trip up iOS.
Added a console.log to the ajax code to make sure it's firing on iOS (it is; verified by Web Inspector via Safari).
Checked for errors or warnings via Web Inspector (no errors, no warnings, nothing).

Here's the code from our main.js file:

    var listingsArray;

    $.ajax({
        url: php_ajax_url,
        type: "POST",
        data: "action=sackville_directory_feed",
        async: false,
        success: function(results) {
            var listings = JSON.parse(results);
            listingsArray = $.map(listings, function(el) { 
              return el; 
            });
        },
        error: function() {
            console.log('Cannot retrieve data.');
        }
    });

    var directory = {};
    var directoryListings = $('.list');

    directory.renderHTML = function(z, listing){
      directoryListings.append('<div class="card card-directory col-lg-3 col-md-4 col-sm-6"><div class="directory-image" style="background-image: url(' + listing.image + ')"></div><h3 class="name">' + listing.name + '</h3><p class="description">' + listing.description + '</p><span>' + ( listing.address !== '' ? listing.address + ', ' : '') + ( listing.city_province !== '' ? listing.city_province : '') + ( listing.postal !== '' ? ', ' + listing.postal : '' ) + '</span><span>' + listing.phone + (listing.website !== '' ? ' | <a href="' + listing.website +  '">Visit Website</a>' : '') + '</span></div>');
    };

    directory.init = function(){
      directoryListings.empty();
      $.each(listingsArray, function(i, listing){
        directory.renderHTML(i, listing);
      });
    }; 

    $('.directory-filters').on('change', function(){
      var option = $(this).val();
      var label = $(this).find('option:selected').text();
      directoryListings.empty();

      if(option === 'all'){
        directory.init();
      }

      $.each(listingsArray, function(i, listing){
        if(listing.hasOwnProperty('category') && listing.category.indexOf(option) >= 0){ /* If category filter is contained within listing data */
          directory.renderHTML(i, listing);
        } else if(listing.hasOwnProperty('theme') && listing.theme.indexOf(option) >= 0){ /* If theme filter is contained within listing data */
          directory.renderHTML(i, listing);
        }
      });

      $('#current-results').html(label);
    });

    /* Get it started */
    directory.init();

    /* List JS live search */
    directory.options = {
      valueNames: [ 'name', 'description', 'category' ]
    };

    directory.directoryList = new List('directory', directory.options);

  }

It's a WordPress site using the Sage starter theme, and that php_ajax_url bit above references the following in the functions.php:

function assets() {
    wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);

    $ajax_url = admin_url( 'admin-ajax.php' );

    wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_localize_script( 'sage/js', 'php_ajax_url', $ajax_url );
    }
    add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

I'm new to all things Ajax, and would love some guidance about where to go next. Or, do you see anything obviously wrong?

Try using a relative path instead of an absolute path in your url. — user5563910
– user5563910, Commented Apr 11, 2016 at 14:14
Bruno is referring to the admin_url function in your assets function. The admin_url returns an absolute path not relative. I'm not sure if that will fix your issue, but that is what he is suggesting you try. — Patrick Lyver
– Patrick Lyver, Commented Apr 14, 2016 at 4:06
Do you have a URL to the website in question that you can share? — Patrick Lyver
– Patrick Lyver, Commented Apr 14, 2016 at 4:10
Doesn't it work at all or works sometime only? One doubt is multiple AJAX calls as you are not cancelling previously running AJAX. iOS safari allows only signle HTTP connection at a time. — Ronak Patel
– Ronak Patel, Commented Apr 14, 2016 at 12:24

André Gumieri · Accepted Answer · 2016-04-15 21:07:34Z

2

Maybe it's a long shot since I can't reproduce the error, but as I can see, while your site is running on HTTP, your URL to admin-ajax.php is under HTTPS.

Try this:

$ajax_url = admin_url( 'admin-ajax.php', 'http' );

answered Apr 15, 2016 at 21:07

André Gumieri

2752 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Ajax not working in iOS (with list.js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related