Frage zur Konsole Forebog/Chrome und <div> Container

[selfmade01]

Hallo,

sorry erstmal wenn ich den Titel nicht anders beschreiben konnte.

Ich habe hier Regsiterkarten <ul><li> usw.

Alles was später in den <li> auftaucht wird durch <div id="blabla-1"> usw.
mit Ajax nachgeladen.
Dabei erhält jede Registerkarte eine eigene ID.

Das klappt auch ganz gut.

In Jeder Registerkarte wird bei klick ein Formular geladen.

Die Formular-Felder bzw. deren ID's bei den <input> sind in jeder Registerkarte gleich.

Wenn ich nun in einer Registerkarte das Formular erhalte und ohne es auszufüllen nun auf die nächste Registerkarte klicke dann sehe ich in unter Firebug in HTML das die erste Registerkarte auch noch einen Code enthält .
Dieser ist ausgegraut, also wohl inaktiv.

In der zweiten aktuellen Regsiterkarte sehe ich auch mein Formular jedoch aktiv.

Jetzt greife ich mit javascript auf die input-felder zu und da bekomme ich Probleme.

Ist es so, dass wenn ich mit Ajax entsprechend nur was nachlade, dass sich dann auch die Input-Felder (selbst wenn die Seite (Registerkarte) inaktiv ist, stets von den anderen input-feldern und deren ID unterscheiden müssen?

Grüße Jürgen

[selfmade01]

Hier ein Link

Hallo,

ich bitte nochmals um Eure Unterstützung
versuche gerade meine ganze Struktur umzubauen

habe mal ein Beispiel hier eingestellt
http://jsfiddle.net/c2ys47kh/

abgeaendert

Leider ist dort das Design nicht sauber zu sehen

Es geht wie schon erwähnt um Regsiterkarten.
Jede Registerkarte hat eine eindeutige ID in diesem Fall box1, box2 usw.
(die Nummern werden hier in meinem Programm über PHP vergeben und sind ID's einer Tabelle in der DB

Wie in dem Code ersichtlich sind die Container der Zeilen in jeder Box gleich
also row-1 , row-2 usw.
Es sind auch die Textfelder immer gleich.

Ich hätte nur eine eindeutige Zuordnung über die box1 oder box2.

Wie im script ersichtlich versuchte ich schon über diese box id darauf zuzugreifen.

Ich suche nun eine Möglichkeit wenn man verschachtelte Container hat wie man dann eindeutig auf die Unter-Container zugreifen kann.

ich bitte um Verständnis das wenn ich mich falsch ausdrücke in Sachen Container oder Eltern,- Kindelemente oder Knoten das man dies berücksichtigt.

Viele Grüße

Jürgen

Ps. dies oben ist nur eine Testseite für mich damit ich verstehen lerne wie man auf verschachtelte Elemente zugreift
Da ich später in diesen Registerkarten weitere Unterregister einfügen muss

Nachtrag:

mit der Erweiterung

var text  = $( "#box"+box+" div:nth-child("+row+") input[name*='Suess']" ).val();

kann ich nun direkt auf die verschiedenen Zeilen einer bestimmten Box zugreifen und finde dort alle input-felder mit dem Namen *suess*

Das Problem was ich nur noch habe sind die Buttons

ich verwende in dem Beispiel immer zwei Buttons.
Das musste ich so simulieren da ich mit Registerkarten arbeite in denen Templates nachgeladen werden.
Wenn ich also als erstes Box1 aufrufe dann funktioniert das noch mit dem

('.button2').click(function() {});

oder

('.button1').click(function() {});

rufe ich jedoch im Anschluss eine andere Registerkarte auf z.B. Box2
wird dort auch dieses Template geladen. der Unterschied ist nur in der angehängten Nummer an BOX also Box1 od Box2.....

Da ich nicht für jede einzelne Box gesondere Funktionen schreiben möchte
jedoch die Buttons die gleiche ID haben stellt sich nun die Frage
was ich machen muss damit jQuery erkennt aus welcher Box der Button angeklickt wurde ?

[selfmade01]

Definitiv dein zweiter Vorschlag. Aber wieso schreibst du die UserID in das Document? Sollte diese nicht in Sessions etc. gespeichert sein? Die UserID kann doch jeder im Document abändern. Somit könnte jemand anderes die Daten einer anderen Person beeinflussen.

Und wieso hast du weiterhin diese ZusatzIDs? Verwende doch einfach die Struktur deines Documents.

Hallo,

vieloen dank für die schnelle Antwort.

Das mit der Userid war und ist nur ein Beispiel.
Ja die wird in der Session abgespeichert.

In meinem Fall geht es um eine typeId und eine groupId.
Die PH-Werte die ich eintragen muss werden zu bestimmten Typen zugeordnet also Süsswasser oder Seewasser, dann gibt es bestimmte Becken die wieder bestimmten Gruppen zugeordnet sind z.B. Aufzucht, Niedere-Tiere, Pflanzen, Fische
so ungefähr muss man sich das vorstellen.

Da ich mit diesen ID's arbeiten muss, muss ich diese auch der Funktion irgendwie mitteilen

ich wusste gar nicht das es so eine einfaches Attribut wie data- gibt deswegen auch meine komische Fragerei

Sorry nochmals deswegen...

Jetzt muss ich erstmal meinen kompletten Code umbauen.


Ein wichtige Frage noch zur Gestaltung dieser Registerkarten, den Containern usw.:

Ich arbeite ja mit Parent und Child-Elementen
wobei sich bei mir auch alle Parent-Elemente unterscheiden müssen, da ich ja via Ajax die Regsiterkarten befülle.
Somit bleibt mir beim Wechsel von Regk-1 zu Regk-2 immer der alte HTML-Code im Browser.


ich würde das jetzt so machen

echo '<div id="tab-'.$typeId.'">';
       echo '<div id="row-1>';
       echo '</div>';
       echo '<div id="row-2>';
       echo '</div>';
     echo '<button class"button alleids" data-typeId="'.$typeId.'" data-groupID="'.$groupId.'" data-rowId="'.$row.'">klickmich</button>';
echo '</div>'; 

und hier ein Beispiel einer weiteren Registerkarte wobei sich das Elternelement mit der $typeId immer unterscheidet

echo '<div id="tab-'.$typeId.'">';// $typeId = 2
       echo '<div id="row-1>';
       echo '</div>';
       echo '<div id="row-2>';
       echo '</div>';
     echo '<button class"button alleids" data-typeId="'.$typeId.'" data-groupID="'.$groupId.'" data-rowId="'.$row.'">klickmich</button>';
echo '</div>'; 

echo '<div id="tab-'.$typeId.'">'; // $typeId = 3
       echo '<div id="row-1>';
       echo '</div>';
       echo '<div id="row-2>';
       echo '</div>';
     echo '<button class"button alleids" data-typeId="'.$typeId.'" data-groupID="'.$groupId.'" data-rowId="'.$row.'">klickmich</button>';
echo '</div>'; 

die Frage die ich mir nun stellen muss ist.
wenn alle Buttons die class = alleids
haben wie kann ich diese dann eindeutig ansprechen wenn ich zu diesem Zeitpunkt die "tab-'.$typeId.'" des Elternelements noch gar nicht kenne?

oder müsste dann die function

$( ".alleids" ).click(function() {
 
         var alles     = $(".alleids").data(); // lese ich alle data- Attribute aus
        //oder mit
         var nuruserid = $(".zusatzids").data("userid"); // erhalte ich nur die userid

      // und nun mach was damit

});

die data-typeId ermitteln um dann in der Folge mit dieser typeid ein child-Element zu bilden um auf die row-1 oder row-2 zugreifen zu können?

Denn ohne diese eindeutige Parent-ID die ja durch tab-"'.$typeId.'" bestimmt wird, wäre ja der Zugriff auf die Childs row-1 usw. gar nicht möglich oder?


Bitte nicht sauer sein.. ich weiss ich frage hier etwas nervig ich muss das aber richtig begreifen...

Danke fürs Verständnis

Grüße Jürgen

[Chris.]

Definitiv dein zweiter Vorschlag. Aber wieso schreibst du die UserID in das Document? Sollte diese nicht in Sessions etc. gespeichert sein? Die UserID kann doch jeder im Document abändern. Somit könnte jemand anderes die Daten einer anderen Person beeinflussen.

Und wieso hast du weiterhin diese ZusatzIDs? Verwende doch einfach die Struktur deines Documents.

[selfmade01]

Hallo an Alle,

ich glaube mit meiner obigen Fragestellung hatte ich mich zu verwirrend ausgedrückt.

Mittlerweile habe ich wohl gefunden nach was ich suchen musste und was mir hier empfohlen wurde
da ja der Eventhandler onclick den ich bei meinem Button verwende ein schlechter Programmierstil ist.

Ich wusste ja nicht das es unter HTML5 ein data- Attribut gibt was ich wieder ,mit Javascript oder jQuery auslesen kann.

Frage was ist nun zu empfehlen?:

das hier also meine Methode:

echo '<button class="button" onclick="meinefunction('.$userid.','.$zusatzId1.', '.$zusatzId2.' );">meinbutton</button>'; 

function meinefunction( userid, zusatzId1,zusatzId2)
{
//mach was
}

oder das ich den Button dem data- Attribut ausstatte mit

echo '<button class="button zusatzids" data-userid="'.$userid.'" data-zusatzId1="'.$zusatzId1.'" data-zusatzId2="'.$zusatzId2.'">meinbutton</button>'; 

und mit

$( ".zusatzids" ).click(function() {
 
         var alleids     = $(".zusatzids").data(); // lese ich alle data- Attribute aus
        //oder mit
         var nuruserid = $(".zusatzids").data("userid"); // erhalte ich nur die userid

      // und nun mach was damit

});

wäre diese letztere Methode dann ein sogenannter guter Programmierstil?

Grüße Jürgen

[selfmade01]

Hallo Chris,

ich muss mich erstmal für die wirklich hilfreichen Tipps und den ASufwand von Dir und den Anderen ganz herzlich bedanken... DANKE!!!

Ihr habt mir wirklich sehr die Augen geöffnet

Diese Einstellung

Ich werde dies nun auch auf der PHP-Seite nochmals gegenprüfen.
Ist für mich auch einfacher dies jetzt schon zu implementieren als später wenn die Anwendung doch mal öffentlich von mehreren genutzt werden sollte
Vielleicht war es bis dato auch die scheu mich mit regulären Ausdrücken zu beschäftigen da mich die Schreibweise doch ab und an umhaut
Aber gut ich traue es mir zu und irgend wann fresse ich das schon

Nein, musst du nicht. Du musst in deiner Validierung zunächst die einen vier Felder

genau das mache ich ja schon bzw. machte ich total umständlich ich jagte alles durch 1000 If Abfragen was aber totaler Blödsinn ist

Beispiel:

Meine Eingabefelder lauten alle
entweder
phsuessmin
phsuessmax
usw.

oder
phsalzmin
phsalzmax
usw.

jetzt nehme ich einfach jquery frage den radio-button ab ob der Wert bei 0 oder 1 ist und je nachdem
nehme ich dann
$("tab-1").find("input[name*='suess']").val();
oder
$("tab-1").find("input[name*='salz']").val();

da ich aber mit Regsiterkarten arbeite die zuvor schon geöffnet waren muss ich mit Eltern, Kind und weiteren Kind-Elementen arbeiten
Ich habe zwar durch die Container einen Eindeutigkeit aber ich brauche diese innerhalb der Container für die Kindeelemente auch
z.B.
<div id="Zeile-n">Eingabefelder</div>

Warum einen ganzen Request an den Server senden, wenn das Formular doch immer das selbe ist? Lade es doch einfach direkt beim Request,

Diese Argumentation leuchte mir auch ein nur ist es bei mir so.
Sorry zumindest für mein Verständnis so...

Lade ich Zeilen via CSS nach oder blende diese zuvor aus und lade sie bei klick nach
So muss ich ja auch alles parsen ich muss für jede Zeile den DIV Container ermitteln, denn die Felder usw... und dann schiebe ich zum Schluss wenn alles überprüft wurde in die DB

Passiert mir da was auf dieser Strecke und der Benutzer hat vielleicht zw. 40 und 60 Felder ausgefüllt sich eine großen Kopf darüber gemacht welche Werte er nun einträgt da es ja um Chemie-Werte geht die sein Aquariumwasser überwachen und einstellen sollen.

Wenn da irgend etwas schief geht, verliere ich evtl. alle mühsam eingegeben Werte

Wenn ich (was in diesem Fall den Server nicht großartig belastet da es wie schon gesagt eine lokale Anwendung ist, ja auch das kann man anders auslegen ) jeden Datensatz einzeln abspeichere so hängt dieser schon mal gesichert in der Datenbank. Das war und ist der Hauptgrund.
Ok.. an die CSS variante dachte ich nicht... aber wenn ich daran gedacht hätte hätte ich wahrscheinlich auch schiss diese anzuwenden und zu riskieren das dann alle Daten weg sind falls die Verbindung oder wass auch immer schief geht

Serverseitige Validierung ist immer sicherer.

das habe ich begriffen und das mache ich nun auch so

ich muss eh nun alles umschreiben

Ist wie in CSS. # = ID, . = Klasse, nichts = HTML-Element.

habe ich mittlerweile
hier
gelesen

SQL Query anhand von Parametern baut.

da ich es nun nochmals überprüfe auf PHP-Seite und auch die ganzen eingetragene Werte validiere

möchte ich zumindest beim Bau des SQL-Strings dann ein wenig dynamisch sein

Wieso den Query immer wieder neu bauen? Die Feldnamen verändern sich doch nie, oder liege ich falsch?

Genau... da ich aber den http-String auch so erstelle also:
settings.php?phsuessmin=6.08&phsuessmax=6.75 usw
und meine felder in der DB genaus bezeichnet sind könnte ich ja aus dem $_GET Array zumindest wenn ich die Werte validiert habe gleich den SQL-String erstellen oder?

Muss nicht viel anderst sein. Lediglich POST statt GET verwenden. Grund kann hier nachgelesen werden: http://stackoverflow.com/a/46639

da werde ich dann gleich nachlesen obwohl ich das nicht richtig von der Logik verstehe

wenn ich via Ajayx was absende und eine Antwort erwarte so ist das doch GET und wie das Post sein kann häää.
ok ich bin da eh ganz frisch hinter den Ohren

Grüße Jürgen

[selfmade01]

Du brauchst defivitiv ein besseres System

Bin schon dabei es umzuschreiben... mir sind Eure Argumente klar geworden das mein Stil ein großer Schei... war/ist

PS: Nur der Vollständigkeit halber:

<div>
    <form id="f1">
        <input type="text" value="588"/>
    </form>
    <form id="f2">
        <input type="text" value="588"/>
    </form>
</div> 

$("input").each(function(){
    alert("hier alle");
}
                    ); 

Edit: Zu spät...

auch das beispiel von Ditr ist mir sofort klar geworden das dies viel besser ist.

Nun möchte ich aber vermeiden das ich wieder grobe Züge falsch mache.

Frage:

Das ich mit Registerkarten arbeite und hier Zeilen nachgeladen werden ist bekannt.
Das ich diese eindeutig machen muss durch <div id="eindeutig1"> Container oder eindeutige ID's auch.

ob ich das mit <form> oder mit <div> mache ist ja egal so denke ich mal.

zumal wenn ich das Elternelement angeben kann so kann ich auch den Inhalt darin finden.
Ich vermute mal das geht dann auch mit Verschachtelungen wie Eltern=> Kind => Enkelkind
sorry
Aber ich glaube ihr wisst was ich meine.


Da ich nun auch die onclick="meinefunction(1,2,4,6)"; Variante überlege die ich bei meinen buttons anwende will ich nun den Rat befolgen für jeden Button eine eigen jquery $( "#button1id" ).click(function() anzulegen.

Ich habe nur noch ein Verständnisproblem wie ich die Parameter übergeben soll.
Bis dato habe ich das einfach in meine onclick reingeschrieben und schon hatte die Funktion alles was sie brauchte.

Wenn ich jedoch auf onclick verzichten sollte wie hier empfohlen , dann frage ich mich wie ich die Parameter in die Funktion bekomme.

Eine für mich nun umständliche Variante wäre via jQuery bei click das Elternelement zu ermitteln und dort unter Umständen hidden-id's abzufragen.

Ich muss ja die Werte die in das Formular eingegeben wurden nicht nur auslesen sondern auch bestimmten groupId's und typeId's zuweisen können mit denen ich arbeite

Habt ihr da noch einen Tipp...

Ach ja, bis dato habt ihr mir schon sehr geholfen, zumindest habe ich erkannt das mein Programmierstil völliger Nonsens war/ist

und die Empfehlung zu den selectors von jQuery war auch super da wurde es mir noch klarer vor den Augen


Grüße Jürgen

[Chris.]

Ich dachte ich könnte auf der PHP-Seite mir eine nochmalige Prüfung sparen da ich ja nicht im Web arbeite und der User der das Programm benutzt es ja schliesslich selber so wollte, also befürchte ich nicht von ihm oder einem seiner Mitnutzer das sie böswillig falsche Daten eingeben

Diese Einstellung habe ich bei Programmierern schon ziemlich oft gesehen und finde ich richtig richtig schlecht. Nur weil es wenige Leute verwenden soll die Anwendung schlecht und unsicher programmiert werden? Sehe ich nicht so! Es geht ja auch nicht nur darum, um die Sicherheit zu stärken, es geht auch um Fehlermeldungen und die Validierung, sodass eine Weiterverarbeitung überhaupt möglich ist.

Wie sollte ich das dann machen... dann müsste ich ja auch schon die einen 4 Felder oder die anderen 4 via Ajax nachladen so dass sie gar nicht erst vorhanden sind oder?

Nein, musst du nicht. Du musst in deiner Validierung zunächst die einen vier Felder überprüfen und dann die anderen. Wenn der User die Felder selbst aktiviert, dann muss man keine korrekte Weiterverarbeitung garantieren. Z.B. kannst du testen, ob Felder 1 aktiviert ist. Wenn ja, überprüfe die ersten vier Felder. Wenn nein, überprüfe die anderen vier Felder. Je nachdem, was das Ergebnis ist, ob Fehler auftraten oder ob keine der zwei Möglichkeiten in Frage kommt, gebe Fehlermeldungen aus.

ich wollte damit Folgendes erreichen:

Bei dieser Anmerkung geht es nicht um Sicherheit, sondern um Effizient. Warum einen ganzen Request an den Server senden, wenn das Formular doch immer das selbe ist? Lade es doch einfach direkt beim Request, blende es via CSS aus und blende es ein, sobald es benötigt wird. AJAX sollte nur verwendet werden, wenn auch ein Request von Nöten ist und Sinn macht.

Aber wie oben schon beschrieben habe ich damit kein Problem da ich dem User schon vorschreiben kann welchen Browser er nutzen soll.

[...]

aktuell prüfe ich die Eingabe noch via Javascript

1. Siehe Antwort ganz oben im Beitrag zu Einstellungen von Programmierern.
2. Validierung via JavaScript? Sollte mit PHP auch validiert werden. JavaScript ist immer client-seitig und daher nicht das sicherste. Eine Serverseitige Validierung ist immer sicherer.

Ich begreife das nur noch nicht so ganz mit dem selector wann ich ein "#" einen "." oder gar nichts davor hängen muss.

Ist wie in CSS. # = ID, . = Klasse, nichts = HTML-Element.

da mein http-String der mir die ganzen Daten liefert als keys den Datenfeldnamen in der mysql-db hat

Wie schon geschrieben. Mit Request-Paramentern vorsichtig sein. Da kann jeder reinschreiben, was er möchte. Daher vorsichtig sein, wenn man einen SQL Query anhand von Parametern baut. Wieso den Query immer wieder neu bauen? Die Feldnamen verändern sich doch nie, oder liege ich falsch?

Warum GET ? ich weiss nicht wie ich das anders hätte lösen können.

Muss nicht viel anderst sein. Lediglich POST statt GET verwenden. Grund kann hier nachgelesen werden: http://stackoverflow.com/a/46639

[selfmade01]

Hallo ,
wünsche ein frohes, gesundes und glückliches Jahr 2015

• Du schreibst, dass du per JavaScript Felder aktivierst und deaktivierst. Gehe auf Nummer sicher und validiere die Eingaben via PHP, wenn das Formular abgesendet wird.

Zuerst sind alle Felder beim Laden schon deaktiviert, das steht so im html-code.So zwinge ich den User erstmal auf einen Button zu klicken. Das ist der Radio.
so nun kann er nur noch 4 statt 8 Felder ausfüllen.

Ja die ganzen Fehlerprüfungen ob Zahl gleich richtig eingegeben wurde etc. passiert noch via Javascript.
Das mit den type=number ist ja auch so eine Sache. Ich habe eine Art RegExp für Pattern gesehen das soll wohl gut funktionieren auch mit aktuellen Browsern.

Beim Browser ist es bei mir nicht so wichtig.

Solange der Chrome, Firefox und ein aktueller IE damit noch klar kommen ist es gut.
Meine Anwendung läuft nicht im Web sondern meist nur lokal. Sie steuert mehrere Aquarien ob Süß ob Seewasser egal. Deswegen muss ich sehr sehr viel mit Tabellen arbeiten die in Abhängigkeit stehen und muss auch viele Daten eintragen und später messen die auch reingeschrieben werden sollen.

Zum Thema.

Ich dachte ich könnte auf der PHP-Seite mir eine nochmalige Prüfung sparen da ich ja nicht im Web arbeite und der User der das Programm benutzt es ja schliesslich selber so wollte, also befürchte ich nicht von ihm oder einem seiner Mitnutzer das sie böswillig falsche Daten eingeben

Ich musste nur vom User her ausschliessen das er kein O statt einer Null eingegeben hat usw..und ob die Kommas stimmen etc.

Ok ich könnte aber doch nochmal auf PHp Seite gegenprüfen.
Man weiss ja nie

• Es ist sehr einfach als Client deaktivierte Felder zu aktivieren. Du solltest nicht darauf bauen, dass die Felder immer korrekt aktiviert & deaktiviert sind.

Wie sollte ich das dann machen... dann müsste ich ja auch schon die einen 4 Felder oder die anderen 4 via Ajax nachladen so dass sie gar nicht erst vorhanden sind oder?

• Warum lädst du das Anfangsformular auch per JavaScript? Soweit ich aus früheren Antworten herauslesen konnte, ist in jeder Registerkarte das Formular das selbe.

Gute Frage
Ganz ehrlich. weil ich es cool finde
ich wollte damit Folgendes erreichen:
ich habe ja oben meine Menüleiste diese wird ganz normal geladen je nach Menüauswahl, also ganze Seite baut sich neu auf (diese Navbar wird immer mit includes in die Seiten eingebunden sowie meine header.php und der footer.php als auch die javascript.js als auch meine stylesheets oder die auth.php die die Session regelt oder die db.php die die Authentifizierung für die db.php regelt

Klickt man auf einen Button in der Navigationsleiste so baut sich die Seite mit dem ersten Inhalt neu auf.
Bei aktuellen Beispiel ist das eine Regisiterkarte.
Diese Regsiterkarte baut sich anhand von Daten auf die in der Datenbank stehen.
In diesem Beispiel um welche Typen von Becken es sich handelt. Süßwasser, Seewasser, Zucht,- oder Pflanzenbecken usw.

Für diese Becken kann der User nun Daten eingeben wie ph-Werte usw.
Ab dem Klick auf eine der Regsietrkarten wird alles nur noch via Javascript und Ajax nachgeladen
Grund:
Ich wollte somit den lästigen Seitenaufbau für die gesamte Seite vermeiden.
Es sieht für mich einfach gut aus, wenn sich die Seite nicht bewegt und ruck-zuck eine neue Zeile hinzugefügt wird oder aber später wenn die Daten schon in der Datenbank stehen, bei Klick eben diese Daten in die Registerkarte geladen werden.

Ich hatte das zuvor auf einer anderen Eingabeseite mal probiert. Dort ging es um das Anlegen von Aqua-Becken. Je nachdem ob er Süß,- oder Seewasser gewählt wurden dann nur noch entsprechende Formularfelder via Ajax nachgeladen. Das gefiel mir sehr gut und ich möchte dabei bleiben.

Wie gesagt, da die Anwendung erstmal nur lokal läuft und wenn überhaupt sie im Web mal erreichbar sein soll dann auch nur von dem User selbst benutzt werden kann, gehe ich von keiner Böswilligkeit aus.
Der User muss sich ja erstmal Authentifizieren um überhaupt rein zu kommen

• Mit Number-Type Input-Feldern auch vorsichtig sein. Es kann gut sein, dass das in älteren Browsern nicht so funktioniert, wie es sollte. Auch hier auf Validierung setzen.

das hatte ich schon gelesen und ist ja eine Neuerung seit HTML5,
Aber wie oben schon beschrieben habe ich damit kein Problem da ich dem User schon vorschreiben kann welchen Browser er nutzen soll.
Solange es mit den aktuellen geht wie Chrome, Firefox und einem aktuelle IE ist es ok.
Ich müsste das mit den type=number wohl nur noch mit dem Element pattern erweitern oder?
aktuell prüfe ich die Eingabe noch via Javascript und bei Komma-Eingabe ersetze ich dies einfach mit einem Punkt für meine mysql-db

ich werde das aber nun wohl doch nochmals unter PHP gegenprüfen.

• Das onclick-Attribut wird generell als Bad Practice angesehen. Siehe: Unobstructive JavaScript
  
  Verwende stattdessen Frameworks wie jQuery:

Als ich nun nach x-Jahren erstmals wieder mit php und Javascript in Berührung kam stolperte ich über jQuery und wusste damit gar nichts anzufangen.
Erst hier in diesem Forum wurde mir dessen Einfachheit bewusst und aktuell möchte ich es mehr und mehr nutzen. Früher verfluchte ich eigentlich Javascript mit jQuery komme ich aber besser zurecht.
Trotzdem fehlt mir noch vieles an Grundlagen.

So wie ich das jQuery verstehe ist das doch nur Javascript in umgekehrter Form oder?
Bei javscript habe ich ein onclick Event was dann eine Funktion aufruft
in jQuery dagegen habe ich eine Funktion die ein HTML-Element überwacht und dort auf was wartet wie auf den click oder?

$('selector').on('click', function() {}); 

Genau.
De jQuery selector bzw. die es davon gibt sind ja wirklich genial.
Ich habe gerade noch auf der jQeury Seite mir einige angesehen und festgestellt das ich ja einfach im name="" Attribut suchen kann nach einem bestimmten Namen.
Das ist bei mir genial. So erspare ich mir das ganze Filtern.

Aktuell bläht sich mein Javscript-code so wahnsinnig auf da ich eben alle Felder eingelesen habe.
Ich werde nun alles umschreiben .
Dann muss ich nur jede neue Zeile untersuchen da ich auf der DIV ID's zugreife und dann dort den radio auswerte um dann mit

$( "input[name$='dassucheich']" ).val( "gefunden" ); 

so nur das bekomme was ich brauche.

Ich begreife das nur noch nicht so ganz mit dem selector wann ich ein "#" einen "." oder gar nichts davor hängen muss. Auch muss ich noch sehr viel dazu lernen was die Kombination von Befehlen angeht. So spare ich mir dann wohl viel Schreibarbeit

• Um Formulare klar zu unterscheiden, schreibe dir Funktionen, um Daten abzuspeichern, neue Input-Felder hinzuzufügen, ... und handhabe es für jeden Button einzeln. D.h. in jQuery für jeden Button einen Selector hinzufügen für das click-Event und daraus folgend die bereitgestellten Funktionen ausführen.

Bingo. Ja, als ich diese Empfehlung von Dir gelesen habe und ich mir dann noch die Selector's bei jQuery ansah wurde es mir sofort bewusst. Genau so werde ich es auch machen. Das ist natürlich ideal.

Ich könnte mich in den Ar... beissen... da ich schon viel weiter sein könnte... ich muss jetzt ca.90% meines Codes in die Tonne kippen.

• Beim MySQL-Part direkt auf Prepared Statements mithilfe von mysqli bzw. PDO setzen. Das wird dir weiter viele Schmerzen ersparen. Dauert womöglich einen Ticken länger sich einzuarbeiten, ist es aber definitiv wert. Und auch hier nicht vergessen, die GET-Parameter zu validieren.

Habe mir gerade mal ein weinig was in Sache Prepared angesehen
ist eigentlich auch genau das was ich brauche, da ich meine Daten via $_Get bekomme und somit den mysql-string in einer Schleife erstellen lassen kann, da mein http-String der mir die ganzen Daten liefert als keys den Datenfeldnamen in der mysql-db hat (meine ganzen Input-felder sind mit dem Namen der Datensatz-Felder in der DB gleich.

• Auch solltest du in Sicherheit Zeit investieren. Es sollte nur das Script in der Lage sein, die Datenbank zu updaten.

das ist jetzt schon so, ich müsste nur noch die ganzen $_GET Werte überprüfen.

• Warum GET-Parameter? Wäre POST nicht viel einfacher und würde auch mehr Sinn machen, wenn man sich überlegt, was du mit den Parametern vor hast? Was meinst du mit AJAX-String? Meinst du eine JSON Repräsentation der Daten?

Warum GET ? ich weiss nicht wie ich das anders hätte lösen können.

Hier mein Anlauf

1) Formular (aktuell noch via onclick) übergibt die Daten an Javascript
2) in Javascript wird alles geprüft und entscheiden ob korrekt oder Abbruch
3) generieren des http-strings als array "data1"
4) aufruf dieser jQuery Funktion

              $.ajax({
                url:"pages/phecSettings.php", 
                type:'GET',
                data: data1,  // string mit keys und werten als array
                success:function(data){
                    $('#'+tab).html(data); // Schreibt die Ausgabe in den Container mit der id="tab"    
                }
              }); 

5) in phecSettings.php wird via $_GET der String ausgewertet und anhand der Daten was in die Datenbank geschrieben
(In Zukunft erfolgt eine nochmalige Überprüfung in der Seite phecSettings.php bevor eine weitere Aktion ausgeführt wird)
6) Nach Eintrag in die DB wird anhand einer ID emntschieden welches Template nachgeladen wird
- entweder Ende
- nur neue Eingabe-Zeile
- oder neue Eingabezeile mit zusätzlichen Eingabefeldern für Zeitangaben, Datumsangaben usw. die als Slider dann beim User auftauchen

