2012-05-07 7 views
4

私はbest_in_place gem(https://github.com/bernat/best_in_place)を使用して、Railsアプリケーションの場所を編集しています。私のコントローラは、ラインがあります。Rails 'Best in Place' Gem - Flashの成功メッセージですか?

format.json { respond_with_bip(@user) } 

宝石は、任意の検証エラーのためにゴロゴロ通知を生成し、だけでなく、成功した更新の通知をフラッシュする私のためにどのような方法はありますか?私はドキュメンテーションのどこにいてもこれを見つけることができないようです。そして、bipがJSONで応答するという事実は、全体が私にとって非常にブラックボックスに見えるようにします。

ご協力いただければ幸いです。

+0

はいこの問題もあります。 [RailsCast](http://railscasts.com/episodes/302-in-place-editing?view=asciicast)とその[Github Readme](https://github.com/bernat/best_in_place/)にあります。 blob/master/README.md)でも動作させることはできません – Norto23

答えて

0

JSONに応答しているので、フラッシュメッセージはありません。フラッシュはHTMLページ(ユーザーflash[:message] = "Success! Hooray!")にありますが、そこからJSONリクエストで表示する場所はありません。

1

あなたのコントローラで何をしているかによって異なりますが、更新時にトリガされて通知を表示することはできません。たとえば、ajax:successなどです。

あなたの質問を再読したところ、私は実際にあなたを助けるとは思わない。しかし、場合によってはFlash Render Gemをチェックしてください。 Here's the info on how to implement宝石。

3
$('.best_in_place').best_in_place().bind('ajax:success', function(evt, data, status, xhr) { 
     console.dir(evt); 
     console.dir(data); 
     console.dir(status); 
     console.dir(xhr); 
    // Use them how ever you need eg $("#yourdiv").text(data["message"]); 
}); 
お使いのコントローラで

format.json { render :json => { :message => "Successfully Saved your Model" } } 
1

私は同様の問題に遭遇しました。私がやったことは、私自身のbip.purr.jsファイルを作成したとbest_in_place.purrは私application.jsファイルから必要な削除:

//application.js 
//= require jquery 
//= require best_in_place 
//= require jquery_ujs 
//= require best_in_place.jquery-ui 
//= require jquery.purr 
//REMOVED/COMMENTED OUT THE NEXT LINE: 
// require best_in_place.purr 
// ADDED THIS LINE: 
//= require bip.purr 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree . 

私の「エラー」の機能OOBが働いていなかったので、私も同様にすることを変更しました。それがあなたのために働く場合、あなたはoriginal sourceを見なければなりません。あなたは、やるべきことは、とにかく自分自身のファイルを作成するが、これは私が(資産/ JavaScriptの/ bp.purr.js)のように見えるものです前:

/* 
* BestInPlace 3.0.0.alpha (2014) 
* 
* Depends: 
* best_in_place.js 
* jquery.purr.js 
*/ 
/*global BestInPlaceEditor */ 

BestInPlaceEditor.defaults.purrErrorContainer = "<span class='bip-flash-error'></span>"; 
BestInPlaceEditor.defaults.purrSuccessContainer = "<span class='bip-flash-success'></span>"; 

//edited this binding to stop showing 'Error Object object' 
jQuery(document).on('best_in_place:error', function (event, request, error) { 
    'use strict'; 
    // Display all error messages from server side validation 
    var errors_string = ""; 
    jQuery.each(jQuery.parseJSON(request.responseText), function (index, value) { 
     if (typeof value === "object") { 
      $.each(value, function (i, v) { 
       errors_string += i[0].toUpperCase() + i.slice(1) + " " + v + ". "; 
      }); 
     } else { 
      errors_string = value; 
     } 
     var container = jQuery(BestInPlaceEditor.defaults.purrErrorContainer).html(errors_string); 
     container.purr(); 
    }); 
}); 

//added this binding for success messages: 
jQuery(document).on('best_in_place:success', function (event, request, error) { 
    'use strict'; 
    // Display all success messages from server side validation 
    var msg = "Updated Successfully"; 
    var container = jQuery(BestInPlaceEditor.defaults.purrSuccessContainer).html(msg); 
    container.purr(); 
}); 

そして、ちょうど楽しみのために、いくつかの基本的なSCSSは、物事が見て取得するには異なる:

// for best in place/purr styling 
.purr { 
    position: fixed; 
    top: 60px; 
    right: 100px; 
    width: 500px; 
    padding: 20px; 
    &.bip-flash-error { 
    background-color: red; 
    } 
    &.bip-flash-success { 
    background-color: green; 
    } 
    border: solid 1px #dadada; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -webkit-box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.75); 
    &:first-letter { 
    text-transform: uppercase 
    } 
; 
    font-size: 20px; 
    color: white; 
    font-weight: bolder; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
}