Andy Holmes Andy Holmes - 6 months ago 28
Javascript Question

AJAX call not firing on ipad but fine on desktop

I have the following custom plugin code

(function ($) {
$.fn.createGallery = function(options) {
var theObject = $(this);
var settings = $.extend({
// These are the defaults.
server: 'http://localhost/jQuery%20Gallery/images/galleries/homepage_gallery',
galleryName: 'Test',
galleryWidth: theObject.parent().width(),
galleryImageMargin: 20,
galleryImageColumns: 2,
imageQuality: 100
}, options);

var galleryImageWidth = settings.galleryWidth / settings.galleryImageColumns;
var imageUrl = settings.server;

var otherMargin = Math.round(settings.galleryImageMargin / 2);
var finalImageWidth = Math.round(galleryImageWidth - settings.galleryImageMargin);
var finalImageHeight = Math.round(galleryImageWidth / 1.4);
var finalGalleryWidth = settings.galleryWidth - settings.galleryImageMargin;

$(this).before('<style>'+$(this).selector+' li:nth-child('+settings.galleryImageColumns+'n+1) { margin-left: 0; } '+$(this).selector+' li:first-child { margin-left: 0; } '+$(this).selector+' { width: '+finalGalleryWidth+'px; margin: 0px; } '+$(this).selector+' li { display: inline-block; list-style: none; margin-left: '+settings.galleryImageMargin+'px; margin-bottom: '+otherMargin+'px; } </style>');

$.ajax({
url: imageUrl,
success: function(data){
console.log('SUCCESS');
var extension = '.jpg';
$(data).find("a:contains("+extension+")").each(function(){
// will loop through
var filename = $(this).attr("href");
$('<li></li>').html('<a href="'+imageUrl+'/'+filename+'" class="fancybox"><img src="thumbnail.php?src='+imageUrl+'/'+filename+'&q='+settings.imageQuality+'&h='+finalImageHeight+'&w='+finalImageWidth+'"/></a>').appendTo(theObject);
});
theObject.children('li:nth-child('+settings.galleryImageColumns+'n+1)').addClass('triggerMarginIE8');
},
failure: function(data){
console.log('FAIL');
}
});
};
}(jQuery));


This works fine on my desktop as far as I can tell. Yet the AJAX doesn't fire properly on iOS devices (and possibly other devices) or a colleague's machine, it says the folder has been permanently moved, but it hasn't!

Any ideas? I know when the AJAX is running or not because of the
console.log

Answer

Try putting in a relative path in the url. :)

   server: 'images/galleries/homepage_gallery', //your relative path...
   var imageUrl = settings.server;

   //Ajax call
   $.ajax({
        url: imageUrl,
        success: function(data){
            console.log('SUCCESS');
            var extension = '.jpg';
            $(data).find("a:contains("+extension+")").each(function(){
                // will loop through 
                var filename = $(this).attr("href");
                $('<li></li>').html('<a href="'+imageUrl+'/'+filename+'" class="fancybox"><img src="thumbnail.php?src='+imageUrl+'/'+filename+'&q='+settings.imageQuality+'&h='+finalImageHeight+'&w='+finalImageWidth+'"/></a>').appendTo(theObject);
            });
            theObject.children('li:nth-child('+settings.galleryImageColumns+'n+1)').addClass('triggerMarginIE8');
        },
        failure: function(data){
            console.log('FAIL');
        }
    });
Comments