2010-09-24 65 views
6

我的刪除/銷燬不適用於Rails 3.刪除/摧毀不在軌道3與jQuery

不適用於任何腳手架或甚至新項目。

<%= link_to 'Destroy', card, :confirm => 'Are you sure?', :method => :delete %> 

this question。解決方案是Firefox重新登錄。但我的也不是在鉻,狩獵或歌劇。

HTML代碼生成: -

<a href="/categories/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a> 

PS:請不要說包括默認的JS文件什麼的。因爲我對原型不感興趣,因爲我使用的是jQuery。

編輯/更新,重要:這是您不想使用原型時的解決方案。我在我的項目中只使用jQuery和相應的插件。

人們回答:首先包括原型等,然後安裝一些gem等來消除原型和jQuery之間的衝突。這是垃圾。

我已經發布了一個答案。在你選擇前請檢查一次。爲我工作了超過10個沒有任何問題的項目。所有你需要做的是:

從你的javascript目錄中除去application.js以外的所有js文件。然後將我在我的答案中指定的代碼粘貼到一個新文件中幷包含該文件。包括Jquery.js,然後你就完成了。你不需要添加默認的JavaScript(即:原型)或其他寶石來消除衝突等。

回答

7

我碰到了同樣的問題莫希特了,也需要包括在我的JavaScript資產「不引人注目的JavaScript庫」(或「UJS」)。在我目前的Rails(v3.2.5)中,UJS庫將自動提供。

gem 'jquery-rails'

,並在您的應用程序/資產/ Java腳本/ application.js中的文件以下行:

//= require jquery_ujs

因爲我可以通過看在你的Gemfile以下行驗證這一點不知道任何更好,我已經刪除從我自己的application.js文件require jquery_ujs行,我花了一段時間來弄清楚爲什麼我link_to ..., :method => :delete電話不工作啦!

一旦我明白了這個問題,很容易對上述兩行添加回到各自的文件和一切開始工作作爲再次預期。

4

請確保您的佈局中包含默認的Rails JavaScript文件。

<%= javascript_include_tag :defaults %> 
+3

爲什麼要我,當我使用jQuery。仍然爲測試目的,我做到了。仍然沒有工作。 – 2010-09-24 07:54:40

+0

Rails 3使用不顯眼的JavaScript來使其工作。所以你必須包含一些javascript框架(Prototype或JQuery)和適當的'rails.js'。參見[由Ryan貝茨的截屏(http://railscasts.com/episodes/205-unobtrusive-javascript)瞭解更多信息。 – 2010-09-24 14:11:48

+0

這是不對的。當一些願意使用jQuery如果您使用jQuery的軌道,而不是原型軌寶石(這是默認設置)爲什麼加載原型.. – 2012-05-14 08:11:49

9

如果您使用jQuery沒有原型,那麼你需要添加Jquery.rails.js項目中的其他人每次試圖刪除任何東西都它會帶你顯示網頁。

我不記得我從哪裏得到的解決方案和這個Jquery.rails.js文件。但是,確實來自一些可信賴的來源。

這是該文件的代碼。可能會幫助某人。

jQuery(function ($) { 
    var csrf_token = $('meta[name=csrf-token]').attr('content'), 
     csrf_param = $('meta[name=csrf-param]').attr('content'); 

    $.fn.extend({ 
     /** 
     * Triggers a custom event on an element and returns the event result 
     * this is used to get around not being able to ensure callbacks are placed 
     * at the end of the chain. 
     * 
     * TODO: deprecate with jQuery 1.4.2 release, in favor of subscribing to our 
     *  own events and placing ourselves at the end of the chain. 
     */ 
     triggerAndReturn: function (name, data) { 
      var event = new $.Event(name); 
      this.trigger(event, data); 

      return event.result !== false; 
     }, 

     /** 
     * Handles execution of remote calls firing overridable events along the way 
     */ 
     callRemote: function() { 
      var el  = this, 
       data = el.is('form') ? el.serializeArray() : [], 
       method = el.attr('method') || el.attr('data-method') || 'GET', 
       url  = el.attr('action') || el.attr('href'); 

      if (url === undefined) { 
       throw "No URL specified for remote call (action or href must be present)."; 
      } else { 
       if (el.triggerAndReturn('ajax:before')) { 
        $.ajax({ 
         url: url, 
         data: data, 
         dataType: 'script', 
         type: method.toUpperCase(), 
         beforeSend: function (xhr) { 
          el.trigger('ajax:loading', xhr); 
         }, 
         success: function (data, status, xhr) { 
          el.trigger('ajax:success', [data, status, xhr]); 
         }, 
         complete: function (xhr) { 
          el.trigger('ajax:complete', xhr); 
         }, 
         error: function (xhr, status, error) { 
          el.trigger('ajax:failure', [xhr, status, error]); 
         } 
        }); 
       } 

       el.trigger('ajax:after'); 
      } 
     } 
    }); 

    /** 
    * confirmation handler 
    */ 
    $('a[data-confirm],input[data-confirm]').live('click', function() { 
     var el = $(this); 
     if (el.triggerAndReturn('confirm')) { 
      if (!confirm(el.attr('data-confirm'))) { 
       return false; 
      } 
     } 
    }); 


    /** 
    * remote handlers 
    */ 
    $('form[data-remote]').live('submit', function (e) { 
     $(this).callRemote(); 
     e.preventDefault(); 
    }); 
    $('a[data-remote],input[data-remote]').live('click', function (e) { 
     $(this).callRemote(); 
     e.preventDefault(); 
    }); 

    $('a[data-method]:not([data-remote])').live('click', function (e){ 
     var link = $(this), 
      href = link.attr('href'), 
      method = link.attr('data-method'), 
      form = $('<form method="post" action="'+href+'">'), 
      metadata_input = '<input name="_method" value="'+method+'" type="hidden" />'; 

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

     form.hide() 
      .append(metadata_input) 
      .appendTo('body'); 

     e.preventDefault(); 
     form.submit(); 
    }); 

    /** 
    * disable-with handlers 
    */ 
    var disable_with_input_selector = 'input[data-disable-with]'; 
    var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')'; 

    $(disable_with_form_selector).live('ajax:before', function() { 
     $(this).find(disable_with_input_selector).each(function() { 
      var input = $(this); 
      input.data('enable-with', input.val()) 
       .attr('value', input.attr('data-disable-with')) 
       .attr('disabled', 'disabled'); 
     }); 
    }); 

    $(disable_with_form_selector).live('ajax:after', function() { 
     $(this).find(disable_with_input_selector).each(function() { 
      var input = $(this); 
      input.removeAttr('disabled') 
       .val(input.data('enable-with')); 
     }); 
    }); 
}); 

更新:

您可以從這裏得到Jquery.rails.js的最新副本。

https://raw.github.com/rails/jquery-ujs/master/src/rails.js 
+2

這並不是最好的辦法,如果你使用的是資產的管道。如果您使用資產管道,Justin Houk的答案是更好的答案。 – Mab879 2012-06-23 02:49:52

+0

@Justin houk答案是更好的,以及我不明白爲什麼這個答案是更高的投票,然後他。無論如何,謝謝你Mab879你節省了我的工作時間,並且謝謝你Justin houk – edisonthk 2013-09-19 11:26:59

+1

@edisonthk導致我發佈這個答案的時間。 Jquery-rails寶石沒有發佈。 – 2013-09-20 15:52:50

2

確保在佈局中包含默認的Rails JavaScript文件。

<%= javascript_include_tag "application" %> 
+0

application.js是一個空白的js文件:P檢查我的答案。 – 2012-03-14 03:20:55