jquery - Dropzone, can destroy from database but not from its container -

i have picture new page, user can upload boat pictures. boat model , picture model associated , nested routes. thing is, use carrierwave , dropzone. writing database works fine. had struggled destroy action nested routes not expert on jquery. right now, when click remove button destroys picture database, picture remains inside of dropzone container.

here;

this log output;

>boat.last.pictures.all   boat load (0.3ms)  select  "boats".* "boats"  order "boats"."id" desc limit 1   picture load (0.4ms)  select "pictures".* "pictures" "pictures"."boat_id" = ?  [["boat_id", 137]] => #<activerecord::associationrelation [#<picture id: 645, name: nil, boat_id: 137, created_at: "2015-04-24 22:13:29", updated_at: "2015-04-24 22:13:29", image: "imgres-3.jpg">]> 

then press remove file, moves bit down instead of vanishing there;

but removed database, log again;

> boat.last.pictures.all   boat load (0.4ms)  select  "boats".* "boats"  order "boats"."id" desc limit 1   picture load (0.3ms)  select "pictures".* "pictures" "pictures"."boat_id" = ?  [["boat_id", 137]] => #<activerecord::associationrelation []> 

so know problem jquery maybe looking how use #destroy action use dropzone. why wanted explain bit.

my picture new.html.erb

<div class="container">  <%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} |f| %>         <p>        <div class="fallback">       <%= f.file_field :image %>         </div>            </p>  <% end %>  <p><%= link_to "back profile",  current_user %></p>   <div class="index">   <%= render "index" %> </div>   <script type="text/javascript"> $(document).ready(function(){     // disable auto discover     dropzone.autodiscover = false;      // grap our upload form id     $("#picture-dropzone").dropzone({         // restrict image size maximum 5mb         maxfilesize: 5,         // changed passed param 1 accepted         // our rails app         paramname: "picture[image]",         // show remove links on each image upload         addremovelinks: true,         // if upload successful         success: function(file, response){             // find remove button link of uploaded file , give id             // based of fileid response server             $(file.previewtemplate).find('.dz-remove').attr('id', response.fileid);             $(file.previewtemplate).find('.dz-remove').attr('boat_id', response.boatid);             // add dz-success class (the green tick sign)             $(file.previewelement).addclass("dz-success");         },         //when remove button clicked         removedfile: function(file){              // grap id of uploaded file set earlier             var id = $(file.previewtemplate).find('.dz-remove').attr('id');              var boat_id = $(file.previewtemplate).find('.dz-remove').attr('boat_id');              // make delete ajax request delete file             $.ajax({                 type: 'delete',                 url: '/boats/' + boat_id + '/pictures/' + id,                 success: function(data){                     console.log(data.message);                 }             });         }     });  });    </script> 

and pictures controller;

#create action

def create      @picture = @boat.pictures.new(picture_params)      if @picture.save     render json: { message: "success", fileid: @picture.id, boatid: @boat.id }, :status => 200      else       render json: { error: @picture.errors.full_messages.join(',')}, :status => 400      end    end 

#destroy action;

def destroy      @picture = @boat.pictures.find(params[:id])     if @picture.destroy      render json: { message: "file deleted server" }     else       render json: { message: @upload.errors.full_messages.join(',') }     end   end 

so stated, problem jquery, removed file stays there.. thank you

add 2 row removedfile eventhandler function:

var _ref; return (_ref = file.previewelement) != null ? _ref.parentnode.removechild(file.previewelement) : void 0; 

after this, handler function should looks this:

removedfile: function(file){      // grap id of uploaded file set earlier     var id = $(file.previewtemplate).find('.dz-remove').attr('id');      var boat_id = $(file.previewtemplate).find('.dz-remove').attr('boat_id');      // make delete ajax request delete file     $.ajax({         type: 'delete',         url: '/boats/' + boat_id + '/pictures/' + id,         success: function(data){             console.log(data.message);         }     });      var _ref;     return (_ref = file.previewelement) != null ? _ref.parentnode.removechild(file.previewelement) : void 0; } 

this should trick.