Rails iOS homescreen web app - can't delete records

Question

I've got a web app which works perfectly in the browser - both on the desktop and mobile. The problem comes when I try to pretty it up by adding:

<meta name="apple-mobile-web-app-capable" content="yes" />

This works great too - up to the point I need to delete a record in the app.

I'm also using this great gist I found - https://gist.github.com/1042167 to stop the app switching into mobile safari:

<script type="text/javascript">
    (function(document,navigator,standalone) {
        // prevents links from apps from oppening in mobile safari
        // this javascript must be the first script in your <head>
        if ((standalone in navigator) && navigator[standalone]) {
            var curnode, location=document.location, stop=/^(a|html)$/i;
            document.addEventListener('click', function(e) {
                curnode=e.target;
                while (!(stop).test(curnode.nodeName)) {
                    curnode=curnode.parentNode;
                }
                // Conditions to do this only on links to your own app
                // if you want all links, use if('href' in curnode) instead.
                if(
                    'href' in curnode && // is a link
                    (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
                    (   !(/^[a-z\+\.\-]+:/i).test(chref) ||                       // either does not have a proper scheme (relative links)
                        chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
                ) {
                    e.preventDefault();
                    location.href = curnode.href;
                }
            },false);
        }
    })(document,window.navigator,'standalone');
</script>

I'm wondering if this could be altered so data-method="delete" will play nice? at the minute - when I click 'Delete' - the 'are you sure?' confirm box hangs for a second or two, before dumping me back on the same Show page, with no delete having occured...

Tom Davies · Answer 1 · 2012-11-01T15:39:04.020

So I'm going to assume from what you've written that you are using the (bundled) jquery-ujs to handle your delete links for you as that sounds like what you're doing from your mention of data-method

The way the ujs handlers work for delete links is different to what you might expect. Here's the relevant bit of the jquery-ujs source:

// Handles  "data-method" on links such as:
// <a href="/users/5" data-method="delete" rel="nofollow" data-confirm="Are you sure?">Delete</a>
    handleMethod: function(link) {
      var href = rails.href(link),
        method = link.data('method'),
        target = link.attr('target'),
        csrf_token = $('meta[name=csrf-token]').attr('content'),
        csrf_param = $('meta[name=csrf-param]').attr('content'),
        form = $('<form method="post" action="' + href + '"></form>'),
        metadata_input = '<input name="_method" value="' + method + '" type="hidden" />';

      if (csrf_param !== undefined && csrf_token !== undefined) {
        metadata_input += '<input name="' + csrf_param + '" value="' + csrf_token + '" type="hidden" />';
      }

      if (target) { form.attr('target', target); }

      form.hide().append(metadata_input).appendTo('body');
      form.submit();
    },

So you can see that's what actually happening is a form is being dynamically created (with the required csrf data) and then submitted.

Your delegated click handler method from the gist you link to isn't going to work in this situation, as the rails js does a return: false on click on links with a data-method attribute that prevents your handler from ever firing.

The simplest thing to do is probably to roll your own (ajax based) delete handler based on the ujs code. For brevity I'm using the excellent jQuery form plugin to handle the actual submission:

function handleDeleteLink(endpoint){
  var confirmed = confirm("Are you sure you want to delete this record?"),
    csrf_token = $('meta[name=csrf-token]').attr('content'),
    csrf_param = $('meta[name=csrf-param]').attr('content'),
    form = $('<form method="post" action="' + endpoint + '"></form>'),
    metadata_input = '<input name="_method" value="delete" type="hidden" />',
    deleteOptions = {
      beforeSubmit: function(){
        //handle ajax start
      },
      success: function(el){
        //hand success
      },
      error: function(){

      }
    };
    if (csrf_param !== undefined && csrf_token !== undefined) {
      metadata_input += '<input name="' + csrf_param + '" value="' + csrf_token + '" type="hidden" />';
    }
    if (confirmed){
      form.hide()
          .append(metadata_input)
          .appendTo('body')
          .submit(function(e){
            e.preventDefault();
            $(this).ajaxSubmit(options);
          })
          .submit();
    }
}

In your view just replace yourdata-method with a class of say delete-link and bind via event delegation (or use a different data attr if you like):

$('body').on('click', '.delete-link', function(e){ e.preventDefault(); handleDeleteLink(e.target.href); }

thanks for your detailed reply. I added the plugin, removed the data-method, added the class and click handler, then added your function. Wonder if I need to comment some conflicting stuff out? I can navigate the app, but deletes are now just lifeless... also I'm still wondering why on my existing code - I only get a problem when it becomes an iOS homescreened web app. — ritchielee, Nov 01 '12 at 19:28
Does the form get created/submitted correctly when handleDeleteLink() is called? I abstracted that code above from an app so could be I made an error when generalising it out. Your web inspector ought to be able to tell you where things are breaking — Tom Davies, Nov 01 '12 at 20:47

Brian · Answer 2 · 2013-02-08T23:32:25.570

The problem is location.href = curnode.href; changes requests into GET requests, although I've had inconsistent behavior with POST and PUT requests. So when you have some routes such as:

GET     /photos             index
POST    /photos             create
GET     /photos/new         new
GET     /photos/:id/edit    edit
GET     /photos/:id         show
PUT     /photos/:id         update
DELETE  /photos/:id         destroy

The update and destroy routes end up rerouted to show. My hacky (hopefully temporary) solution is to just make custom routes for those requests that are being rerouted. So you would add:

match "update" => "Photos#update", :as => :update_photo
match "destroy" => "Photos#destroy", :as => :destroy_photo

I know, I know, this is not Rails convention, but it should work.

Rails iOS homescreen web app - can't delete records

2 Answers2