JavaScript Frage, jQuery prüfung beim Seite laden

[Domi83]

Hallo Leute, ich habe mal eine kleine aber einfache Frage... denke ich.
In einem internen Bereich habe ich für einige Kollegen von mir, eine Erfassungsmaske von Daten (Versicherungsnehmer) gebaut. Wenn sich der VALUE von einem SELECT Feld verändert, soll ein INPUT Feld disabled werden.

<script type="text/javascript"><!--
 jQuery(document).ready(function() {
  $("#versicherer").change(function() {
   var versid = $(this).val();
   $.cookie("versicherer", versid, {path : '/intern/'});
  });

  $("#verstarif").change(function() {
   if($("#verstarif").val() == 'jahres') {
    $("#input01").prop('disabled', true);
    $("#input02").prop('disabled', false);
   } else {
    $("#input01").prop('disabled', false);
    $("#input02").prop('disabled', true);
   };
  });
 });
--></script>

Das funktioniert auch alles soweit. Wenn der Tarif eine Jahresversicherung ist, werden die entsprechenden Felder disabled oder eben nicht. Nun nach dem SUBMIT, möchte ich aber gerne das die Werte "disabled" mit übernommen werden. Kann man das irgendwie ganz einfach in jQuery schreiben, oder muss ich zusätzlich zu dieser jQuery Prüfung auch noch eine PHP Prüfung erstellen damit er dieses dann übernimmt / übergibt?

Gruß, Domi

 

[Madman1209]

Hi,

was heißt "nach dem SUBMIT, möchte ich aber gerne das die Werte "disabled" mit übernommen werden"? Wohin übernommen? Auf den Server? Dann kommst du natürlich nicht um PHP herum.

Erkläre mal genauer, das ist für meine Begriffe nicht eindeutig genug formuliert.

VG,
Mad

 

[CapFuture]

Formular Felder, die disabled sind, werden nicht übernommen.

Du kannst vor dem Abschicken entweder das Disable-Flag entfernen, oder du bastelst dir etwas mit Input-Feldern des Types "hidden" zusammen. Sie scheinen für deine Zwecke besser geeignet zu sein.

 

[Domi83]

@Madman1209, ich versuche es mal besser zu erklären. Vermutlich war meine erste Erklärung etwas "doof"
Wenn SUBMIT Gedrückt wird, werden die ganzen Daten in eine SQL Datenbank gespeichert und es kann der nächste Datensatz eingetragen werden. Da wir oft, wiederholte Daten haben, habe ich für die SELECT Felder schon mal eingestellt das diese so stehen bleiben wie sie vorher waren.

Ich möchte also den Status von einem SELECT Feld beim Absenden (Submit) übernehmen. Nicht irgendwo hin oder so etwas, er soll einfach bestehen bleiben. Sprich, gehe ich aus einem Zimmer raus und mache die Tür zu, soll der Lichtschalter nicht das licht automatisch wieder anschalten, sondern ausgeschaltet lassen.

Hoffe das Beispiel war Verständlicher oder besser als mein erstes

@CapFuture, das Disable-Flag möchte ich ja an sich gar nicht entfernen. Es soll bestehen bleiben, aufgrund einer Vorauswahl.

Ich habe ein SELECT Feld (feld01) und dieses soll ja den Disable-Flag mit Hilfe von jQuery setzen. Mein VALUE für feld01 wird übernommen, aber der Disable-Flag verschwindet und wird halt nicht beibehalten. Und das möchte ich halt nicht.

Gruß, Domi

 

[DaVian]

Nachdem ja die auswahl von dem Select wieder dort steht. Reicht im jQuery(document).ready(...) nachdem der Select Wert wieder gsetzt worden ist ob der gesetzte Wert ein Jahrestarif ist...dann werden die Felder halt wieder disabled.

Hoffe ich hab deine Frage richtig verstanden.

 

[Domi83]

Okay, also wenn ich Dich richtig verstanden habe, muss ich das also so schreiben....

<script type="text/javascript"><!--
 jQuery(document).ready(function() {
  if($("#verstarif").val() == 'jahres') {
    $("#reiseende").prop('disabled', true);
    $("#gebkind").prop('disabled', false);
   } else {
    $("#reiseende").prop('disabled', false);
    $("#gebkind").prop('disabled', true);
   };
  });

  $("#versicherer").change(function() {
   var versid = $(this).val();
   $.cookie("versicherer", versid, {path : '/intern/'});
  });

  $("#verstarif").change(function() {
   if($("#verstarif").val() == 'jahres') {
    $("#reiseende").prop('disabled', true);
    $("#gebkind").prop('disabled', false);
   } else {
    $("#reiseende").prop('disabled', false);
    $("#gebkind").prop('disabled', true);
   };
  });
 });
--></script>

Ist das korrekt?

 

[DaVian]

Ja zum Bsp. Könntest ja den gleichen Code noch in eine Funktion geben, damit lässt sich das auch leichter warten ohne es an zwei Stellen ändern zu müssen.
Zusätzlich muss halt das Script erst nach dem neuerlichen Setzten des Selectwertes ausgeführt werden.

 

[Domi83]

Okay, jetzt komme ich nicht mehr mit. Ich glaube das was Du meinst, suche ich. Aber wie ich das umsetze, weiß ich gerade nicht

 

[DaVian]

Naja du hast in deinem Code 2x die if Abfrage mit dem Setzen von disable. Diesen kannst du in eine separate Funktion ausgliedern, welche du dann an den jeweiligen Stellen aufrufst.

function setDisable() {
     if ($('#verstarif').val() == 'jahres') {
          ....
     } else {
          ....
     }
}

Und Funktion rufst du dann auf, anstatt zwei mal das selbe zu schreiben.

 

[Domi83]

Moin moin... Alles klärchen, ich glaube so funktioniert es...

<script type="text/javascript"><!--
 function setDisable() {
  if($('#verstarif').val() == 'jahres') {
   $("#reiseende").prop('disabled', true);
   $("#gebkind").prop('disabled', false);
  } else {
   $("#reiseende").prop('disabled', false);
   $("#gebkind").prop('disabled', true);
  };
 };

 jQuery(document).ready(function() {
  $(setDisable);

  $("#verstarif").change(setDisable);

  $("#versicherer").change(function() {
   var versid = $(this).val();
   $.cookie("versicherer", versid, {path : '/intern/'});
  });
 });
--></script>

Das einzige was ich noch nicht so ganz herausgefunden habe ist, wann man etwas in das "jQuery(document)" packt und wann nicht

 

[CapFuture]

Das (dom)Ready-Event wird angestoßen, wenn der Dom-Tree der Seite vollständig zur Verfügung steht. Dies tritt ein, wenn der HTML-Code vollständig gelesen und geparst ist. Das Event kann/darf mehrmals registriert werden. Falls mehrere domReady Events registriert wurden, werden diese der Reihe nach abgefrühstückt.
Anmerkung: Inline-Javascript verzögert dies, da JS potenziell das Markup verändern kann. => Javascript i.d.R. immer ganz ans Ende der Seite packen.

Das OnLoad-Event wird angestoßen, nachdem die Seite vollständig geladen ist. D.h. domReady wurde komplett abgearbeitet, die Bilder sind geladen, etc. Es gibt effektiv nur ein onLoad Event pro Dom-Element geben => Mehrfache Deklaration überschreibt die vorherige Definition.

 

[Domi83]

Hm... Jetzt bin ich ja mal total verwirrt und verstehe gar nicht mehr
Ich kann zwar mit HTML, PHP sowie JavaScript oder jQuery etwas anfangen und damit arbeiten... aber kannst Du das vielleicht so umschreiben, das es auch einer versteht der kein voll involvierter Programmierer ist?

Gruß, Domi

 

[T0a5tbr0t]

// In modernen Browsern ist
$(document).ready(fn)
// im Grunde das gleiche wie
document.addEventListener("DOMContentLoaded", fn)

Der Browser verarbeitet eine Seite ganz einfach von oben nach unten. Auf HTML Elemente unterhalb eines <script> Blocks kann man also nicht direkt zugreifen. Deshalb wartet man bis die ganz Seite verarbeitet und der komplette DOM vorhanden ist.
http://api.jquery.com/ready/
jQuery's ready Funktion existiert hauptsächlich, da alte Browser (Internet Explorer ) kein "DOMContentLoaded" Event hatten. Man konnte es aber mit einem Hack nachbauen.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Cross-browser_fallback
"ready" enthält aber auch noch ein paar andere Tricks. Es funktioniert z.B. auch nachdem "DOMContentLoaded" bereits gefeuert wurde.
Wenn du also auf Elemente im DOM zugreifst "ready" benutzten, dann ist man auf der sicheren Seite.

 

[CapFuture]

Ich beschreib mal den Renderprozess im Browser Stichwortartig:

* Browser kriegt den Request eine Seiten zu laden
* Browser lädt das HTML und beginnt das Parsen
* Browser sieht externe Styles, lädt diese im Hintergrund und wendet sie bereits an. Dies geschieht wärend des Parsen des HTMLs
* Browser stößt auf einen Script Block. Das Parsen vom HTML und den Styles wird unterbrochen. Code im Script Block wird ausgeführt. Danach geht der normale Parse-Prozess weiter.
* Browser schließt das HTML-Parsen ab. Das Dom-Ready Event wird ausgelöst.
* Sonstige Resourcen wie Bilder werden geladen.
* Nachdem alle Resourcen geladen wurden, wird das onLoad Event ausgelöst.

Voila, die Browser-Renderpipeline in a Nutshell

 

[Domi83]

Ah.. Alles klärchen, ich glaube jetzt macht es klick Ich bedanke mich hierbei für die Erklärung. Nun habe sogar ich es kapiert

Gruß, Domi

 

[Daaron]

Übrigens kann DOM-Ready manchmal Probleme machen, insbesondere bei Image Slidern in Responsive Layouts. Da Bilder erst nach DOM-Ready geladen werden, haben die <img>-Tags (und deren Eltern) die falsche Größe (oftmals: 0). Für solche Fälle gibt es Scripte, die ein "image-ready" - Event anbieten.