rails3, jquery mobile, and remote => true ajax calls processing as HTML

Question

I've been back and forth through a few posts here, and also checked out the Railscast for mobile detection (#199). I have a rails3 application that uses jquery and ajax and format.js and works fine. Now I'm trying to extend the applicaiton to mobile devices.

I'm using jquery mobile and everything is rendering fine, but when I use a remote => true switch on a link_to, it's not processing the request as JS (which it normally does in the desktop version).

Here is the link code:

<%= link_to 'Up', '/posts/' + String(rbpost.id) + '/upvote', :remote => true, :class => 'upvote', "data-role" => "button", "data-icon" => "arrow-u", "data-iconpos" => "notext" %>

It's processing as HTML

Started GET "/posts/3/upvote" for 127.0.0.1 at 2012-02-08 11:37:59 -0500

  Processing by PostsController#upvote as HTML

. . .and complains there is no template:

ActionView::MissingTemplate (Missing template posts/upvote, application/
upvote with {:handlers=>[:erb, :builder, :coffee], :formats=>[:mobile], :locale=
[:en, :en]}. Searched in:
  * "C:/rubydemo/testapp/app/views"
):
  app/controllers/posts_controller.rb:74:in `upvote'

Here is how things are coded:

application_controller.rb:

class ApplicationController < ActionController::Base
  protect_from_forgery
  before_filter :adjust_format_for_mobile

private
  # Set iPhone format if request 
  def adjust_format_for_mobile
    if mobile_request?
        if request.format == :js
            request.format = :mobilejs
        else
            request.format = :mobile
        end
    end
  end

# Return true for mobile requests 
  def mobile_request?
    return request.env["HTTP_USER_AGENT"] && request.env["HTTP_USER_AGENT"][/(Mobile\/.+Safari)/]
    #return true
    #I set this to return true always when I'm debugging on the desktop
  end  
end

mime_types.rb:

# Be sure to restart your server when you modify this file.

# Add new mime types for use in respond_to blocks:
# Mime::Type.register "text/richtext", :rtf
 Mime::Type.register_alias "text/html", :mobile
 Mime::Type.register_alias "text/javascript", :mobilejs

posts_controller.rb:

  def upvote
    @post = Post.find(params[:id])
    @post.upvote
    @post.save

    respond_to do |format|
      format.js 
      format.mobilejs
      format.html { redirect_to @post }
      format.json { render json: @post }
    end
  end

I have upvote.js.erb and upvote.mobilejs.erb in my views/posts directory. It's registering the :mobile type, but for some reason not doing the javascript thing when it needs to. Any ideas?

Thanks

Answer 1

I guess this happens as the JQuery Mobile and Ruby on Rails Ajax Handling messes up. I fixed the same issue by explicity disabling JQM ajax functionality for the form:

<%= form_for(AgendaItem.new, :remote => true, :html =>{ "data-ajax" => false}) do |f| %>