javascript - IE problem med jQuery.val() - Udvikleren.dk

Tags: jquery javascript

Bruger #8773 @ 21.03.11 21:12

Hej udviklere,

jeg sidder lige og roder lidt med noget jQuery, og er stødt på et problem.
Som så ofte handler det naturligvis om at IE ikke forstår at håndtere koden ordentligt.
Jeg har følgende jQuery kode:

JScript kode

 $(document).ready(function(){
     alert(document.g)
     $(".img").change(function(){
         repaint();
     });
     $(".write").keyup(function(){
         repaint();
     });
     function repaint()
     {
         img = $(".img:checked").val();
         head = $("#head").val();
         line1 = $("#line1").val();
         line2 = $("#line2").val();
         line3 = $("#line3").val();
         line4 = $("#line4").val();
         line5 = $("#line5").val();
         line6 = $("#line6").val();
         $("#theimg").attr({"src":"includes/makeimg.php?img="+img+"&head="+head+"&line1="+line1+"&line2="+line2+"&line3="+line3+"&line4="+line4+"&line5="+line5+"&line6="+line6});
     }
 });

Og følgende HTML kode:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
     <title>Barløseborg Golfklub reklamesystem</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="copyright" content="Copyright © 2009 Designature, all rights reserved"/> 
     <meta name="language" content="dan" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript" src="jquery/jquery.functions.js"></script> 
 </head> 
 <body> 
     <h1>Velkommen til Barløseborg Golfklubs reklamesystem</h1> 
     <p>Her kan du oprette reklamebannere til bbgolf.dk. Du kan vælge mellem 4 brede og to smalle reklamer og kan derefter placere tekst som du behager.<br />Billedet opdateres automatisk når du skriver</p> 
     <table style="margin-left:20px;"> 
         <tr> 
             <td valign="middle" style="width:40px;"><input type="radio" name="img" value="1" class="img" /></td> 
             <td style="width:200px;"><img src="images/reklame1.png" width="200" alt="" /></td> 
             <td rowspan="6" valign="top" style="width:360px;"> 
                 Overskrift: <input type="text" id="head" class="write" style="width:280px;" /><br /> 
                 Linje 1: <input type="text" id="line1" class="write" style="width:280px;" /><br /> 
                 Linje 2: <input type="text" id="line2" class="write" style="width:280px;" /><br /> 
                 Linje 3: <input type="text" id="line3" class="write" style="width:280px;" /><br /> 
                 Linje 4: <input type="text" id="line4" class="write" style="width:280px;" /><br /> 
                 Linje 5: <input type="text" id="line5" class="write" style="width:280px;" /><br /> 
                 Linje 6: <input type="text" id="line6" class="write" style="width:280px;" /><br /> 
                 <br /> 
                 <img src="includes/makeimg.php" id="theimg" alt="" /> 
             </td> 
         </tr> 
         <tr> 
             <td valign="middle"><input type="radio" name="img" value="2" class="img" /></td> 
             <td><img src="images/reklame2.png" width="200" alt="" /></td> 
         </tr> 
         <tr> 
             <td valign="middle"><input type="radio" name="img" value="3" class="img" /></td> 
             <td><img src="images/reklame3.png" width="200" alt="" /></td> 
         </tr> 
         <tr> 
             <td valign="middle"><input type="radio" name="img" value="4" class="img" /></td> 
             <td><img src="images/reklame4.png" width="200" alt="" /></td> 
         </tr> 
         <tr> 
             <td valign="middle"><input type="radio" name="img" value="_smal1" class="img" /></td> 
             <td><img src="images/reklame_smal1.png" width="200" alt="" /></td> 
         </tr> 
         <tr> 
             <td valign="middle"><input type="radio" name="img" value="_smal2" class="img" /></td> 
             <td><img src="images/reklame_smal2.png" width="200" alt="" /></td> 
         </tr> 
     </table> 
 </body> 
 </html>

Koden virker perfekt i Google Chrome og FF, men internet explorer fejler.
Jeg får følgende, ubrugelige, fejlmeddelelser fra IE:

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)
Tidsstempling: Mon, 21 Mar 2011 20:09:58 UTC