Sorry das Ganze war jetzt etwas umfangreich... aber ich hoffe das so meine Denkweise wieso ich auch die Daten via $_Get verarbeite deutlicher wurde

Ich kenne aber keine andere Möglichkeit sonst in Verarbeitungsscripts wie hier dem phecSettings.php an die Daten zu kommen

Grüße Jürgen


ps.. in Sachen Datenbank (ich verwende mysqli ) muss ich auch hier meine ganze Datenbank-Strktur nochmals überarbeiten .
Ich benötige und habe sehr viele Abhängigkeiten
Da es um Aquariums eines Züchters geht gibt es Räume die bestimmte Becken haben Raum1 z.B Süßwasser, Raum2 z.B Seewasser, Raum3 z.B. Süwasserzucht usw.
in den Räumen gibt es bestimmte Becken, diese Becken haben wider bestimmte Inhalte, die Inhalte benötigen bestimmte Werte an PH/EC usw. dann gibt es für diese Becken bestimmte Pumpen und Reinigungsfilter und und und
Alles was ich hier aktuell für das Webfrontend mache und im Hintergrund in die DB geschrieben wird, wird später von einem Microcontroller ausgewertet der mit diesen Daten arbeiten muss um Pumpen und Filter sowie Lampen usw. steuern zu können.
Aus dem Grund muss ich wahnsinnig auf die korrekten Beziehungen der Tabellen untereinander achten.
Da brauch ich auch noch einiges an Wissen von mysql damit es mir hier nicht auch so geht wie unter meinen verrückten Javascript-Filter-Methoden die ich mir zu 90% ersparen hätte können

[Chris.]

jQuery ist für mich ein unabdingbares Framework. Aber bitte nicht den Fehler begehen und denken, dass jQuery kein JavaScript ist. jQuery ist ein JavaScript-Framework.

Ein bestimmtes jQuery Tutorial kenne ich nicht. Ich habe seit je her mit Google gearbeitet. Man findet meist Einträge in anderen Foren wie z.B. stackoverflow.com oder stoßt auf die jQuery Dokumentation, die wirklich sehr gut geschrieben ist und auch mit zahlreichen Beispielen ausgestattet ist.

Wichtig bei der Entwicklung mit JavaScript ist eben, dass man sich mit den Web-Entwickler Tools in Browsern auskennt, wie z.B. der Web-Konsole. Für mich in FF eines der wichtigsten Tools neben Bildschirmtester und Netzwerkanalyse. Für den Rest kommt FireBug in Einsatz.

Auch von mir: Guten Rutsch!

[selfmade01]

Hallo,
das was Du schreibst bereitet mir gerade sehr viele Gedanken zu meiner Struktur.
Ich kann vieles auch nachvollziehen, hätte aber bei einigen dingen noch Fragen.
ich will morgen darauf eingehen und würde mich sehr freuen hier ein wenig Hilfestellung zu bekommen.

Ja, mittlerweile habe ich gemerkt das jquery hier doch sehr hilfreich sein kann. Am Anfang hatte ich mich wirklich darum gewunden es einzusetzen, mittlerweile ist es für mich aber viel besser nach zu vollziehen (begreifbarer )als Javascript .

