Rails, AJAX - ein Modaler Dialog?

Ich bin interessiert, lernen, wie man AJAX ein modales Dialogfeld. In der Regel, wenn ich wollte fügen Sie ein modales Dialogfeld zu meiner Webseite Hinzugefügt habe ich die jquery-UI-dialog-code in meine main JS-Datei und verknüpft es, um eine ID.

Ich glaube, mit Schienen kann ich einen Link erstellen, der holt sich alle dialog-code vom server und öffnet dann das Dialogfeld.

Ist das wahr?

Wenn ja, können Sie mir helfen zu verstehen, indem ein einfaches Beispiel, wo alles Leben in der rails-MVC-Welt?

Dank

  • Die müssen nur verwenden, JqueryUI.dialog. Sie brauchen nicht einige spezielle Schienen
  • Was meinst du mit "holt sich alle dialog-code vom server"? Meinst du, Holen Sie die jQuery-code, der das Dialogfeld erstellen? Warum würden Sie nicht einfach diesen code in eine js-Datei, die enthalten ist in Ihrem layout oder Ansicht? Wenn Sie versuchen, um etwas abrufen, mit denen zu bevölkern, die den dialog, das ist eine andere Geschichte.
  • Hmm, gibt es mehr zu der Frage, die ich nicht beantworten unten? Wenn akzeptabel ist, würde ich mich über ein akzeptieren der Antwort 🙂
InformationsquelleAutor TheExit | 2010-10-31
  1. 36

    Gosh, fragte Sie das vor 4 Monaten so haben Sie wahrscheinlich dachte, dies aus jetzt. Ich hatte auch Schwierigkeiten, eine gute schreiben, bis auf, wie dies zu tun. Hier ist was ich herausgefunden:

    In was auch immer Seite, die Sie möchten, ziehen Sie dieses Dialogfeld, möchten Sie, dass ein div so (bemerken Sie nicht wollen, um dieses noch):

    <div id="person-form" title="Person" style="display:none"></div>

    In Sicht, Sie wollen auch einen Ajax-Aufruf zu ziehen, bis dieses Dialogfeld:

    <%= link_to 'Edit Profile', edit_person_path(person), :remote => true %>

    Natürlich, Sie wollen diese edit_person_path auf route, um eine Aktion. Die Aktion sollte machen ein js.erb, der hat so etwas wie den folgenden (in jQuery):

    $("#person-form").dialog({
  autoOpen: true,
  height: 600,
  width: 600,
  modal: true,
  title: 'Edit Person',
  buttons: {
    "Edit": function() { $("#edit_person_<%= @person.id %>").submit() },
  },
  open: function() {
    $("#person-form").html("<%= escape_javascript(render('form')) %>")
  },
});

    Hierdurch werden eine partial _form.html-Code.erb in das Dialogfeld ein.

    Hinweis: Sie müssen setup jQueryUI Stil als auch für den dialog Rendern nett und hübsch.

    • Hallo, kam gerade über dieses Beispiel. Vielen Dank, so ist es zumindest machen das modale Fenster auf dem Bildschirm erscheinen. Aber... es scheint, von Anfang an. Also, sobald ich in mein index-Ansicht es öffnet sich nicht wenn ich auf den remote link. Ich bin sicher, es sollte nicht so funktionieren. haben Sie vielleicht Anregungen?
    • Jinyoung - ich bin versucht zu implementieren eines Formulars in einem Dialogfeld über Ihre Führung. Mache ich was offensichtlich falsch? link vielen Dank
    • Hi thatdankent, ich glaube ich habe den Fehler gefunden und stellte es in Ihre Fragen. Viel Glück.
    • JinyoungKim arbeite ich auf Rendern einer modal-on-demand via javascript und ich sehe deinen code hier, würde meine ajax-controller-Methoden werden alle unterscheiden sich von normalen ajax für die oben genannten arbeiten? Und ich bin verwirrt von den ("#edit_person_<%= @person.id %>") string, ist dies eine form von jQuery Magie zu Unterwerfen, das richtige Modell auf den server?
    • ("#edit_person_<%= @person.id %>") ist, wie Sie wählen Sie das HTML-Formular-element in jQuery, so können Sie senden Sie es ab. Überprüfen Sie heraus, was die <%= escape_javascript(render('form')) %> wird gerendert. Diese form ist zu haben, die HTML-id des etwas entlang der Linien von "edit_person_4". Was auch immer, die id, müssen Sie die Schaltfläche "Bearbeiten" zu wählen, die form $("#HTMLID") ist, wie Sie wählen Sie ein element in der DOM über eine id in jQuery.
    InformationsquelleAutor Jinyoung Kim
Schreibe einen Kommentar