ajaxForm breaks its behavior in mobile chrome browser

[kracekumar]

HTML code contains jinja2 syntax

<!--form code-->
<form id="action" method="POST" action="{{ video.url_for('action') }}" class="unstyled clearfix">
    {{ form.csrf_token() }}
    <div class="btn-toolbar pull-left">
      {% if g.user %}
        <div class="btn-group" data-toggle="buttons-checkbox">
          <button class="btn {%- if flags['starred'] %} active{% endif %}" title="Add to favourites" name="action" value="star"> <i class="icon-star"></i>
          </button>
          <button class="btn {%- if flags['queued'] %} active{% endif %}" title="Watch this later" name="action" value="queue"> <i class="icon-time"></i>
          </button>
        </div>
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn {%- if flags['liked'] %} active{% endif %}" title="Like" name="action" value="like">
            <i class="icon-thumbs-up"></i>
            <span class="video-button-label">Like</span>
          </button>
          <button class="btn {%- if flags['disliked'] %} active{% endif %}" title="Dislike" name="action" value="dislike">
            <i class="icon-thumbs-down"></i>
          </button>
        </div>
        <div class="btn-group dropup" id="playlist-buttons">
          {%- if 'remove-video' in g.permissions and playlist != video.playlist -%}
          <a class="btn" href="{{ video.url_for('remove-video', channel=channel, playlist=playlist) }}" title="Remove from this playlist">
            <i class="icon-minus"></i>
            <span class="video-button-label">Remove</span>
          </a>
          {%- endif %}
          <a id="add-to-button" class="btn dropdown-toggle" data-toggle="dropdown">
            <i class="icon-plus"></i>
            <span class="video-button-label">Add to</span>
            <span class="caret"></span>
          </a>
        </div>
        {%- if 'edit' in g.permissions or 'delete' in g.permissions %}
          <div class="btn-group">
            {%- if 'edit' in g.permissions -%}
              <a class="btn" href="{{ video.url_for('edit') }}">
                <i class="icon-pencil"></i>
                <span class="video-button-label">Edit</span>
              </a>
              {%- endif -%}
              {%- if 'delete' in g.permissions -%}
              <a class="btn" href="{{ video.url_for('delete') }}">
                <i class="icon-trash"></i>
                <span class="video-button-label">Delete</span>
              </a>
            {%- endif %}
          </div>
        {%- endif %}
      {%- else %}
        <div class="btn-group">
          <a class="btn" href="{{ url_for('login') }}">Login for more options</a>
        </div>
      {%- endif %}
      <div class="btn-group dropup">
        <a class="btn dropdown-toggle" data-toggle="dropdown">
          <i class="icon-share"></i>
          <span class="share-button-label">Share</span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="share-buttons">
          <li>
            <a target="_blank" href="http://twitter.com/share?url={{ request.url }}&amp;via=HasGeekTV&amp;text={{ video.title }}" class="socialite twitter-share" data-url="{{ request.url }}" data-text="{{ video.title }}" data-via="HasGeekTV">Twitter</a>
          </li>
          <li>
            <a target="_blank" href="https://plus.google.com/share?url={{ request.url }}" class="socialite googleplus-share" data-href="{{ request.url }}" data-action="share">Google+</a>
          </li>
          <li>
            <a target="_blank" href="http://www.facebook.com/sharer.php?u={{ request.url }}&amp;t={{ video.title }}" class="socialite facebook-share" data-href="{{ request.url }}">Facebook</a>
          </li>
        </ul>
      </div>
      <span class="loading hidden">&nbsp;</span>
    </div>
  </form>
<!--js-->
        $("#action").ajaxForm({
          beforeSubmit: function(){
            $(".loading").removeClass('hidden');
          },
          success: function(msg) {
            $(".loading").addClass('hidden');
            var action = $(this).attr('data').split('action=').pop();
            if (["dislike", "like"].indexOf(action) !== -1 && msg['message_type'] === 'removed') {
              $(".btn[value='" + action + "']").removeClass('active');
            }
            if (msg['message_type'] === 'added' || msg['message_type'] === 'removed') {
              toastr.success(msg['message']);
            } else if (msg['message_type'] === 'failure') {
              toastr.error(msg['message']);
            }
          },
          error: function() {
            $(".loading").addClass('hidden');
            toastr.error("Something went wrong, please try again");
          }
        });

Above code submits form and json is returned. In desktop web browser returned json is evaluated by success code in ajaxForm, but in mobile web browser returned json is rendered inside body tag. So ajaxForm failed and normal form submission took place ?

Headers

Desktop

Origin: http://192.168.0.104:8000
Content-Length: 83
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Ubuntu Chromium/25.0.1364.160 Chrome/25.0.1364.160 Safari/537.22
Connection: keep-alive
Referer: http://192.168.0.104:8000/kracekumar/tamil-songs/922-mtv-unplugged-episode-5-susheela-raman-ennapane-hd
X-Requested-With: XMLHttpRequest
Dnt: 1
Host: 192.168.0.104:8000
Accept: */*
Accept-Language: en-US,en;q=0.8
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept-Encoding: gzip,deflate,sdch

Mobile

Origin: http://192.168.0.104:8000
Content-Length: 83
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
User-Agent: Mozilla/5.0 (Linux; Android 4.2.2; Nexus 4 Build/JDQ39) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.169 Mobile Safari/537.22
Connection: keep-alive
Cookie: session="uQAwCaVz43zaUMxHO8lY6+gdNo0=?csrf=UydjODEzNmRjMDNiOGZmYjEzMGE3NTU4NGY4Yzk1Mzc5NTJiOWI3ZjM0JwpwMQou&lastuser_userid=VmJ3eUhQeVhXVFJhWG9hVFRiNy1LQncKcDEKLg=="
Host: 192.168.0.104:8000
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.8
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip,deflate,sdch

Straightforward guess is missing X-Requested-With: XMLHttpRequest in mobile version, setting this in beforeSend doesn't help.

beforeSend: function(req) {
     request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

Also looking into chrome developer console for mobile web browser request in network option shows Initiator as Other for web version value is jquery.min.js 2 script. This confirms normal form was submitted.

[malsup]

You're using latest version? 3.31.0-2013.03.27

[kracekumar]

Yes. 3.31.0-2013.03.27 and tried in 2.x also same issue.

[malsup]

Can you debug? It sounds like there is a javascript error. I don't see this issue on the demo pages.