2016-07-17 107 views
6

Sono un principiante con rotaie e voglio utilizzare Sweet Alert per sostituire i brutti messaggi di conferma di base sull'eliminazione dei record. Ho aggiunto sweet-alert gem e sweet-alert-confirm al mio file gem ho fatto esattamente quello che hanno detto nel loro Read Me, ma non funziona, posso cancellare i record ma è stato cancellato subito senza alcun messaggio di conferma di alcun tipo .Rails 4: Come ottenere un dolce avviso confermare il lavoro?

Gemfile

... 
gem 'sweet-alert' 
gem 'sweet-alert-confirm' 
... 

direttive Application.jssupported.

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require jquery.turbolinks 
//= require bootstrap-sprockets 
//= require sweet-alert 
//= require sweet-alert-confirm  
//= require_tree . 

stylesheet.css

/* 
... 

*= require_self 
*= require sweet-alert 
*= require_tree . 
*/ 

index.html.erb

... 
<%= link_to 'Destroy', ice_cream, method: :delete, data: { confirm: 'Are you sure?' } %> 
... 

Inoltre, v'è quarantina Non so se vale la pena menzionare, quando apro Firebug trovo il seguente errore

Fire bug error

Spero che mi può aiutare, Grazie.

+1

Non so cosa c'è di sbagliato con questo popolo che votano giù la questione senza neppure spiegare perché, Ragazzi io sono in un guaio e voglio essere aiutato non giudicato! –

risposta

6

Grazie com unità per il grande aiuto !, ma ancora una volta mi sono trovato la risposta ...

sembra che ci sia un problema con il sweetalert gemma, così

  1. ho disinstallato usando

    gem uninstall sweetalert 
    
  2. ho installato sweetalert2 utilizzando Rails Assets Web Sit e aggiungendo la seguente riga alla mia Gemfile

    gem 'rails-assets-sweetalert2', source: 'https://rails-assets.org' 
    
  3. Run fascio

  4. Rearrange application.js questo modo

    //= require sweetalert2 
    //= require jquery 
    //= require jquery_ujs 
    //= require turbolinks 
    //= require jquery.turbolinks 
    //= require bootstrap-sprockets 
    //= require sweet-alert-confirm 
    //= require_tree . 
    
  5. Rearrange application.css questo modo

    *= require_self 
    *= require sweetalert2 
    *= require_tree . 
    */ 
    

Ho mantenuto la gemma sweet-alert-confirm e ogni cosa ha funzionato bene. Ora trovo questo messaggio dolce ogni volta che cerco di eliminare un record senza l'aggiunta di righe di codice ...

enter image description here

Nota: si prega di spiegare perché si sta votando giù una domanda prima di fare.

1

Non sono sicuro del motivo per cui la tua domanda è stata votata, ma ho affrontato lo stesso problema qualche giorno fa.

Ecco una soluzione senza utilizzare gemme.

  1. Download di file per avvisi dolci 2. Aggiungere file da caricare con le risorse. Questo ti permetterà di creare avvisi usando la funzione sweetAlert o swal.

Come indicato, sarà necessario scrivere il proprio gestore di eventi per gli avvisi di conferma e richiederà un bel po 'di lavoro in quanto sono la richiesta POST e DELETE.

  1. Per tali richieste, è possibile utilizzare questo codice Javascript per sovrascrivere il metodo allowAction. La risposta è stata adattata da: http://thelazylog.com/custom-dialog-for-data-confirm-in-rails/

In application.js o qualsiasi file js:

//Override the default confirm dialog by rails 
$.rails.allowAction = function(link){ 
    if (link.data("confirm") == undefined){ 
    return true; 
    } 
    $.rails.showConfirmationDialog(link); 
    return false; 
} 

//User click confirm button 
$.rails.confirmed = function(link){ 
    link.data("confirm", null); 
    link.trigger("click.rails"); 
} 

//Display the confirmation dialog 
$.rails.showConfirmationDialog = function(link){ 
    var message = link.data("confirm"); 
    swal({ 
    title: message, 
    type: 'warning', 
    confirmButtonText: 'Sure', 
    confirmButtonColor: '#2acbb3', 
    showCancelButton: true 
    }).then(function(e){ 
    $.rails.confirmed(link); 
    }); 
}; 

aveva cercato con le gemme, ma non ha funzionato per me.

0
  • Aggiungi questo al vostro Gemfile:

    gemma 'sweetalert-rails'

  • Aggiungere questo ai vostri attività/javascript/application.js

    // = richiedono sweetalert

  • Aggiungi questo ai tuoi beni/fogli di stile/application.css

    * = richiedono dolce-alert

  • Nel file erb aggiungere questa riga

    "dolci (# {params [: id]}, 'Sei sicuro di voler eliminare?', '# {posts_path (params [: id])}', 'Remove All')",: class => "cancella-tutto rosso-text" %>

Nel file di js aggiungere questo codice

Questo codice può essere utilizzato per tutti gli avvisi attraverso il progetto passando il parametro appropriato ERS.

function sweet(id, text, href, button_text) { 
    timer: 4000 
    swal({ 
    title: "Warning!", 
    text: text, 
    showCancelButton: true, 
    confirmButtonColor: "#FF6633", 
    confirmButtonText: button_text, 
    cancelButtonText: "Cancel", 
    closeOnConfirm: true, 
    closeOnCancel: true }, 
    function(isConfirm) { 
    if (isConfirm) 
    { 
     location.href = href; 
    } 
    }); 
} 
1

Sto utilizzando TurboLinks 5 e nessuna delle soluzioni fornite ha funzionato per me, tranne questo. Probabilmente non è la soluzione più pulita ma funziona ...

Utilizzando sweetalert2 gem, aggiungere quanto segue al file application.js.

//Override the default confirm dialog by rails 
$.rails.allowAction = function(link){ 
    if (link.data("confirm") == undefined){ 
    return true; 
    } 
    $.rails.showConfirmationDialog(link); 
    return false; 
} 

//User click confirm button 
$.rails.confirmed = function(link){ 
    link.data("confirm", null); 
    Turbolinks.visit(link.attr('href')) 
} 

//Display the confirmation dialog 
$.rails.showConfirmationDialog = function(link){ 
    var message = link.data("confirm"); 
    swal({ 
    title: message, 
    type: 'warning', 
    confirmButtonText: 'Continue', 
    confirmButtonColor: '#0A6EFF', 
    showCancelButton: true 
    }).then(function(e){ 
    $.rails.confirmed(link); 
    }); 
}; 
0

Non sono riuscito a far funzionare nessuna delle soluzioni di cui sopra. (Rails 5, Turbolinks 5).

Infine, che cosa ha funzionato per me è stato quello di aggiungere il seguente CoffeeScript:

ready = -> 
    $('[data-sweet-alert-confirm]').on 'click', sweetAlertConfirm 
$(document).ready(ready) 
$(document).on('page:load', ready)