nach Ajax Anfragekein CSS/jQuery

devshack · 23. November 2018

Hallo Community

ich hab hier ein kleines Problem, nutzt Ajax Request um Daten aus einer mMySQl Datenbank zu holen und per Live Search zu durchsuchen. Allerdings ignoriert er dabei einige Dinge. CSS Styles, Funktionen vom Tabelsorter etc. ...

Darstellung sollte wie folgt aussehen:

Heraus kommt aber:

Den Tablesorter lade ich eigentlich mit $(".tablesorter").tablesorter('refresh'); ja neu bzw. refresh diesen, damit geht die Sortierung, die Pfeile dazu fehlen aber, genauso das Focus-Highlight oder das Spalte x y breit sein soll. Ist bestimmt was ganz simples aber ich she vor lauter Bäume gerade kein Licht :-(

HTML:

<html lang="de">
    <head>
        <link href="../css/nexus.css" rel="stylesheet">
        <link href="../css/theme.tablesorter.css" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="../script/jquery.min.js"></script>
        <script type="text/javascript" src="../script/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="../script/widget-editable.js"></script>
        <script id="js">
        $(function()
        {
            $("#table")
            .tablesorter({
                theme : 'blue',
                widgets: ['editable'],
                widgetOptions: {
                    editable_columns       : [0,1,2],       // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
                    editable_enterToAccept : true,          // press enter to accept content, or click outside if false
                    editable_autoAccept    : true,          // accepts any changes made to the table cell automatically (v2.17.6)
                    editable_autoResort    : false,         // auto resort after the content has changed.
                    editable_validate      : null,          // return a valid string: function(text, original, columnIndex) { return text; }
                    editable_focused       : function(txt, columnIndex, $element) {
                        // $element is the div, not the td
                        // to get the td, use $element.closest('td')
                        $element.addClass('focused');
                    },
                    editable_blur          : function(txt, columnIndex, $element) {
                        // $element is the div, not the td
                        // to get the td, use $element.closest('td')
                        $element.removeClass('focused');
                    },
                    editable_selectAll     : function(txt, columnIndex, $element) {
                        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
                        // only select everthing within the element when the content starts with the letter "B"
                        return /^b/i.test(txt) && columnIndex === 0;
                    },
                    editable_wrapContent   : '<div>',       // wrap all editable cell content... makes this widget work in IE, and with autocomplete
                    editable_trimContent   : true,          // trim content ( removes outer tabs & carriage returns )
                    editable_noEdit        : 'no-edit',     // class name of cell that is not editable
                    editable_editComplete  : 'editComplete' // event fired after the table content has been edited
                }
            })
            // config event variable new in v2.17.6
            .children('tbody').on('editComplete', 'td', function(event, config) {
                var $this = $(this),
                    newContent = $this.text(),
                    cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
                    rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id
                    // Do whatever you want here to indicate
                // that the content was updated
                $this.addClass( 'editable_updated' ); // green background + white text
                setTimeout(function() {
                    $this.removeClass( 'editable_updated' );
                }, 500);
                    /*
                $.post("mysite.php", {
                    "row"     : rowIndex,
                    "cell"    : cellIndex,
                    "content" : newContent
                });
                */
            });
        });
        </script>
    </head>
    <body>
        <div id="body-bg">
            <?php
                $current = "procos";
                $ipage = 'header.php';
                if (isset($_GET['page']))
                {
                    $page = basename($_GET['page']);
                    $tpage = $page . '.php';
                    if (file_exists($tpage))
                    {
                        $ipage = $tpage;
                    }
                }
                include($ipage);
            ?>
            <div id="content" class="bottom-border-shadow">
                <div class="container background-white bottom-border">
                    <div class="row margin-vert-30-0">
                        <div class="col-md-12">
                            <div class="headline">
                                <h2 class="text-center">Procos Übersicht</h2>
                                <hr class="kreis">
                            </div>
                        </div>               
                        <div class="col-md-12">
                            <table>
                                <tr>
                                    <th style="width:345px;" class="left">
                                        Such &amp; Filterfunktion
                                    </th>
                                </tr>
                                <tr>
                                    <td class="left">
                                        Motivname / Artikelnummer
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-addon">Suche:</span>
                                            <input type="text" name="search_text" id="search_text" placeholder="Suchbegriff eingeben" class="form-control" style="max-width:100%;" />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <hr class="margin-bottom-5 margin-top-5">
                        </div>
                        <div class="col-md-12">
                            <form class="" method="post">
                                <div style="overflow-x:auto;" class="margin-bottom-5">
                                    <div id="result"></tbody></table></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <hr class="margin-top-0">
                    <a href="#"><img class="myBack" src="../images/typo/top_arrow.png" alt="Seitenanfang"></a>                   
                </div>
            </div>
            <div id="footer" class="background-grey">
                <div class="container">
                    <div class="row">
                        <div id="footermenu" class="col-md-8">
                            <ul class="list-unstyled list-inline">
                                <li>
                                     vom <?php echo date ('d.m.Y');?>
                                </li>
                            </ul>
                        </div>
                        <div id="copyright" class="col-md-4">
                            <p class="pull-right">&copy;  GmbH - <?php echo date ('Y');?></p>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            $(document).ready(function()
            {
                load_data();
                function load_data(query)
                {
                    $.ajax(
                    {
                        url:"procos_archiv_fetch.php",
                        method:"POST",
                        data:{query:query},
                        success:function(data)
                        {
                            $('#result').html(data);
                            $(".tablesorter").tablesorter('refresh');
                        }
                    });
                }
                $('#search_text').keyup(function()
                {
                    var search = $(this).val();
                    if(search != '')
                    {
                        load_data(search);
                    }
                    else
                    {
                        load_data();
                    }
                });
            });
            </script>
        </div>
    </body>
</html>

PHP:

<?php
$mysqli = mysqli_connect("localhost", "root", "", "walzenliste"); $mysqli->set_charset("utf8");
$output = '';
if(isset($_POST["query"]))
{
    $search = mysqli_real_escape_string($mysqli, $_POST["query"]);
    $query = "SELECT * FROM db_procos WHERE lower(motivname) LIKE lower('%".$search."%') OR lower(artikelnummer) LIKE lower('%".$search."%')";
}
else
{
    $query = "SELECT * FROM db_procos ORDER BY Motivname";
}
$result = mysqli_query($mysqli, $query);
if(mysqli_num_rows($result) > 0)
{
    $output .= '
            <table class="tablesorter options focus-highlight widget-zebra" data-sortlist="[[2,0]]">
                <thead>
                    <tr>
                        <th style="">Motivname</th>
                        <th style="width:150px;">Artikel-Nr.</th>
                        <th style="width:90px;">Format</th>
                        <th class="sorter-false" style="width:36px;"><img src="../images/typo/anzahl.png" alt="Anzahl"></th>
                        <th style="width:90px;">Eingang</th>
                        <th style="width:90px;">Vorlage</th>
                        <th style="width:90px;">PDF</th>
                        <th style="width:90px;">Proof</th>
                        <th style="width:90px;">Freigabe</th>
                        <th style="width:90px;">Versand</th>
                        <th class="sorter-false" style="width:36px;"><img src="../images/typo/notizen.png" alt="Notizen"></th>
                        <th style="width:60px;">Wert</th>
                        <th style="width:80px;">Ergebnis</th>
                        <th class="sorter-false" style="width:36px;"><img src="../images/typo/edit.png" alt="Editieren"></th>
                    </tr>
                </thead>
            <tbody>';
    while($row = mysqli_fetch_array($result))
    {
        $output .= '
            <tr>
                <td>'.$row["motivname"].'</td>
                <td>'.$row["artikelnummer"].'</td>
                <td>'.$row["format"].'</td>
                <td>'.$row["farbanzahl"].'</td>
                <td>'.$row["muster_eingang"].'</td>
                <td>'.$row["vorlage_eingang"].'</td>
                <td>'.$row["pdf"].'</td>
                <td>'.$row["proof"].'</td>
                <td>'.$row["freigabe"].'</td>
                <td>'.$row["versand"].'</td>
                <td>'.$row["notizen"].'</td>
                <td>'.$row["wert"].'</td>
                <td>'.$row["ergebnis"].'</td>
                <td><cite title="Auftrag bearbeiten"><a href="procos_change.php?id='.$row["id"].'" class="fa-pencil"></a></cite></td>
            </tr>';
    }
    echo $output;
}
else
{
    echo 'Keine passenden Daten gefunden';
}
?>

Sempervivum · 23. November 2018

Zwei Dinge fallen mir auf:

Du hast zwar in deinem div#resultdie schließenden Tag für tbody und table aber Du überschreibst mit $('#result').html(data); diese, so dass beide im resultierenden HTML nicht mehr geschlossen sind. Besser auch die schließenden Tags im PHP generieren, dann ist es auch besser lesbar.

Durch das Überschreiben des gesamten HTML legst Du die Tabelle neu an, wobei offenbar die Pfeile verloren gehen und durch "refresh" werden diese anscheinend nicht neu angelegt.
Versuche entweder:
Das Grundgerüst der Tabelle mit dem Header statisch zu halten und nur die Zeilen im Body mit Ajax zu aktualisieren. Dann sollte es mit dem "refresh" keine Problem gegen.
oder:
die Tabelle wie vorhanden komplett neu anzulegen, aber vor dem Ajax mit destroy die alten Zusätze vom Tablesorter zu entfernen und nach dem Laden die Tabelle komplett neu zu initialisieren.

EuroCent · 2. Dezember 2018

Warum die ganze Tabelle neu machen?
So wie es @Sempervivum geschrieben hat, reicht es wenn Du den tbody neu beladen lasst.

Zudem schreibst Du dass du es mit $('.tablesorter') lädst, aber in deinem Code hast du $('#table')

nach Ajax Anfragekein CSS/jQuery

devshack

Grünschnabel

Sempervivum

Erfahrenes Mitglied

EuroCent

Klappstuhl 2.0

Neue Beiträge