• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 jquery Elemente einbinden klappt nicht

R

_R_A_L_F_

Mitglied
Hallo,

ich möchte gerne einen DateTime Picker und einen Tabellen Sortierer in meine Homepage einbinden.

Beide funktionieren mittels jquery.

Das Problem ist je nachdem an welcher Stelle die JS - Datei: jquery-1.11.0.min.js aufgerufen wird funktioniert entweder das eine jquery oder das andere.

So sieht mein Code Aufbau aus:
HTML: 
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

<script type="text/javascript">
    $(function() {
        $("#tablesorter").tablesorter({sortList:[[6,0],[6,0]], widgets: ['zebra']});
        $("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});
    });
</script>

<script type="text/javascript" src="js/DateTimePicker.js"></script>
</head>
<body>

<script type="text/javascript">
                    // Datum und Uhrzeit PlugIn
            $(document).ready(function()
            {
                $("#dtBox").DateTimePicker({
               
                    dateTimeFormat: "dd-MMM-yyyy HH:mm:ss",
                    dateFormat: "dd-MMM-yyyy",
                    shortDayNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                    fullDayNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                    shortMonthNames: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
                    fullMonthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
       
                    titleContentDate: "Datum auswählen",
                    titleContentTime: "Zeit auswählen",
                    titleContentDateTime: "Datum und Uhrzeit auswählen",
               
                    setButtonContent: "Auswählen",
                    clearButtonContent: "Zurücksetzen",
                   
                    formatHumanDate: function(date)
                    {
                        return date.dayShort + ", " + date.dd + " " + date.month+ ", " + date.yyyy;
                    }
               
                });
            });
       
</script>
....

In dieser Darstellung funktioniert der Tabellen Sortierer. Wenn die JS - Datei: jquery-1.11.0.min.js über der Zeile: DateTimePicker.js steht funktioniert der DateTime Picker.

Wie kann ich das ganze so einbinden, dass beides funktioniert?

Hab mal gegoogelt und bin auf das noConflict() gestoßen aber ich weiß nicht wie ich es einbinden muss/soll.

Danke
 
Werbung:
- Die jQuery Library muss grundsätzlich vor jQuery Plugins eingebunden werden.
- Wenn etwas nicht funktioniert, Console checken.
- Zwei Script Container mit Ready-Event ist sinnfrei. Das lässt sich auch in einem gemeinsamen kapseln.
- NoConflict wäre bei unterschiedlichen Libraries mit $-Syntax notwendig. Das ist hier aber wohl nicht der Fall.
 
- Die Libary ist vor allem anderen eingebunden
- Das Ready Event ist doch nur beim DateTime Picker

Der Consolen Check bringt den Fehler, das im TableSorter ein Fehler ist. Die Zeile kann ich aber nicht posten, da sonst die 10000 Zeichen erreicht sind ;)

Was kann ich nun dagegen machen? Ich bin nicht gerade ein Javascript Profi :)
 
Zuletzt bearbeitet:
Werbung:
Auf der Seite gibt es keine ID options, $("#options") liefert ein leeres Objekt.
 
Selbst wenn ich die Zeile:
$("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});

rausschmeiß, ändert es nichts
 
Werbung:
Schweift zwar vom Thema aber dennoch in meinen Augen wichtig.

2x SQL Injection / Blind SQL Injection (Habe vollen Zugriff auf alle deine Datenbanken)
8x Cross-Site Scripting
 
Ja, stimmt. Es ist jedoch so: Wenn Du den tablesorter mit sortList initialisierst, darf die Tabelle nicht leer sein, andernfalls kommt es zu einem Fehler und das Skript bricht ab. Die Initialisierung des Datepickers wird dann nicht mehr ausgeführt.
 
Ok, und wie löse ich das Problem?

a) mit dem SortListe
b) SQL Injection / CrossSite Scirpting
 
Zuletzt bearbeitet:
Werbung:
Du könntest prüfen, ob die Tabelle einen Body hat. Müsste so funktionieren:
Code: 
$("#tablesorter:has(tbody)").tablesorter({sortList:[[4,0],[5,0]], widgets: ['zebra']});
 
Zu Sempervivum:
- hab das mal eingefügt und es funktioniert in soweit, dass die Tabelle auch gefüllt ist. Sonst will der DateTime Picker noch nicht. Aber ich versuch mal das abzuändern

Zu nookie:
- ich verwende noch kein mysqli. Wie muss ich das ganze dann einbinden, damit es sicher wird?
 
Werbung:
hab das mal eingefügt und es funktioniert in soweit, dass die Tabelle auch gefüllt ist. Sonst will der DateTime Picker noch nicht. Aber ich versuch mal das abzuändern
Zum Vergrößern anklicken....
Hm, bei mir funktioniert es. Wenn ich den has-Selektor habe, funktioniert auch der Datepicker. Auf der Seite, die du online hast, gibt es zwar ein tbody-Tag, jedoch ohne Inhalt. Du solltest dieses Tag wie zuvor weglassen, damit die Initialisierung des Tablesorters unterbleibt. Nach dem Submit ist die Tabelle dann gefüllt und alles sollte funktionieren.
 
Werbung:
ich hab das ganze jetzt so umgebaut, dass die Tabelle erst angezeigt wird sobald auch ein Inhalt für die Tabelle existiert. Denn mit Inhalt funktioniert dann auch der DateTime Picker bzw. wenn die Tabelle nicht da ist funktioniert der DateTime Picker auch wieder.
 
Benutze lieber gleich PDO mit Prepared Statements. Dann kannst du dir das escapen sparen, das wird denn schon übernommen ;)
 
Werbung:
B3nnoX schrieb:
Benutze lieber gleich PDO mit Prepared Statements. Dann kannst du dir das escapen sparen, das wird denn schon übernommen ;)
Zum Vergrößern anklicken....
Wenn er noch bei mysql hängt, wäre das wohl die schnellere Methode. Glaube kaum das er den nerv hat, dies dahingehend umzuschreiben. Grundsätzlich gebe ich dir recht mein Lieber. :*
 
Ich denke die Zeit sollte man sich auf jedenfall nehmen, auch für spätere Projekte. Sonst würde man es immer auf die schnelle Methode machen. Aber ok, beide Wege führen nach Rom und nun muss er für sich entscheiden ob er lieber Zeit investieren möchte oder es auf die schnelle Art machen will
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben