Ajax post call not working on mobile

Question

New to rails and ajax.

I created a little web app where the user can simply count their steps, pressing a button. Once completed, the user click submit and the number of steps are being saved.

This all works great on my pc. However, when I try this on mobile, the number of steps are not being saved. And I can't figure out why this is.

My code looks like this:

<script type="text/javascript">
$(document).ready(function(){

var index = 0;

function resetcounter() {
  index = 0;
  document.getElementById("button1").value = index;
}

function count(){
  index += 1;
  document.getElementById('button1').value=index;
}

$('#button1').click(function() {
    count();
});

$('#resetButton').click(function() {
    resetcounter();
});

$('#submitButton').click(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
    $.ajax({
      url : "/steps",
      type: "POST",
      data: {
        step: {
          stepcount: index
        }
      },
      success: function( data, textStatus, jQxhr ){ $('#response pre').html( data ); }, 
      error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); }
    });
    window.location = '/steps';
  });

});

<div class="panel panel-default center">
  <div class="panel-heading">
    <h2>Count your steps</h2>
  </div>
  <div class="panel-body">
<input type="button" class="btn btn-default btn-circle" id="button1" value="0"/>
  </div>
  <div class="panel-footer">
    <button type="button" id="submitButton" class="btn btn-default ">Submit</button>
    <button type="button" id="resetButton" class="btn btn-default">Reset</button>

  </div>
</div>

Answer 1

The problem with your code is that you're redirecting the user before the AJAX request has a chance to complete (resulting in unstable behavior).

If you are dead set on using your current implementation, you can fix this by moving the window.location redirect to inside the success callback so it only redirects once the AJAX response comes back successfully.

$('#submitButton').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        url: "/steps",
        type: "POST",
        data: {
            step: {
                stepcount: index
            }
        },
        success: function (data, textStatus, jQxhr) {
            $('#response pre').html(data);
            window.location = '/steps';
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

The reason why you're seeing this behavior on mobile is because the AJAX request takes longer to perform over a slow connection and therefore has less of a chance to get dispatched successfully before your script redirects itself.

However, as I mentioned in the comments, what you're trying to achieve does not need AJAX. You can synchronously POST an HTML form with the same data and the user will not know the difference.