Question

I’m using a heavy javascript based app that uses a drag and drop feature.

It works well. But if I add a dynamic object to the page ( which has the exact same attributes and variables as the other objects ), it drags, but on drop, the POST returns a 406.

I’m completely unsure of what could be happening here, as I reinstantiate any environment listeners that could be needed before this call is made. I’ve broken down the call to this:

Where .cranbar is a working pre-existing object. I switch it with an identicaly .foobar which is a dynamically added one, and it returns a 406.

attrs = { _method:"put"};
box = $(".cranbar");
$.post(box.attr('data-update_path'), attrs, function(data) {
});

This snippet comes from the make_droppable method that is loaded after the object is instantiated and before I make an attempt to drag and drop it.

make_droppable: function(){
  $('table#week .day').droppable({
    accept: '.job, .task',
    hoverClass: 'droppable-hover',
    drop: function(e, ui) {
      if (confirmOnDrop){
        if (!confirm('Are you sure?')) {
          if ($('table#week').length > 0) {
            draw_weekly_calendar();
          }
          return false;
        }
      }

      var box = $(ui.draggable);
      // var old_container = box.parents('td:first');
      var new_cell = $(this);
      var new_container = $(this).find('.rel_box');

      // add indicator
      box.addClass('indicator');

      // add box to new container
      box.attr('style', 'position: absolute;').appendTo(new_container);

      var attrs = null;

      if (box.attr('data-object-type') == 'job') {
        // update job already on screen
        attrs = {
          'job[scheduled_on]': new_cell.attr('data-scheduled_on'),
          '_method': 'put'
        }
      }
      else if  (box.attr('data-object-type') == 'task') {
        attrs = {
          'task[scheduled_at]': new_cell.attr('data-scheduled_on'),
          '_method': 'put'
        }
      }

      if (attrs) {
        $.v = attrs;
        $.post(box.attr('data-update_path'), attrs, function(data) {
          box.removeClass('indicator');
          box.attr('data-scheduled_at', new_cell.attr('data-scheduled_on'));
          draw_weekly_calendar();
        });
      }

      // nice effect
      box.effect('shake', { times: 1, distance: 2 }, 50);
    }
  });      
},

Does anyone know what I can do to find the source of this 406?

UpdatE

This probably has a lot to do with it. But I’m comparing headers now.

Failing Post :

Response Headers
Cache-Control   no-cache
Connection  Keep-Alive
Content-Length  1
Content-Type    text/html; charset=utf-8
Date    Mon, 09 Jul 2012 16:11:27 GMT
Server  WEBrick/1.3.1 (Ruby/1.9.2/2011-02-18)

Request Headers
Accept  text/javascript
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.8,es-es;q=0.5,es;q=0.3
Connection  keep-alive
Content-Length  57
Content-Type    application/x-www-form-urlencoded; charset=UTF-8

Successful Post:

Response Headers
Cache-Control   max-age=0, private, must-revalidate
Connection  Keep-Alive
Content-Length  2024
Content-Type    application/json; charset=utf-8
Date    Mon, 09 Jul 2012 16:11:35 GMT
Etag    "93432c11e3cc55dfec8e0aee7c08bcc1"
Server  WEBrick/1.3.1 (Ruby/1.9.2/2011-02-18)

Request Headers
Accept  text/javascript
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.8,es-es;q=0.5,es;q=0.3
Connection  keep-alive
Content-Length  57
Content-Type    application/x-www-form-urlencoded; charset=UTF-8

Answer 1

Seems to me that the issue is the Content-Type of the resposne header. It’s using text/html, but expects application/json. This causes a 406 error because, although the data was successfuly queried, it’s not a response that’s valid -> 406. I honestly don’t know if you can change the contentType with inthe $.post params, but you can do it with .ajax().

$.ajax({ 
  type: 'POST', 
  url: box.attr('data-update_path'), 
  contentType: 'application/json; charset=utf-8', 
  data: attrs,
  success: function(data){ 
    box.removeClass('indicator');
    box.attr('data-scheduled_at', new_cell.attr('data-scheduled_on'));
    draw_weekly_calendar();
  }
});

Hopefully this resolves your problem.