Meddelelse: Objektet understøtter ikke denne egenskab eller metode
Linje: 10
Tegn: 9
Kode: 0
URI: xxxxxxx.dk/jquery/jquery.functions.js

Det vil altså sige at det skal dreje sig om første linje i min repaint() funktion.

Jeg har siddet og brudt mit hoved med skidtet i en time nu, og kan virkeligt ikke se hvad jeg gør galt.

På fårhånd mange tak!

4 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 9 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 21.03.11 22:16

4.283

Nu er der jo ikke nogen checkboxes der er afkrydset som default.

Så jeg ville nok lige teste list på det:

Kode

if($("input:checked").length) {
....
}

Bruger #69 @ 22.03.11 08:52

188

Hej Simon

Af en eller anden årsag (spørg mig ikke hvorfor), er du i IE nødt til at declare din javascript-variabler, da du ellers vil få den fejl. Din repaint-funktion skal derfor se sådan ud:

Kode

     function repaint()
     {
         var img = $(".img:checked").val();
         var head = $("#head").val();
         var line1 = $("#line1").val();
         var line2 = $("#line2").val();
         var line3 = $("#line3").val();
         var line4 = $("#line4").val();
         var line5 = $("#line5").val();
         var line6 = $("#line6").val();
         $("#theimg").attr({"src":"includes/makeimg.php?img="+img+"&head="+head+"&line1="+line1+"&line2="+line2+"&line3="+line3+"&line4="+line4+"&line5="+line5+"&line6="+line6});
     }

Det har muligvis noget at gøre med, at IE behandler globale variabler anderledes end FF og Webkit.

Bruger #8223 @ 22.03.11 10:13

1.065

meningen med "var" er at du definerer variablen. Hvis du ikke bruger "var" vil JavaScript lede efter en variabel med det navn der allerede er defineret i et tidligere scope.

For eksempel:

Kode

var navn = 'Per';
function sigNavnet()
{
   alert(navn);
}

I dette eksempel vil variablen "navn" blive hentet ind af funktionen sigNavnet(), fordi den ikke har sin egen udgave af variablen.

Kode

var navn = 'Per';
function sigNavnet()
{
   navn = 'Rasmus';
   alert(navn);
}

I dette eksempel overskriver vi værdien af "navn" med Rasmus -- det betyder at når vi udenfor funktionen sigNavnet() vil udskrive navn, vil det også være Rasmus.

Kode

var navn = 'Per';
function sigNavnet()
{
   var navn = 'Rasmus';
   alert(navn);
}

I det sidste eksempel her, vil der blive oprettet en lokal udgave af "navn" inde i funktionen der kun er til stede i den funktion. Udenfor funktionen vil navn stadig være = Per.

Derfor bruger man var -- du siger, at nu er der en ny variabel med det navn, i dette scope. Siger du ikke var, leder den efter en eksisterende variabel med navnet. Hvis den ikke kan finde nogen, så kan der ske sære ting.

Bruger #8773 @ 22.03.11 09:20

658

Nu er der jo ikke nogen checkboxes der er afkrydset som default.

Så jeg ville nok lige teste list på det:

Kode
if($("input:checked").length) {
....
}

Det hjalp mig frem til at finde fejlen - det viste sig at IE vil have at man definerer variabler med "var" foran -.-*

Følgende kode fik jeg til at virke, hvis andre med samme problem i fremtiden skulle få brug for det:

JScript kode

 function repaint()
     {
         if($("input:checked").length)
         {
             var img = $("input:checked").val();
             var head = $("#head").val();
             var line1 = $("#line1").val();
             var line2 = $("#line2").val();
             var line3 = $("#line3").val();
             var line4 = $("#line4").val();
             var line5 = $("#line5").val();
             var line6 = $("#line6").val();
             $("#theimg").attr({"src":"includes/makeimg.png?img="+img+"&head="+head+"&line1="+line1+"&line2="+line2+"&line3="+line3+"&line4="+line4+"&line5="+line5+"&line6="+line6});
         }
     }

IE problem med jQuery.val()

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler