Rails'Best in place'宝石 - Flash成功消息?

时间:2012-05-07 22:25:18

标签: ruby-on-rails best-in-place

我正在使用best_in_place gem(https://github.com/bernat/best_in_place)在Rails应用程序中进行就地编辑。我的控制器有一行:

format.json { respond_with_bip(@user) }

gem会针对任何验证错误生成呜呜声通知,但是有没有办法让我也可以刷新成功更新的通知?我似乎无法在文档中的任何地方找到这一点,并且双向响应JSON的事实使得整个事情看起来对我来说非常黑。

非常感谢任何帮助。

4 个答案:

答案 0 :(得分: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 :(得分:1)

这取决于你在控制器中做了什么,但是你不能在更新时触发一个事件来显示通知 - 关于ajax:例如成功。

重新阅读你的问题后,我认为这对你实际上没有帮助。但请查看Flash Render Gem以防万一。 Here's the info on how to implement宝石。

答案 2 :(得分:1)

我遇到了类似的问题。我做的是制作我自己的bip.purr.js文件并从我的application.js文件中删除best_in_place.purr要求:

//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。在创建自己的文件之前,你应该这样做,但这就是我的样子(assets / javascripts / 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;
}

答案 3 :(得分:0)

由于您使用JSON进行响应,因此没有闪存消息。闪存位于HTML页面上(您可以使用flash[:message] = "Success! Hooray!"),但它们无法在JSON请求中显示。