Ankündigung

Einklappen
Keine Ankündigung bisher.

Symfony Forms in Tabview

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Symfony Forms in Tabview

    Hallo zusammen,

    versuche gerade eine Form in mehreren Tabs aufzuteilen und im letzten Tab alle eingegebenen Informationen aufzulisten.

    Leider scheitere ich daran. Stand jetzt habe ich 2 Tabs wo der User Informationen eingeben kann.


    Bekomme es leider nicht hin, wenn ich beim 1. Tab was eingebe und weiter klicke das Symfony die eingegebenen Daten zwischenspeichert.

    Habe einen weiter Button mit einer Action:

    PHP-Code:
    public function listAction(Request $request) {
        
    $form $this->createForm(OrderFormType::class);    
    $form->handleRequest($request);  

       if (
    $form->get('weiter')->isClicked() ){
            
    $form->getData();        
    var_dump$form->getData());    
    }    
    return 
    $this->render('order/order.html.twig', [
            
    'order'     => $form->createView(),    
    ]); } 
    Hat jemand einen Denkvorschlag wie ich beim weiter Button die Daten speichere. habe für jedes Tab ein Weiter-Button um zum nächsten Tab zu switchen. Nach dem letzten Weiter kommt ein Tab wo alle Informationen ausgegeben werden soll

    Bin um jeden Ratschlag dankbar

  • #2
    Dein Quellcode ist so leider nicht lesbar.
    STRG + SHIFT + V helfen dir vermutlich.

    Tabs werden üblicherweise im Frontend realisiert, Javascript / UI Bibliotheken bieten hier oft fertige Lösungen an: https://jqueryui.com/tabs/

    Ansonsten wenn du das "selbst" machen willst musst du eben die Daten zwischenspeichern, z.B. in der Session. Symfony wird das nicht von selbst tun.

    Kommentar


    • #3
      Was für ein Formular ist es denn?

      Einfach "so" eines, das du dir mit dem FormBuilder im Controller baust (ohne gemappte Entity), um da "irgendwie" Daten reinzubekommen? Dann müsstest du, wie mein Vorredner schon sagte, die Daten alle einzeln in der Session zwischenspeichern, bevor du sie am Ende in ihrer Gesamtheit in einer Entity persistierst.

      Das Session-Handling mit dem Framework ist aber super einfach und wie viele andere Standardfunktionalitäten, die das Framework abdeckt, gut dokumentiert.

      Wenn es ein Form mit einer gemappten Entity ist, reicht es wenn du die Entity in der Session zwischenspeichert, statt die ganzen einzelnen Datenwerte wie im ersten Beispiel. Da du in deinem Controller aber ->isClicked() fragst und nicht nicht ->isSubmitted() && -> isValid() und dementsprechend keine Validierung hast, gehe ich mal davon aus, dass es kein gemapptes Form ist.

      Wenn die Validierungen von Attributen der Entity in den einzelnen Steps da evtl. Probleme machen (not empty bspw., kommt aber erst in Step 2), müsste man da glaube ich mit ValidationGroups oder zur Not mit einer Aufteilung der Daten in auf die Forms gemappte Pseudo-Entities, deren Daten man zum Schluss beim Persistieren der richtigen Entity in jene setzt, etwas machen können.

      Kommentar


      • #4
        Leider scheitere ich daran. Stand jetzt habe ich 2 Tabs wo der User Informationen eingeben kann.
        da Du tabs nutzen willst, und keine neuen Seiten scheint mir das weniger eine php, denn eine js Lösung, nach welcher Du wohl suchst.
        Der submit wird erst am Ende ausgelösst, das weiter schaltet nur tabs um und rendert evtl. die form komponenete.

        Kommentar


        • #5
          Danke vorab für Eure Hilfe. Habe das Problem nun gelöst. Habe bei der Route eine Instance erstellt und gebe am Ende (Schritt 4) Die Daten, die auch automatisch in die DB gespeichert werden, aus. Nun Habe ich allerdings das Problem, das wenn ich bei Schritt 3 auf den Submitted Button klicke das er automatisch immer wieder auf Schritt 1 springt :/ mein Code sieht derzeit so aus:


          Code:
          class order extends Controller {
          /**      * @Route("/order", name="order")      **/ 
          public function listAction(Request $request)     {
          $data = new lavOrder(); 
          $form = $this->createForm(OrderFormType::class, $data); 
          $form->handleRequest($request);
          
          if ($form->isSubmitted() && $form->isValid()){  
          
          //$data =  $form->getData(); 
          $em = $this->getDoctrine()->getManager(); 
          $em->persist($data); $em->flush(); } 
          return $this->render('order/order.html.twig', [
          'order'     => $form->createView(), 'order_data'   => $data 
          ]); 
          } }
          Könnt ihr mir dort evtl. noch kurz einen Denkanstoß geben?

          die order.html.twig sieht wie folgt aus:

          Code:
           {% block body %}
          <div class="order-wrapper">     
             <div class="container">           
               <ul class="nav nav-tabs">           
                       <li class="active"><a data-toggle="tab" href="#schritt1">Schritt 1</a></li>
                                 <li><a data-toggle="tab" href="#schritt2">Schritt 2</a></li>     
                             <li><a data-toggle="tab" href="#schritt3">Schritt 3</a></li>     
                             <li><a data-toggle="tab" href="#schritt4">Schritt 4</a></li>        
                   </ul>        
                   <div class="order-content">         
                         <div class="tab-content"> 
          {{ form_start(order) }}                  
           {{ form_errors(order) }}
          <div id="schritt1" class="tab-pane fade in active"> Content von Schritt 1 </div> 
           <div id="schritt2" class="tab-pane fade"> 
          {{ form_widget(order.anrede) }
          {{ form_errors(order.anrede) }}
          {{ form_widget(order.vorname) }}
          {{ form_errors(order.vorname) }}
          {{ form_widget(order.name) }}
          {{ form_errors(order.name) }}
          {{ form_widget(order.strasse) }}
          {{ form_errors(order.strasse) }}
          {{ form_widget(order.plz) }}
          {{ form_errors(order.plz) }}
          {{ form_widget(order.ort) }}
          {{ form_errors(order.ort) }}
          {{ form_widget(order.email) }}
          {{ form_errors(order.email) }}
          </div>
          <div id="schritt3" class="tab-pane fade">
          {{ form_widget(order.bemerkungen) }}
          {{ form_errors(order.bemerkungen) }}
          <button id="test" type="submit" style="position: absolute;top: 100%;right:0;" class="btn btn-primary">Weiter</button>
          </div>
          <div id="schritt4" class="tab-pane fade">
          <tr>
          <td>Anrede: {{ order_data.anrede }}</td><br>
          <td>Vorname: {{ order_data.vorname }}</td><br>
          <td>Nachname: {{ order_data.name }}</td><br>
          <td>Straße: {{ order_data.strasse }}</td><br>
          <td>PLZ: {{ order_data.plz }}</td><br>
          <td>Ort: {{ order_data.ort }}</td><br>
          <td>E-Mail: {{ order_data.email }}</td><br>
          <td>Bemerkungen: {{ order_data.bemerkungen }}</td><br>
          </div> {{ form_rest(order) }}
          {{ form_end(order, {'render_rest': false}) }}
          <button  class="btn btn-primary pull-right next" style="cursor: pointer;"><span>Weiter</span></button> 
          </div>
          </div>
          </div> 
          </div>
          {% endblock %}

          Kommentar


          • #6
            das oben ist echt schwer zu lesen, auch nur ein button gefunden und mir ist nichtk klar, muss es auch nicht, wie du bis zu schritt 3 kommst.
            dann jedenfalls:
            HTML-Code:
              <button id="test" type="submit" style="position: absolute;top: 100%;right:0;" class="btn btn-primary">Weiter</button>
            submittest Du das Formular, so wie es aussieht und lädst wohl die seite neu. ein ajax call wäre wohl der geeignerte weg, oder eben das springen auf vier nach dem submit.

            Kommentar


            • #7
              Du könntest auch einmal dieses Bundle Testen:
              https://github.com/craue/CraueFormFlowBundle

              Die Demos sehen ganz gut aus für das was du machen möchtest:
              http://www.craue.de/symfony-playgrou...CraueFormFlow/

              Kommentar


              • #8
                Leider hänge ich immernoch daran feste das er mir nach dem Submitted die Seite reloadet. Hatte es mit javascript schon versucht, das er nach Submit auf Schritt 4 springt. Allerdings möchte er es auch nicht so machen - Könntet ihr mir vlt noch 1-2 Denkanstöße geben? Sorry für die dummen Fragen, bin noch ziemlicher neuling in Sachen Symfony etc.

                Liebe Grüße und einen sonnigen Wochenstart euch allen

                Kommentar


                • #9
                  ME. hat das wenig mit twig oder symfopny zu tun, sondern mit js.
                  Leider hast Du diesbezüglich uimmernoch keinerlei infos geposted.

                  Kommentar

                  Lädt...
                  X