Ich bräuchte mal eine gutes Tutorial für jquery um mich da besser einzuarbeiten.
Wenn ich die Beispiele wie oben sehe dann macht es Klick und ich begreife es .

Bis morgen dann und einen guten Rutsch

Jürgen

[Chris.]

• Du schreibst, dass du per JavaScript Felder aktivierst und deaktivierst. Gehe auf Nummer sicher und validiere die Eingaben via PHP, wenn das Formular abgesendet wird. Es ist sehr einfach als Client deaktivierte Felder zu aktivieren. Du solltest nicht darauf bauen, dass die Felder immer korrekt aktiviert & deaktiviert sind.
• Warum lädst du das Anfangsformular auch per JavaScript? Soweit ich aus früheren Antworten herauslesen konnte, ist in jeder Registerkarte das Formular das selbe.
• Mit Number-Type Input-Feldern auch vorsichtig sein. Es kann gut sein, dass das in älteren Browsern nicht so funktioniert, wie es sollte. Auch hier auf Validierung setzen.
• Das onclick-Attribut wird generell als Bad Practice angesehen. Siehe: Unobstructive JavaScript
  
  Verwende stattdessen Frameworks wie jQuery:
  
  

  $('selector').on('click', function() {}); 

• Um Formulare klar zu unterscheiden, schreibe dir Funktionen, um Daten abzuspeichern, neue Input-Felder hinzuzufügen, ... und handhabe es für jeden Button einzeln. D.h. in jQuery für jeden Button einen Selector hinzufügen für das click-Event und daraus folgend die bereitgestellten Funktionen ausführen.
• Beim MySQL-Part direkt auf Prepared Statements mithilfe von mysqli bzw. PDO setzen. Das wird dir weiter viele Schmerzen ersparen. Dauert womöglich einen Ticken länger sich einzuarbeiten, ist es aber definitiv wert. Und auch hier nicht vergessen, die GET-Parameter zu validieren.
• Auch solltest du in Sicherheit Zeit investieren. Es sollte nur das Script in der Lage sein, die Datenbank zu updaten. Es ist wichtig, dass nicht irgendein Client die PHP-Datei aufrufen kann und wildes Zeugs in die Datenbank schreiben kann.
• Warum GET-Parameter? Wäre POST nicht viel einfacher und würde auch mehr Sinn machen, wenn man sich überlegt, was du mit den Parametern vor hast? Was meinst du mit AJAX-String? Meinst du eine JSON Repräsentation der Daten?

