javascript - Forståelse af jQuery & javascript - Udvikleren.dk

Tags: jquery javascript

Bruger #17215 @ 14.06.12 15:08

Hejsa

Jeg er ved at rode med jQuery og noget AJAX via JSON, og leger bare for at forsøge at lære det bedre og forstå det (sådan lærer jeg godt).
Jeg kan få min jQuery til at få noget JSON tilbage via AJAX, og arbejde med det, men opdagede noget underligt.
Mit forsøg gik ud på at få et array af objekter tilbage hvor hvert objekt har en property kaldet "name".

Min HTML ser således ud med en knap og en div til resultatet:

HTML kode

 <input type="button" id="ClickMe" value="Click this button" />
 <div id="HereIsResult">Result goes here</div>

Og dette er mit script:

JScript kode

 <script>
     $("#ClickMe").click(function () {
         alert("clicked!");
         $.getJSON("/Test/GetJsonResult", null, function (data) {
             alert("data recieved");
             for (var i = 0; i < data.length; i++) {
                 var myObj = data[i];
                 alert("Name: " + myObj.Name);
 
                 $("#HereIsResult").css("background-color", "red");
                 //$("#HereIsResult").text(myObj.Name); //udkommenteret for at få appendTo til at virke mere end en enkelt gang
                 var newDiv = $("<div/>",
                     {
                         id: i,
                         text: myObj.Name
                     });
                 newDiv.appendTo("#HereIsResult");
                 alert("appended : " + i + " - " + myObj.Name);
             }
         });
     });
 </script>

Jeg kan sagtens få disse objekter tilbage og lave min resultat-div rød (hurtig og nem illustration om den har ændret noget) og så derefter iterere igennem dem.
Først ændrede jeg teksten i div'en sammen med en alert så jeg kunne se hver tekst ændre sig i den røde resultat-div.

Nu ville jeg så tilføje flere div's indeni denne eksisterende med hver deres "name" udskrevet i den - så jeg fik en komplet liste.

Det "sjove" er nu at hvis jeg ændrer teksten indeni i resultat-div'en så vil den kun appende en enkelt div og ændrer så alt tekst indeni resultat-div'en og dens child-div (den jeg har lavet) og for hvert nyt objekt så tilføjes der ikke flere div'er men kun teksten ændres.
Nu har jeg udkommenteret den del der ændrer teksten og nu virker det, men forstår ikke helt hvorfor.

Nogen der kan hjælpe mig videre?

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 13 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 14.06.12 15:49

1.520

når du bruger .text eller .html overskriver du indholdet i din div, når du bruger .append eller .prepend tilføjer du, og da det er et loop, og du overskriver hvergang, vil det kun være den sidste der er der

edit:
prøv evt også at kig lidt på console.log("..") istedet for alert

hvis du bruger consolen i chrome eller har firebug til firefox, så slipper du for at skulle lukke en alert-popup pr tick i dit loop

Indlæg senest redigeret d. 14.06.2012 15:54 af Bruger #3427

Bruger #3427 @ 14.06.12 16:22

1.520

prøv at download firefox+firebug eller chrome og test det her:

JScript kode

 $("#ClickMe").click(function () {
          console.log("#ClickMe clicked!");
          $.getJSON("/Test/GetJsonResult", null, function (data) {
            
             var result = $("<div/>");
            
              console.log("data recieved:");
              console.log(data); //vis downloaded json-object i consolen.
              
              if(data.length > 0){
               $.each(data, function(i, myObj){ //foreach loop
                   console.log(myObj); //så kan du se alt om dette object i consolen.
                   
                   var newDiv = $("<div/>",
                       {
                           id: i,
                           text: myObj.Name
                       });
                       
                   result.append(newDiv);
                   console.log("appended : " + i + " - " + myObj.Name);
               }); 
               
               $("#HereIsResult").html(result) //udskift indholdet i #HereIsResult med det der blev lavet ind i loopet.
                                 .css("background-color", "red"); //ingen grund til at sætte farven til rød inde i loopet. NOTE: der er ikke noget ; på linjen før, så vi kan tilgå .css uden at skrive $(...)
               
              }else{
                console.log("data == empty");
              }   
              
          });
      });

jeg kan personligt ikke lave javascript uden consolen mere efter jeg først har lært at bruge den

Bruger #17215 @ 14.06.12 16:18

408

når du bruger .text eller .html overskriver du indholdet i din div, når du bruger .append eller .prepend tilføjer du, og da det er et loop, og du overskriver hvergang, vil det kun være den sidste der er der

edit:
prøv evt også at kig lidt på console.log("..") istedet for alert
hvis du bruger consolen i chrome eller har firebug til firefox, så slipper du for at skulle lukke en alert-popup pr tick i dit loop

