Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap Modal: Aus Modal Form heraus Daten per $_POST an die Hauptseite schicken

Einklappen

Neue Werbung 2019

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

  • Bootstrap Modal: Aus Modal Form heraus Daten per $_POST an die Hauptseite schicken

    Hallo Forum,
    Ich bin leider auf dem Gebiet jquery/ajax vollkommener Frischling.
    Ich habe eine Tabelle, in der ich zum editieren den Datensatz in einem Modal-Fenster anzeigen lasse. Dort kann ich die Werte auch ändern und beim schließen des Modals auch in der Haupttabelle so angezeigt.
    Da die Daten aber aus einer DB stammen, muss ich sie dort auch wieder eintragen. Leider hat keiner meiner Versuche bisher zum erfolg geführt, daher meine Frage:
    Wie muss ich das Script und das Modal Form anpassen, damit ich Daten in der Hauptdatei mit POST abrufen kann? Die erforderlichen librarys werden alle ordentlich in der header.php geladen.
    Wäre super, wenn jemand einen Tipp für mich hätte...
    LG Micha

    Hier meine Datei:

    PHP-Code:
    <!DOCTYPE html>
    <?php
        session_start
    ();
        
    $GLOBALS['SCRIPTNAME'] = basename(__FILE__);
        include(
    "header.php");
        
    $user check_user();
         if(!isset(
    $_SESSION['userid']) OR $user['funktion']!="VORSTAND") {
            include_once(
    "error.php");
            include(
    "footer.php");
            exit;
        }
    ScreenOut($_POST);
    ?>
        <script src="js/footable.min.js"></script>
        <script src="js/ie10-viewport-bug-workaround.js"></script>
        <link href="css/footable.bootstrap.min.css" rel="stylesheet">

        <div class="container">
        <h2>Mitglieder-Verwaltung</h2>
            <div class="example">
                <table id="editing-example" class="table" data-paging="true" data-filtering="true" data-sorting="true">
                    <thead>
                    <tr>
                        <th data-name="id" data-breakpoints="all" data-type="number">ID</a></th>
                        <th data-name="nummer" data-breakpoints="xs" data-type="number">Mitgl.Nr.</a></th>
                        <th data-name="name" >Name</a></th>
                        <th data-name="vorname" >Vorname</a></th> 
                        <th data-name="spitzname" data-breakpoints="all">Spitzname</th>
                        <th data-name="strasse" data-breakpoints="all">Strasse</th>
                        <th data-name="plz" data-breakpoints="all">PLZ</th>
                        <th data-name="ort" data-breakpoints="all">Ort</th>
                        <th data-name="telefon" data-breakpoints="all">Telefon</th>
                        <th data-name="email" data-breakpoints="all" >E-Mail</th>
                        <th data-name="status">Status</th>
                        <th data-name="team">Team</th>
                        <th data-name="funktion" data-breakpoints="xs">Funktion</th>
                        <th data-name="aktiv" data-breakpoints="xs">aktiv</th>
                    </tr>
                    </thead>
                    <tbody>
    <?php
                    $SQL 
    "SELECT * FROM mitglieder ORDER BY NUMMER ASC";
                    if(!
    $result $db->query($SQL))
                    { die(
    'Es ist ein Fehler aufgetreten!/n[' $db->error ' ]'); }
                    else
                    {    
                        while(
    $row $result->fetch_assoc())
                        {
    ?>
                    </tr>
                        <td><?php echo $row['ID']; ?></td>
                        <td><?php echo $row['NUMMER']; ?></td>
                        <td><?php echo $row['NAME']; ?></td>
                        <td><?php echo $row['VORNAME']; ?></td>
                        <td><?php echo $row['SPITZNAME']; ?></td>
                        <td><?php echo $row['STRASSE']; ?></td>
                        <td><?php echo $row['PLZ']; ?></td>
                        <td><?php echo $row['ORT']; ?></td>
                        <td><?php echo $row['TELEFON']; ?></td>
                        <td><?php echo $row['EMAIL']; ?></td>
                        <td><?php echo $row['STATUS']; ?></td>
                        <td><?php echo $row['TEAM']; ?></td>
                        <td><?php echo $row['FUNKTION']; ?></td>
                        <td><?php echo $row['GEMELDET']; ?></td>
                    </tr>
    <?php
                        
    }
                    }
                    
    mysqli_free_result($result);
    ?>
                    </tbody>
                </table>

                <!-- Modal -->
                <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
                    <style scoped>
                        .form-group.required .control-label:after {
                            content:"*";
                            color:red;
                            margin-left: 4px;
                        }
                    </style>
                    <div class="modal-dialog" role="document">
                        <form class="modal-content form-horizontal" id="editor" name="editor" role="form">
                        <!--<form class="modal-content form-horizontal" id="editor" method="post" action="mitgliederverwaltung.php">-->
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="editor-title">Add Row</h4>
                            </div>
                            <div class="modal-body">
                                <input type="number" id="id" name="id" class="hidden"/>
                                <div class="form-group required">
                                    <label for="nummer" class="col-sm-4 control-label">Mitglieds-Nr.</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="nummer" name="nummer" placeholder="Mitglieds-Nr." required>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label for="vorname" class="col-sm-4 control-label">Vorname</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="vorname" name="vorname" placeholder="Vorname" required>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label for="name" class="col-sm-4 control-label">Nachname</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Nachname" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="spitzname" class="col-sm-4 control-label">Spitzname</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="spitzname" name="spitzname" placeholder="Spitzname">
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label for="strasse" class="col-sm-4 control-label">Strasse</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="strasse" name="strasse" placeholder="Strasse" required>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label for="plz" class="col-sm-4 control-label">PLZ</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="plz" name="plz" placeholder="PLZ" required>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label for="ort" class="col-sm-4 control-label">Ort</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="ort" name="ort" placeholder="Ort" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="telefon" class="col-sm-4 control-label">Telefon</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-sm-4 control-label">eMail</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="email" name="email" placeholder="E-Mail">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="status" class="col-sm-4 control-label">Status</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="status" name="status" placeholder="Liga-Status">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="dob" class="col-sm-4 control-label">Team</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="team" name="team">
                                            <option value="">Team wählen...</option>
                                            <?php
                                            $SQL 
    "SELECT TEAMNAME FROM teams ORDER BY TEAMNAME ASC";
                                            foreach (
    $pdo->query($SQL) as $row
                                            {
                                                echo 
    "<option value="".$row['TEAMNAME']."">".$row['TEAMNAME']."</option>";
                                            }
                                            
    ?>
                                        </select>                        
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="funktion" class="col-sm-4 control-label">Funktion</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="funktion" name="funktion">
                                            <option value="">Funktion wählen...</option>
                                            <option value="1. Vorsitzender">1. Vorsitzender</option>
                                            <option value="2. Vorsitzender">2. Vorsitzender</option>
                                            <option value="Sportwart">Sportwart</option>
                                            <option value="Team-Captaion">Team-Captain</option>
                                            <option value="Co-Captain">Co-Captain</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="gemeldet" class="col-sm-4 control-label">aktiv?</label>
                                    <div class="col-sm-8" style="float:left;">
                                    <input class="form-control" type="checkbox" id="gemeldet" name="gemeldet">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" name="submit" id="submit" class="btn btn-success btn" value="Speichern">Speichern</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div> <!-- /container -->

    <!-- Placed at the end of the document so the pages load faster -->
    <script>
        jQuery(function($){
            var $modal = $('#editor-modal'),
                $editor = $('#editor'),
                $editorTitle = $('#editor-title'),
                ft = FooTable.init('#editing-example', {
                    editing: {
                        enabled: true,
                        addRow: function(){
                            $modal.removeData('row');
                            $editor[0].reset();
                            $editorTitle.text('Add a new row');
                            $modal.modal('show');
                        },
                        editRow: function(row){
                            var values = row.val();
                            $editor.find('#nummer').val(values.nummer);
                            $editor.find('#vorname').val(values.vorname);
                            $editor.find('#name').val(values.name);
                            $editor.find('#spitzname').val(values.spitzname);
                            $editor.find('#strasse').val(values.strasse);
                            $editor.find('#plz').val(values.plz);
                            $editor.find('#ort').val(values.ort);
                            $editor.find('#telefon').val(values.telefon);
                            $editor.find('#email').val(values.email);
                            $editor.find('#status').val(values.status);
                            $editor.find('#team').val(values.team);
                            $editor.find('#funktion').val(values.funktion);
                            $editor.find('#gemeldet').val(values.gemeldet);
                            $modal.data('row', row);
                            $editorTitle.text('Datensatz #' + values.nummer + ' bearbeiten...');
                            $modal.modal('show');
                        },
                        deleteRow: function(row){
                            if (confirm('Dieses Mitglied sicher löschen?')){
                                row.delete();
                            }
                        }
                    }
                }),
                uid = 10;
             $editor.on('submit', function(e){
                if (this.checkValidity && !this.checkValidity()) return;
                e.preventDefault();
                var row = $modal.data('row'),
                    values = {
                        nummer: $editor.find('#nummer').val(),
                        vorname: $editor.find('#vorname').val(),
                        name: $editor.find('#name').val(),
                        spitzname: $editor.find('#spitzname').val(),
                        strasse: $editor.find('#strasse').val(),
                        plz: $editor.find('#plz').val(),
                        ort: $editor.find('#ort').val(),
                        telefon: $editor.find('#telefon').val(),
                        email: $editor.find('#email').val(),
                        status: $editor.find('#status').val(),
                        team: $editor.find('#team').val(),
                        funktion: $editor.find('#funktion').val(),
                        gemeldet: $editor.find('#gemeldet').val(),
                    };

                if (row instanceof FooTable.Row){
                    row.val(values);
                } else {
                    values.id = uid++;
                    ft.rows.add(values);
                }
                $modal.modal('hide');
            });
        });
    </script>
    <?php
        
    include("footer.php");
    ?>
    </div>


  • #2
    Wie muss ich das Script und das Modal Form anpassen, damit ich Daten in der Hauptdatei mit POST abrufen kann?
    Gar nicht, das funktioniert so nicht (=> http Grundlagen). Das Script ist ja schon bei Dir im Browser ausgeliefert, kann also keine Daten mehr empfangen.
    Du musst ein zweites Script schreiben welches für Dich die Anpassungen in der Datenbank vornimmt. Dorthin kannst du die Daten schicken und per $_POST abgreifen.

    Kommentar


    • #3
      Hallo Jonas, danke für die Info. Könntes Du mir da evtl. ein wenig helfen? Das Script muss dann also ein jquery/ajay sein, welches die Daten aus dem Modal-Form sammelt und an die mitgliederverwaltung.php per POST überträgt.
      Ich habe da schon mal rumprobiert, aber irgendwie zieht er das script nicht
      PHP-Code:
        $(document).ready(function(){
      $(
      "#editor").submit(function(event){
      submitForm();
      return 
      false; });
      });    

      function 
      submitForm(){
      $.
      ajax({ type"POST",
      url"mitgliederverwaltung.php",
      cache:false,
      data: $('form#editor').serialize(),
      success: function(response){
      $(
      "#editor").html(response)
      $(
      "#editor-modal").modal('hide'); },
      error: function(){ alert("Error");
      }
      });

      Ich weiss auch nicht, wie genau ich das da einbinden und was ich in dem Ursprungs-Script ersetzen müsste.

      Kommentar


      • #4
        Du hast ja den Submit-Eventhandler für das Formular schon. Einfach dort rein.

        Kommentar


        • #5
          Oh mann, ... irgendwie gehts jetzt, ich hoffe mal, das ist nicht ganz verkehrt.
          PHP-Code:
                 $editor.on('submit', function(e){
                      $(
          "#editor").submit(function(event){
                      
          submitForm();
                      return 
          false;
                  });        
                       
          /*     
                      if (this.checkValidity && !this.checkValidity()) return;
                      e.preventDefault();
                      var row = $modal.data('row'),
                          values = {
                              nummer: $editor.find('#nummer').val(),
                              vorname: $editor.find('#vorname').val(),
                              name: $editor.find('#name').val(),
                              spitzname: $editor.find('#spitzname').val(),
                              strasse: $editor.find('#strasse').val(),
                              plz: $editor.find('#plz').val(),
                              ort: $editor.find('#ort').val(),
                              telefon: $editor.find('#telefon').val(),
                              email: $editor.find('#email').val(),
                              status: $editor.find('#status').val(),
                              team: $editor.find('#team').val(),
                              funktion: $editor.find('#funktion').val(),
                              gemeldet: $editor.find('#gemeldet').val(),
                          };
                      if (row instanceof FooTable.Row){
                          row.val(values);
                      } else {
                          values.id = uid++;
                          ft.rows.add(values);
                      } */

                      
          $modal.modal('hide');
                  });

                  function 
          submitForm(){
                      $.
          ajax({
                          
          type"POST",
                          
          url"mitgliederverwaltung.php",
                          
          cache:false,
                          
          data: $('form#editor').serialize(),
                          
          success: function(response){
                              $(
          "#editor").html(response)
                              $(
          "#editor-modal").modal('hide');
                          },
                      
          error: function(){
                          
          alert("Error");
                      }
                      });
                  } 
          Ich habe den Submit-Eventhandler jetzt ersetzt mit der ajax.funktion, dann gings aber noch nicht. Dann habe ich im modal-form die form-Parameter action="mitgliederverwaltung.php" method="post" ergänzt, und jetzt überträgt er mir auch die Daten. Ist ja immerhin schon was..

          Kommentar


          • #6
            Ganz verkehrt ists nicht, nein. Aber wenn du ein Formular per AJAX verschickst brauchst du eigentlich keine Parameter für Deinen <form>-Tag.

            Du solltest Dich vielleicht mal sauber einlesen in die Theorie. Die Verwendung der Dev-Tools Deines Browsers sind auch elementar für die Entwicklung mit JavaScript. Dort siehst du Fehler und kannst auch die Requests anschauen.

            Kommentar


            • #7
              Ok, danke, werde ich mich mal mit beschäftigen.

              Kommentar

              Lädt...
              X