2017-04-07 3 views
0

So habe ich ein Formular mit remote: true und es funktioniert als ausgenommen, wenn ich auf der Formularseite bin.remote: true doe't arbeiten in einem modalen

Aber diese Form soll in einem modalen sein. Wenn ich das Formular im Modal versuche, funktioniert das nicht.

Ich habe 2 Fälle:

form_for(@report, remote: true, method: 'post') 

, die einen Fehler werfen, weil es für eine HTML-Vorlage suchen ist:

ReportsController#create is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: [] 

Und

form_for(@report, format: "js", remote: true, method: 'post') 

Folgen Sie einfach dem Link zu dem js Aussicht.

Ich bin mir ziemlich sicher, dass dieser Fehler aufgrund der Tatsache ist, dass ich diese Form geladen werden asynchron mit:

$.ajax({ url: "/form/url" }) 

Aber ich kann nicht herausfinden, was zu tun ist.

Als eine ergänzende Information verwende ich Vex lib für modale Anzeige.

+0

Haben Sie Fehler in der Browserkonsole? Ihre Annahme ist wahrscheinlich falsch, da der Treiber "rails-ujs" mit dynamisch hinzugefügten Elementen gut funktioniert, da er [Event-Handler aus dem Dokument delegiert] (https://github.com/rails/jquery-ujs/blob/master/src/rails.js)) anstatt sie an die Elemente selbst anzuhängen. Ich nehme an, Sie haben irgendwo einen Skriptfehler, der ihn davon abhält, seinen Job zu machen. – max

+0

Ja ich habe 406 Fehler: 'POST http: // localhost: 3000/hinzufügen/Bericht 406 (nicht akzeptabel)' in der Konsole (ohne das 'Format:: js') – tomtomtom

+0

Haben Sie irgendwelche Dateien (Bilder, Dokumente) das sind durch das Formular weitergegeben? – chumakoff

Antwort

0

konfrontierte ich das gleiche Problem und immer noch versuchen, es genau auf Figur warumremote: true wird in einem modalen nicht funktionieren, aber ich war in der Lage, das gleiche Verhalten manuell remote: true zu erhalten und das Hinzufügen des ajax Anruf zu überspringen.

So können Sie auch umgehen; überprüfen Sie diese (reduziert) Code, den ich in meinem _form.html.erb teilweise verwendet, die innerhalb des modalen wiedergegeben wird:

<div> 
    <%= form_tag company_users_url, id: "company-users-form" do |f| %> 
    Select file: <%= file_field_tag :file %> 
    <%= submit_tag "Send" %> 
    <% end %> 
<div> 

<script> 
    $("#company-users-form").submit(function(event){ 
    event.preventDefault(); 
    var formData = new FormData($(this)[0]); 

    $.ajax({ 
     url: '<%= company_users_url %>', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     enctype: 'multipart/form-data', 
     processData: false 
    }); 

    return false; 
    }); 
</script> 

Mit diesem Setup, ich zum ersten Mal einen regelmäßigen remote: true Anruf auf einer form verwenden, die eine modale öffnet, die das macht oben teilweise. Dann, innerhalb dieses Teils, wenn ich das Formular sende, wird der Anruf jetzt wieder als js gesendet, so dass meine js.erb Ansicht korrekt gerendert wird; in meinem Fall nur eine Zeile mit dem neuen modalen Inhalt:

$('#company-users-modal').html("<%= j(@new_content) %>"); 

Beachten Sie die Verwendung von formData der Einfachheit halber.

Verwandte Themen