Tak.
Jeg troede at
.text overskrev en ikke-defineret tekst indeni, men lod andre elementer være så fx <p> eller <span> ville blive uberørt,
og så at selve
.html ville overskrive andre elementer.

Og grunden til der altid kom en er at jeg først overskriver de tidligere elementer med navnet ("name") og derefter tilføjer en ny div.

Det gav meget bedre mening

Problemet med console.log er at den giver fejl i IE og derfor jeg bruger alerts.

Takker igen for hjælpen

Bruger #17215 @ 15.06.12 11:11

408

prøv at download firefox+firebug eller chrome og test det her:

JScript kode

 $("#ClickMe").click(function () {
          console.log("#ClickMe clicked!");
          $.getJSON("/Test/GetJsonResult", null, function (data) {
            
             var result = $("<div/>");
            
              console.log("data recieved:");
              console.log(data); //vis downloaded json-object i consolen.
              
              if(data.length > 0){
               $.each(data, function(i, myObj){ //foreach loop
                   console.log(myObj); //så kan du se alt om dette object i consolen.
                   
                   var newDiv = $("<div/>",
                       {
                           id: i,
                           text: myObj.Name
                       });
                       
                   result.append(newDiv);
                   console.log("appended : " + i + " - " + myObj.Name);
               }); 
               
               $("#HereIsResult").html(result) //udskift indholdet i #HereIsResult med det der blev lavet ind i loopet.
                                 .css("background-color", "red"); //ingen grund til at sætte farven til rød inde i loopet. NOTE: der er ikke noget ; på linjen før, så vi kan tilgå .css uden at skrive $(...)
               
              }else{
                console.log("data == empty");
              }   
              
          });
      });

jeg kan personligt ikke lave javascript uden consolen mere efter jeg først har lært at bruge den

Dem har jeg allerede, men console virker ikke i IE og derfor er det ikke løsningen for mig.
Console stopper vel heller ikke eksekveringen af din kode imens du ser på det?
Det gør en alert jo så jeg kan se at den bliver added en efter en hvilket jeg godt kan li nu jeg lige skal lære de her småting.

Bruger #3427 @ 15.06.12 12:13

1.520

prøv at download firefox+firebug eller chrome og test det her:

JScript kode

 $("#ClickMe").click(function () {
          console.log("#ClickMe clicked!");
          $.getJSON("/Test/GetJsonResult", null, function (data) {
            
             var result = $("<div/>");
            
              console.log("data recieved:");
              console.log(data); //vis downloaded json-object i consolen.
              
              if(data.length > 0){
               $.each(data, function(i, myObj){ //foreach loop
                   console.log(myObj); //så kan du se alt om dette object i consolen.
                   
                   var newDiv = $("<div/>",
                       {
                           id: i,
                           text: myObj.Name
                       });
                       
                   result.append(newDiv);
                   console.log("appended : " + i + " - " + myObj.Name);
               }); 
               
               $("#HereIsResult").html(result) //udskift indholdet i #HereIsResult med det der blev lavet ind i loopet.
                                 .css("background-color", "red"); //ingen grund til at sætte farven til rød inde i loopet. NOTE: der er ikke noget ; på linjen før, så vi kan tilgå .css uden at skrive $(...)
               
              }else{
                console.log("data == empty");
              }   
              
          });
      });

jeg kan personligt ikke lave javascript uden consolen mere efter jeg først har lært at bruge den

du kan sætte breakpoints istedet (lige som i C#) - men okay hver sin smag =)

Bruger #17081 @ 15.06.12 12:30

1.258

jeg ville også foretrække console.log ... men muligheder er der selvfølgelig, at bruge en wrapper, så det også virker i ie;

JScript kode

 // usage: log('inside coolFunc', this, arguments);
 // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
 
 window.log = function f() {
     log.history = log.history || [];
     log.history.push(arguments);
     if (this.console) {
         var args = arguments;
         var newarr;
 
         try {
             args.callee = f.caller;
         } catch(e) {
 
         }
 
         newarr = [].slice.call(args);
 
         if (typeof console.log === 'object') {
             log.apply.call(console.log, console, newarr);
         } else {
             console.log.apply(console, newarr);
         }
     }
 };
 
 // make it safe to use console.log always
 
 (function(a) {
     function b() {}
     var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn";
     var d;
     for (c = c.split(","); !!(d = c.pop());) {
         a[d] = a[d] || b;
     }
 })(function() {
     try {
         console.log();
         return window.console;
     } catch(a) {
         return (window.console = {});
     }
 }());

Og så bare bruge log("asdasdasdasdasdasd asd asd asd asd asd");

Forståelse af jQuery & javascript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler