Laden...

[gelöst][JavaScript] Code verhält sich beim Debuggen anders

Erstellt von kunsti vor 8 Jahren Letzter Beitrag vor 8 Jahren 1.822 Views
K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren
[gelöst][JavaScript] Code verhält sich beim Debuggen anders

Hi,
ich habe folgenden JavaScript Code.
Dieser holt sich einen String, welcher durch ; getrennt eine Liste von strings enthält.
Für jede Checkbox soll nun überprüft werden, ob die ID in diesem String enthalten ist.
Wenn ja soll die Checkbox aktiviert werden.

        var dayString = "";
        $.get("GetDays", { taskName: selText }, function (result) {
            dayString = result;
        });
        //Check day checkboxes
        var checkboxes = document.getElementsByName("checkBoxDay")
        for (var i = 0; i < checkboxes.length; i++) {
            if (dayString.toString().indexOf(checkboxes[i].id) > -1)
                checkboxes[i].checked = true;
            else
                checkboxes[i].checked = false;
        }

Allerdings wurden die checkboxen nicht markiert.
Also habe ich mich mit Firebug ran gehängt.
Nun wurden die Checkboxen markiert und sind auch markiert geblieben.
Also habe ich es nochmals ohne Debugegr versucht. Nun wurden die Checkboxen nicht mehr angeharkt.
Hatte schon mal jemand ein ähnliches Problem oder hat eine Idee woran es liegen könnte?

Viele Grüße
kunsti

148 Beiträge seit 2013
vor 8 Jahren

Das hört sich sehr so an, als wären deine Checkboxen noch nicht im DOM vorhanden wenn dein Code ausgeführt wird.

Wartest du darauf, dass dein DOM komplett aufgebaut wurde bevor du deinen Code ausführst?

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

Danke schon mal für die Antwort.
Mit Firebug kann man sich ja den DOM anschauen.
Da sind die Checkboxen vorhanden.

148 Beiträge seit 2013
vor 8 Jahren

Das kann schon sein, dass die da sind wenn du dir das im Firebug anschaust. Aber das heißt nicht, dass die da sind wenn dein Code ausgeführt wird.

Also meine Frage: Wartest du auf den DOM (z.B. per $(document).ready(function(){ ... });)? Und führst erst dann deinen Code aus?

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

Nein das mache ich nicht.
Der gezeigte Code wird innerhalb eines Events asufgerufen.

 $(".dropdown-menu li a").click(function () {

Hatte jetzt mal Testweise in das Skript noch


    $(document).ready(function () {
        alert("redy to go now");
    });

eingebaut.
Ich lade die Seite neu. Die Meldung erscheint, allerdings werden die Checkboxen weiterhin nur dann ausgewählt, wenn ich einen breakpoint setze.

148 Beiträge seit 2013
vor 8 Jahren

Ich glaub ich sehe gerade das Problem (sollte mir das nächstemal den Code besser anschauen 😄)....

Probier mal folgenden Code:


var dayString = "";
$.get("GetDays", { taskName: selText }, function (result) {
  dayString = result;

  //Check day checkboxes
  var checkboxes = document.getElementsByName("checkBoxDay");
  for (var i = 0; i < checkboxes.length; i++) {
    if (dayString.toString().indexOf(checkboxes[i].id) > -1)
      checkboxes[i].checked = true;
    else
      checkboxes[i].checked = false;
  }
});

Du wartest nicht auf das Result deines Ajax-Calls. Deswegen hat der Code nach dem "Get" nicht die Daten die er benötigt ("Get" ist async in jQuery). Du musst den Code der die Checkboxen markiert auch in die "Success"-Funktion deines Ajax-Calls verschieben.

Das erklärt auch warum es im Debugger funktioniert.

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

sollte mir das nächstemal den Code besser anschauen 😄)

Oder eher ich.
Danke.
Ich hoffe mal das fällt unter die Kategorie "einmal und nie wieder"