Wie gehen Sie mit dem Flash von Rail mit Ajax-Anfragen um?

Ich bin ziemlich glücklich mit die Lösungdie ich kam mit. Im Grunde genommen habe ich eine helper-Methode, lädt den flash-inline, und dann habe ich eine after_filter, dass klar aus dem flash, wenn die Anforderung xhr. Hat jemand eine einfachere Lösung als das?

Update: Die Lösung oben wurde geschrieben zurück in den Schienen 1.x und wird nicht mehr unterstützt.

InformationsquelleAutor der Frage Jerry Cheung | 2008-12-14

  1. 61

    Können Sie auch speichern Sie die flash-Nachrichten, die in den response-Header mit einer after_filter block und anzeigen mit javascript:

    class ApplicationController < ActionController::Base
after_filter :flash_to_headers

def flash_to_headers
  return unless request.xhr?
  response.headers['X-Message'] = flash[:error]  unless flash[:error].blank?
  # repeat for other flash types...

  flash.discard  # don't want the flash to appear when you reload page
end

    Und in application.js fügen Sie eine Globale ajax-handler. Für jquery tun so etwas wie dieses:

    $(document).ajaxError(function(event, request) {
  var msg = request.getResponseHeader('X-Message');
  if (msg) alert(msg);
});

    Ersetzen alert() mit Ihrer eigenen javascript-flash-Funktion, oder versuchen Sie jGrowl.

    InformationsquelleAutor der Antwort gudleik

  2. 29

    Und hier ist meine version basiert auf dem @emzero, mit Modifikationen für die Arbeit mit jQuery, getestet auf Rails 3.2

    application_controller.rb

    class ApplicationController < ActionController::Base
    protect_from_forgery

    after_filter :flash_to_headers

    def flash_to_headers
        return unless request.xhr?
        response.headers['X-Message'] = flash_message
        response.headers["X-Message-Type"] = flash_type.to_s

        flash.discard # don't want the flash to appear when you reload page
    end

    private

    def flash_message
        [:error, :warning, :notice].each do |type|
            return flash[type] unless flash[type].blank?
        end
    end

    def flash_type
        [:error, :warning, :notice].each do |type|
            return type unless flash[type].blank?
        end
    end
end

    application.js

    //FLASH NOTICE ANIMATION
var fade_flash = function() {
    $("#flash_notice").delay(5000).fadeOut("slow");
    $("#flash_alert").delay(5000).fadeOut("slow");
    $("#flash_error").delay(5000).fadeOut("slow");
};
fade_flash();

var show_ajax_message = function(msg, type) {
    $("#flash-message").html('<div id="flash_'+type+'">'+msg+'</div>');
    fade_flash();
};

$(document).ajaxComplete(function(event, request) {
    var msg = request.getResponseHeader('X-Message');
    var type = request.getResponseHeader('X-Message-Type');
    show_ajax_message(msg, type); //use whatever popup, notification or whatever plugin you want
});

    layout: Anwendung.html-Code.haml

            #flash-message
            - flash.each do |name, msg|
                = content_tag :div, msg, :id => "flash_#{name}"

    InformationsquelleAutor der Antwort Victor S

  3. 15

    Dies ist nötig, in die js-Antwort

    Wenn Sie RSJ:

    page.replace_html :notice, flash[:notice]
flash.discard

    Wenn Sie mit jQuery:

    $("#flash_notice").html(<%=escape_javascript(flash.delete(:notice)) %>');

    InformationsquelleAutor der Antwort Silviu Postavaru

  4. 14

    Habe ich es auf diese Weise..

    controller:

    respond_to do |format|
    flash.now[:notice] = @msg / 'blah blah...'
    format.html 
    format.js
  end

    anzeigen:

    <div id='notice'>
    <%= render :partial => 'layouts/flash' , :locals => { :flash => flash } %>
</div>

    layouts/_flash.html-Code.erb

    <% flash.each do |name, msg| %>
            <div class="alert-message info"> 
                <a class="close dismiss" href="#">x</a> 
                <p><%= msg %></p>
            </div>
<% end %>

    post.js.erb

    $("#notice").html("<%= escape_javascript(render :partial => 'layouts/flash' , :locals => { :flash => flash }).html_safe %>");

    InformationsquelleAutor der Antwort dbKooper

  5. 9

    Gebäude auf der Oberseite des anderen -

    (Passieren wir die komplette flash-Objekt als JSON, das es uns ermöglicht, zu rekonstruieren, die komplette flash-Objekt im browser. Dies kann verwendet werden, um sicherzustellen, dass alle flash-Mitteilungen werden angezeigt, wenn mehrere flash-Nachrichten werden generiert von Schienen.)

    #application_controller.rb
class ApplicationController < ActionController::Base
  after_filter :flash_to_headers

  def flash_to_headers
    if request.xhr?
      #avoiding XSS injections via flash
      flash_json = Hash[flash.map{|k,v| [k,ERB::Util.h(v)] }].to_json
      response.headers['X-Flash-Messages'] = flash_json
      flash.discard
    end
  end
end
    //application.js
$(document).ajaxComplete(function(event, request){
  var flash = $.parseJSON(request.getResponseHeader('X-Flash-Messages'));
  if(!flash) return;
  if(flash.notice) { /* code to display the 'notice' flash */ $('.flash.notice').html(flash.notice); }
  if(flash.error) { /* code to display the 'error' flash */ alert(flash.error); }
  //so forth
}

    InformationsquelleAutor der Antwort Vikrant Chaudhary

  6. 6

    Sieht aus wie das, was Sie brauchen, ist flash.now[:notice]die nur in der aktuellen Aktion und nicht in der nächsten. Werfen Sie einen Blick in die Dokumentation, hier: http://api.rubyonrails.com/classes/ActionController/Flash/FlashHash.html#M000327

    InformationsquelleAutor der Antwort nakajima

  7. 5

    Ordnen Sie die Nachricht in der Steuerung wie diese:

      flash.now[:notice] = 'Your message'

    app/views/layouts/application.js.erb - Layout für Ajax-Anfragen.
    Hier können Sie einfach 

      <%= yield %>
  alert('<%= escape_javascript(flash.now[:notice]) %>');

    oder einige andere reiche Animationen mit gritter: http://boedesign.com/demos/gritter/

      <%= yield %>
  <% if flash.now[:notice] %>
    $.gritter.add({
      title: '--',
      text: '<%= escape_javascript(flash.now[:notice]) %>'
    });
  <% end %>

    InformationsquelleAutor der Antwort Arun Kumar Arjunan

  8. 3

    Basierend auf gudleik Antwort:

    class ApplicationController < ActionController::Base
  after_filter :flash_to_headers

def flash_to_headers
  return unless request.xhr?
  response.headers['X-Message'] = flash_message
  response.headers["X-Message-Type"] = flash_type

  flash.discard # don't want the flash to appear when you reload page
end

private

def flash_message
  [:error, :warning, :notice].each do |type|
    return flash[type] unless flash[type].blank?
  end
end

def flash_type
  [:error, :warning, :notice].each do |type|
    return type unless flash[type].blank?
  end
end

    Dann auf Ihre application.js (wenn Sie die Schienen native Prototyp Helfer) hinzufügen:

    Ajax.Responders.register({
onComplete: function(event, request) {
   var msg = request.getResponseHeader('X-Message');
   var type = request.getResponseHeader('X-Message-Type');
   showAjaxMessage(msg, type); //use whatever popup, notification or whatever plugin you want
   }
});

    InformationsquelleAutor der Antwort emzero

  9. 3

    Es ist ein Juwel namens Unobtrusive Flashdas automatisch codiert-flash-Nachrichten in einem cookie. Ein javascript am client-Ende-Prüfungen, die für flash und zeigt es in welcher Weise auch immer Sie wollen. Diese arbeitet nahtlos sowohl im normalen als auch ajax-Anfragen.

    InformationsquelleAutor der Antwort lulalala

  10. 3

    Ich geändert Victor' S Antwort auf fix einige Fälle, in denen flash[type].blank? hat nicht funktioniert, wie bereits von einigen Leuten in den Kommentaren. 

    after_filter :flash_to_headers

def flash_to_headers
   return unless request.xhr?
   response.headers['X-Message'] = flash_message
   response.headers["X-Message-Type"] = flash_type.to_s

   flash.discard # don't want the flash to appear when you reload page
end

private

def flash_message
   [:error, :warning, :notice, nil].each do |type|
     return "" if type.nil?
     return flash[type] unless flash[type].blank?
   end
end

def flash_type
   [:error, :warning, :notice, nil].each do |type|
       return "" if type.nil?
       return type unless flash[type].blank?
   end
end

    Dann der rest ist die gleiche

    //FLASH NOTICE ANIMATION

var fade_flash = function() {
    $(".flash_notice").delay(5000).fadeOut("slow");
    $(".flash_alert").delay(5000).fadeOut("slow");
    $(".flash_error").delay(5000).fadeOut("slow");
};

var show_ajax_message = function(msg, type) {
    $(".flash_message").html('<div class="flash_'+type+'">'+msg+'</div>');
    fade_flash();
};

$( document ).ajaxComplete(function(event, request) {
    var msg = request.getResponseHeader('X-Message');
    var type = request.getResponseHeader('X-Message-Type');
    show_ajax_message(msg, type); //use whatever popup, notification or whatever plugin you want

});

    InformationsquelleAutor der Antwort Ricky Gu

  11. 3

    Hier ist meine version (die Arbeit mit Multiplikatoren flash-Mitteilungen und spezielle Zeichen, die UTF-8-Codierung):

    Innen ApplicationController:

    after_filter :flash_to_headers
def flash_to_headers
  return unless request.xhr?
  [:error, :warning, :notice].each do |type|
    if flash[type]
      response.headers["X-Ajax-#{type.to_s.humanize}"] = flash[type]
    end
  end
  flash.discard
end

    In meinem Kaffee-Skript (twitter bootstrap version):

    css_class = {
    Notice: 'success',
    Warning: 'warning',
    Error: 'error'
}
$(document).ajaxComplete (event, request) ->
  for type in ["Notice", "Warning", "Error"]
    msg = request.getResponseHeader("X-Ajax-#{type}")
    if msg?
      $('#notices').append("<div class=\"alert #{css_class[type]}\">#{decodeURIComponent(escape(msg))}</div>")

    InformationsquelleAutor der Antwort Luc Boissaye

  12. 1

    Andere Weg wäre, die update/display das "Achtung" - div mit der Meldung aus, die Ihre Ajax-requests "OnFailure" - handler. Es gibt Ihnen die Fähigkeit zu zeigen, diese flash-Nachrichten mit gewünschten Effekt. Ich habe dieses

     render :text => "ein Fehler passiert", :status => 444

    in der Javascript -

     new AjaxRequest(... 


OnFailure:function(transport) { 
$("#Nachricht").update(transport.responseText); 
//zeigt die Nachricht 
} 

);

    HTH

    InformationsquelleAutor der Antwort Rishav Rastogi

  13. 1

    Baue ich einen Motor, das umfasst das Verhalten der application_controller senden Sie die flash-message im response-header als einige von Euch vorschlagen.

    https://github.com/bonzofenix/flajax

    InformationsquelleAutor der Antwort bonzofenix

  14. 0

    Die einzige Verbesserung, die ich mir vorstellen kann ist dass die Seite.reload_flash Standard (nicht dass es auf jeden rjs-Datei, und stellen Sie es ausdrücklichen, wenn Sie nicht wollen, um neu zu laden, den Blitz etwas wie Seite.keep_flash.

    Ich würde nicht wissen, wo zu beginnen, aber zu wissen, einige Schienen ich bin sicher, es ist nicht schwer.

    InformationsquelleAutor der Antwort

  15. 0

    In Fall, dass Sie wollen, verwenden Sie AJAX-Aufrufe redirect_to sollte nicht verwendet werden, die in den controller. Eher, flash-Mitteilung sollte ausdrücklich bezeichnet:

    In your_controller:

    respond_to :js

def your_ajax_method
  flash[:notice] = 'Your message!'
end

    In der Ansicht, dass die Namen durch your_ajax_method_in_the_controller

    your_ajax_method_in_the_controller.js.haml

    :plain
  $("form[data-remote]")
    .on("ajax:success", function(e, data, status, xhr) {
      $('.messages').html("#{escape_javascript(render 'layouts/messages')}");
      setTimeout(function(){ $(".alert").alert('close') }, 5000);
    })

    Bitte beachtet, dass die Nachrichten Klasse ist ein Ankerpunkt für die Darstellung von Nachrichten. Diese Klasse sollte vorhanden sein, in der Sie Ihre Ansicht oder Anwendung layout. Wenn Sie ERB wird die Zeile $('.messages').html("<%= j(render 'layouts/messages') %>");

    Den oben genannten JavaScript-eingebettet in HAML/ERB ist der Schlüssel, um die Anzeige von flash-Mitteilungen bei der Verwendung von AJAX. Alle anderen Komponenten bleiben die gleichen für nicht-AJAX-Aufrufe.

    Können Sie verwenden your_ajax_method_in_the_controller.js.coffee oder einfach .js aber dann die Schienen Variablen nicht verfügbar sein, um JS/Kaffee. Auch wenn ich keine Variablen verwenden, hier habe ich lieber wrap-JS in HAML zu halten einheitliche Codebasis.

    Ich nutzen Twitter Bootstrap für styling-Nachrichten, so $(".alert").alert('close') verblasst die Kündigung. Und hier ist die Nachrichten teilweise:

    layouts/_messages.html-Code.haml

    - flash.each do |name, msg|
  - if msg.is_a?(String)
    .alert-messages
      %div{class: "alert alert-#{name == :notice ? "success" : "error"} fade in"}
        %a.close{"data-dismiss" => "alert"} 
          %i.icon-remove-circle
        = content_tag :div, msg, id: "flash_#{name}"

    Nur für den Fall, CSS für die Warnungen ist unten

    .alert-messages {
  position: fixed;
  top: 37px;
  left: 30%;
  right: 30%;
  z-index: 7000;
}

    InformationsquelleAutor der Antwort Vadym Tyemirov

Schreibe einen Kommentar