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?
1 Answers
Answers 1
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' ); 
0 comments:
Post a Comment