[selfmade01]

Lieber spät als nie ..

Habe versucht das Vorhaben noch genauer zu verstehen, aber habe es nicht lückenlos verstanden, um weiter Tipps hinsichtlich Struktur und Verbesserungen für die UX geben zu können. Bei weiteren Fragen einfach hier posten.

Hallo,
super das Du mir behilflich sein möchtest.

Ich werde jetzt eh alles umprogrammieren da ich mit meiner Variante einen viel zu großen Code habe.

Ich will es nochmals versuchen zu schildern was ich vorhabe.

Ich habe hier Registerkarten <ul><li> etc. in diesen Regsiterkarten wird bei onclick ein Formular geladen.
dieses besteht in der ersten Ansicht aus einer Zeile.
Diese Zeile besitzt meist 8 Eingabefelder, 2 Radio Buttons und eine Anzeige für die Woche (also pro Woche eine Zeile)

Da pro Zeile nur 4 Eingabefelder ausgefüllt werden dürfen, werden zuerst beim Laden alle Felder via Javascript gesperrt.
Nun muss der User einen der Radio-Button klicken um 4 der 8 zu aktivieren.

Dabei ist das Format der Felder 00.00 also 2 plus 2 Nachkommastellen.
Die Felder habe ich mit type="number" deklariert und auch die Anzahl der Stellen vor deklariert.

