Ankündigung

Einklappen
Keine Ankündigung bisher.

Anzeigen eines modalen Bereiches per JQUERY

Einklappen

Neue Werbung 2019

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

  • Anzeigen eines modalen Bereiches per JQUERY

    Hallo Forum,
    ich nutze für meine Seite ein jquery-plugin (footable) um Tabellendaten responsive darzustellen.
    Das klappt auch alles wunderbar, sortieren, suchen, Seiten-Aufteilung... nun versuche ich, meine Daten editierbar zu machen. In dem Beispiel klappt alles einwandfrei, nur wenn ich den Code bei mir in der Seite ausprobiere, lässt sich über den entsprechenden Button kein Formular öffnen. Ich hab schon alles hin und her kopiert, komm aber nicht auf den Fehler. Ich bin in jquery nicht so bewandert. Vielleicht kann mir ja hier jemand einen Tipp geben, wo das Problem liegt?
    Folgenden Code habe ich:
    PHP-Code:
    <?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;
        } 
    ?>
    <script>
        jQuery(function($){
            $('.table').footable();
        });
    </script>

    <link rel="stylesheet" href="css/footable.bootstrap.css">
    <link rel="stylesheet" href="css/footable.bootstrap.min.css">
    <script src="js/footable.js"></script>
    <script src="js/footable.min.js"></script>

    <!-- spacer (eins) bereich -->
    <div class="spacer eins">
        <?php if ($SCRIPT=="mitgliedervung") { echo '<span style="float:left;"><a title="Mitglied hinzufügen..." href="mitglied_add.php"><i class="fas fa-user-plus"></i></a>&nbsp;</span>'; } ?>
        <a href="index.html"><i class="fab fa-facebook"></i></a>
        <a href="index.html"><i class="fab fa-twitter"></i></a>
        <a href="index.html"><i class="fab fa-google-plus"></i></a>
        <a href="index.html"><i class="fab fa-instagram"></i></a>
        <a href="index.html"><i class="fab fa-snapchat"></i></a>
    </div>

    <!-- Inhaltsbereich -->
    <div class="inhalt" id="pagestart">
        <div class="inhaltbox-a">
            <h2>Mitgliederverwaltung</h2>

    <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
        <style scoped>
            /* provides a red astrix to denote required fields - this should be included in common stylesheet */
            .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">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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="firstName" class="col-sm-3 control-label">First Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
                        </div>
                    </div>
                    <div class="form-group required">
                        <label for="lastName" class="col-sm-3 control-label">Last Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="jobTitle" class="col-sm-3 control-label">Job Title</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
                        </div>
                    </div>
                    <div class="form-group required">
                        <label for="startedOn" class="col-sm-3 control-label">Started On</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dob" class="col-sm-3 control-label">Date of Birth</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <script>
            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('#id').val(values.id);
                            $editor.find('#firstName').val(values.firstName);
                            $editor.find('#lastName').val(values.lastName);
                            $editor.find('#jobTitle').val(values.jobTitle);
                            $editor.find('#startedOn').val(values.startedOn.format('YYYY-MM-DD'));
                            $editor.find('#dob').val(values.dob.format('YYYY-MM-DD'));

                            $modal.data('row', row);
                            $editorTitle.text('Edit row #' + values.id);
                            $modal.modal('show');
                        },
                        deleteRow: function(row){
                            if (confirm('Are you sure you want to delete the row?')){
                                row.delete();
                            }
                        }
                    }
                }),
                uid = 10;

            $editor.on('submit', function(e){
                if (this.checkValidity && !this.checkValidity()) return;
                e.preventDefault();
                var row = $modal.data('row'),
                    values = {
                        id: $editor.find('#id').val(),
                        firstName: $editor.find('#firstName').val(),
                        lastName: $editor.find('#lastName').val(),
                        jobTitle: $editor.find('#jobTitle').val(),
                        startedOn: moment($editor.find('#startedOn').val(), 'YYYY-MM-DD'),
                        dob: moment($editor.find('#dob').val(), 'YYYY-MM-DD')
                    };

                if (row instanceof FooTable.Row){
                    row.val(values);
                } else {
                    values.id = uid++;
                    ft.rows.add(values);
                }
                $modal.modal('hide');
            });
    </script>
        <div id="paging-ui-container"></div>

            <table id="editing-example" data-editing="true" class="table" data-paging="true" data-filtering="true" data-sorting="true">
                <thead>
                <tr>
                    <th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
                    <th data-name="firstName">First Name</th>
                    <th data-name="lastName">Last Name</th>
                    <th data-name="jobTitle" data-breakpoints="xs">Job Title</th>
                    <th data-name="startedOn" data-breakpoints="xs sm" data-type="date" data-format-string="MMMM Do YYYY">Started On</th>
                    <th data-name="dob" data-breakpoints="xs sm md" data-type="date" data-format-string="MMMM Do YYYY">Date of Birth</th>
                </tr>
                </thead>
                <tbody>
                <tr data-expanded="true">
                    <td>1</td>
                    <td>Dennise</td>
                    <td>Fuhrman</td>
                    <td>High School History Teacher</td>
                    <td>November 8th 2011</td>
                    <td>July 25th 1960</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Elodia</td>
                    <td>Weisz</td>
                    <td>Wallpaperer Helper</td>
                    <td>October 15th 2010</td>
                    <td>March 30th 1982</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Raeann</td>
                    <td>Haner</td>
                    <td>Internal Medicine Nurse Practitioner</td>
                    <td>November 28th 2013</td>
                    <td>February 26th 1966</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Junie</td>
                    <td>Landa</td>
                    <td>Offbearer</td>
                    <td>October 31st 2010</td>
                    <td>March 29th 1966</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Solomon</td>
                    <td>Bittinger</td>
                    <td>Roller Skater</td>
                    <td>December 29th 2011</td>
                    <td>September 22nd 1964</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Bar</td>
                    <td>Lewis</td>
                    <td>Clown</td>
                    <td>November 12th 2012</td>
                    <td>August 4th 1991</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Usha</td>
                    <td>Leak</td>
                    <td>Ships Electronic Warfare Officer</td>
                    <td>August 14th 2012</td>
                    <td>November 20th 1979</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Lorriane</td>
                    <td>Cooke</td>
                    <td>Technical Services Librarian</td>
                    <td>September 21st 2010</td>
                    <td>April 7th 1969</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Nelly</td>
                    <td>Lusher</td>
                    <td>Broadcast Maintenance Engineer</td>
                    <td>October 21st 2013</td>
                    <td>February 16th 1983</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <?php
        
    include("footer.php");
    ?>
    </div>
    Funktioniert alles einwandfrei, auch der Button Edit rows funktioniert. Es werden dann hinter jedem datensatz die Buttons für edit und delete angezeigt. Klicke ich da jetzt drauf, passiert gar nichts. Ich weiß auch nicht, ob man jquery irgendwie debuggen kann.
    Bin für jeden Tipp dankbar!

    LG Micha

  • #2
    Klicke ich da jetzt drauf, passiert gar nichts. Ich weiß auch nicht, ob man jquery irgendwie debuggen kann.
    Bin für jeden Tipp dankbar!
    https://www.google.com/search?q=chro...wicklerkonsole

    bspw.

    Kommentar


    • #3
      Wie Kollege Tom schon sagt: Blick die Entwicklerkonsole.

      Könnte am Einbinden liegen. Jquery sehe ich nirgends eingebunden. Du rufst .footable() auf bevor du footable.js einbindest. Das doppelte Einbinden von .js und .min.js ist auch unnötig, eine Version reicht (auch beim css).

      Reihenfolge der Einbindung:
      1. jquery
      2. Plugin
      3. Dein Script mit dem Aufruf

      Speicher Dein Javascript in einer separaten Datei (.js) und binde es ebenfalls in der Seite ein. Das erleichtert die Fehlersuche und sorg für eine bessere Übersichtlichkeit.

      Kommentar

      Lädt...
      X