Ajax Post not working for mobile browser

Question

The following extract calls a php file that retrieves some info from a database and returns the values which are then used to update my page. Works perfectly on standard browsers but as soon as I try it on a mobile it fails to update.

//function - Retrieve Stats from mysql

$(function(){

    $('.sessionset').on('click', function(e){ 

        //Retrieve Approach details onclick of an Approach button
        $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '../_includes/retrieveStats.php',
        data: {approach: $(this).attr("alt")},
            success: function(data) {
                $("#approach").html("D&eacute;part "+data[0]);
                $("#stats").html(data[1]);
                $("#summary-description").html(data[2]);

            }
        });
    }); 
 //End function - Retrieve Stats from mysql
});

RetrieveStats.php uses

echo json_encode(array($approachDisplayName, $approachStats, $summary));

to return the required values.

I'm a relative newbie to ajax so any thoughts or comments would be very much appreciated.

Maybe it has something to do with the relative URL? I can't think of other reasons why it should work on desktop and not on mobile, there must be another factor like how you are accessing the script (i.e. localhost vs another domain). Did you try from another desktop computer? — Johnny, Oct 16 '16 at 13:46
Interestingly I added an alert to display when I clicked. `alert(data[1]);` It seems that when I tap the button on a mobile it doesn't register the click event! However when I hold my finger on the button for about a second it registers the click. Ever seen this before? Wondered if it might be a 'feature' of iOS Safari. — keeper, Oct 16 '16 at 14:01
OK turns out this is something to do with MagicZoom a plugin I'm using the button that triggers the ajax seems to interfere with the plugin function and vice versa. Very strange so I've contacted MagicZoom for an answer. — keeper, Oct 16 '16 at 14:43

score 0 · Answer 1 · edited Oct 23 '16 at 18:57

Ok figured it out for anyone who might come across this in the future using magic zoom.

The problem was this...when I tap the button on a mobile it didn't register the click event! However when I hold my finger on the button for about a second it registers the click.

My buttons are added based on the number of records retrieved, stored in an array using the following php to create my link styled as a button as required by the MagicZoom plugin.

echo "<a 
    data-zoom-id=\"climbprofile\" 
    href=\"" . $pathZoomFolder . $arrayApproaches[$x] . "-zoom.jpg\" 
    data-image=\"" . $pathMainFolder . $arrayApproaches[$x] . "-main.jpg\" 
    type=\"button\"
    class=\"sessionset btn btn-default btn-xs \">
    <h5>Button Text</h5></a>";

By adding the following into <a> it worked as it should with a quick tap.

ontouchstart=\"$(this).trigger('click');\"

The final code snippet looks like this. ontouchstart triggers the click event for class .sessionset working on now phone, tablet and desktop.

echo "<a ontouchstart=\"$(this).trigger('click');\" 
    data-zoom-id=\"climbprofile\" 
    href=\"" . $pathZoomFolder . $arrayApproaches[$x] . "-zoom.jpg\" 
    data-image=\"" . $pathMainFolder . $arrayApproaches[$x] . "-main.jpg\" 
    type=\"button\"
    class=\"sessionset btn btn-default btn-xs \">
    <h5>Button Text</h5></a>";

Ajax Post not working for mobile browser

1 Answers1