Hat der User alles ausgefüllt und den Button "absenden" geklickt (hier ist auch wieder ein onclick hinterlegt der bestimmte Variablen hat (Woche, Registerkarte und versch. id's)
Von diesen Buttons gibt es 3 Stück.

Der erste Button bewirkt das die eingegeben Daten im Hintergrund via Ajax abgespeichert werden und eine neue Zeile nachgeladen wird (wieder zum Eingeben der gleichen Daten nur für eine andere Woche) der zweite Button bewirkt das die Daten im Hintergrund abgespeichert werden, einen weitere Zeile geladen wird und zusätzlich werden noch weitere Eingabefelder und Auswahlfelder geladen, der Dritte Button bewirkt das die gesamte Eingabe abgeschlossen ist und somit nur noch das Ergebnis angezeigt wird.

der Zweite Button holt eine ziemlich umfangreiche Zeile. diese besteht nicht nur aus den ersten 8 Eingabefelder plus den radios zusätzlich werden auch Schieberegler geladen mit denen man Zeiträume und Start sowie Endzeiten bestimmen kann.

Das Problem was ich hatte.
Da ich ja alles ausgelesen habe also alle Input-Felder hatte ich das Problem wenn ich von Regsiterkarte zu Regsiterkarte gesprungen bin, dass dann im Hintergrund also im Seitenquelltext immer noch das erste Formular gespeichert war.
Somit hatte meine jquery-Suche mit each auch diese Input-Felder gescannt.
Ich musste also alles umständlich ausfiltern.
Auch musste ich nach den Eingabezeilen ausfiltern und zum Schluss noch welche der 8 Felder nun ausgewählt wurden usw...

Erst dann konnte der Ajax-string erstellt werden damit die Daten dann via http an eine php-seite gesendet werden die die Daten a) verarbeitet, also abspeichert etc. und b) noch die neuen Zeilen liefert


Aktuell funktioniert zwar alles wunderbar aber der Code sieht grausam aus.

Mit der Idee jede Zeile mit einer eindeutigen ID zu versehen habe ich die ganzen Probleme nicht mehr... ich habe das gerade schon getestet.

Den Http-String den lasse ich mir dann anhand des Ergebnisses der jquery find und each Funktion erstellen.

Auf der anderen Seite wo dann die Daten verarbeitet werden will ich auch den mysql string durch das $_GET-array automatisch erstellen lassen.
Aktuell wird noch nichts in die DB geschrieben da ich nur an den Frontend Funktionen gearbeitet habe


Ist das so nun besser verständlich?

Sorry aber ich kanns nicht besser beschreiben

Grüße Jürgen

[Chris.]

Lieber spät als nie ..

Habe versucht das Vorhaben noch genauer zu verstehen, aber habe es nicht lückenlos verstanden, um weiter Tipps hinsichtlich Struktur und Verbesserungen für die UX geben zu können. Bei weiteren Fragen einfach hier posten.

[selfmade01]

Du brauchst defivitiv ein besseres System als das, was du gerade hast. Das mag vllt. irgendwann einmal funktionieren, ist aber für Außenstehende nicht zu verstehen und nach 2 Monate nicht mehr wartbar.

PS: Nur der Vollständigkeit halber:


Edit: Zu spät...

Na ja zu spät ist Eure Info nicht gerade. Diese Seite die ich gerade baue ist zwar sehr umfangreich ich kann und werde sie aber noch ändern da ich mir mit Eurer Methode doch vieles an Code und an Filtern spare.

Grüße Jürgen

ps.. wow. nach Eurer Info ärgere ich mich gerade tierisch. da habe ich einen ganz schönen Bockmist gebaut
hätte ich hier nur mal früher die richtigen Fragen gestellt.
Wenn ich gewusst hätte das dies mit jquery so easy geht... aber wie immer man muss es erstmal wissen.
Das waren nun ein paar Tage umsonst Arbeit