wz

Internet Explorer - SCRIPT438: Objekt neumožňuje použití metody getElementsByTagName

20:11 04.04.2011

Zkoušel jsem si v novém IE 9 jeden web a k mému překvapení tam nešly některé efekty, které v jiných prohlížečích šly. Prohlížeč hlásil chybu: internet explorer SCRIPT438: Objekt neumožňuje použití vlastnosti či metody getElementsByTagName. Pro efekty jsem používal jQuery 1.5. Co s tím?

 

Řešení bylo nakonec prosté - do zdrojáku jsem hodil odkaz na novější verzi jQuery - toho času to byl tedy odkaz: http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js.

Porovnání rychlosti jQuery.prop('checked') a jQuery.is(':checked')

13:21 25.03.2015

Pěkné porovnání je k dispozici zde.

jQuery: Usnadnění migrace na 1.9+

01:22 17.06.2014

Pokud chcete aktualizovat jQuery z verze před 1.9 na verzi 1.9+, tak na stránkách jQuery je k dispozici plugin, který když si přidáte do zdrojáku, tak vás v konzoli informuje o problémech. Více. viz v dokumentaci.

jQuery: Příklad použití live()

01:11 17.06.2014

V následujícím příkladu máme kód, který umí následující:

  • Vypíše se seznam dvou položek. Když na jakoukoli z nich kliknu, tak se nic nestane.
  • Když kliknu na odkaz přidej li, tak do seznamu přibude nová položka. Když na ní kliknu, tak se nic neděje.
  • Když kliknu na odkaz vyvolej live, tak se u všech elementů li zaregistruje reakce na kliknutí - tou bude alert výpis konkrétního řetězce. Když pak přidám další položku do seznamu, ta už po kliknutí na ní bude tuto funkcionalitu s alertem umět taky.
  • Tedy jak se píše v dokumentaci: Attach an event handler for all elements which match the current selector, now and in the future.

Pozor, live() bylo ve verzi 1.9 z jQuery odstraněno. Alternativy viz. dokumentace.

      <script src="jquery-1.6.4.js"></script>
      <script>
        var Polozek = 2;
        function volatLive(){
          $("li").live('click',function(){
              alert('Kliknuto na '+$(this).text());
          });
        }
        
        function pridatPolozku(){
          $("#olseznam").append('<li>Položka '+(++Polozek)+'</li>');
        }
      </script>
      
      <ol id="olseznam">
        <li>Položka 1</li>
        <li>Položka 2</li>
      </ol>
      <p><a href="#" onclick="volatLive();return false;">vyvolej live</a></p>
      <p><a href="#" onclick="pridatPolozku();return false;">přidej li</a></p>

jQuery: Přidání další položky li do seznamu

00:59 17.06.2014

Zdrojový kód:

<script>
        var pocetPolozek = 2;
  
        function pridatLi(){
          $("#ol_seznam").append('<li>Položka '+(++pocetPolozek)+'</li>');
        }
      </script>
      
      <ol id="ol_seznam">
        <li>Položka 1</li>
        <li>Položka 2</li>
      </ol>
      <p><a href="#" onclick="pridatLi();return false;">přidej li</a></p>

Demo:

  1. Položka 1
  2. Položka 2

přidej li

jQuery - Je checkbox zaškrtnut? Is input checked?

17:19 27.06.2013

Takto si můžu v jQuery zjistit, jestli je input s id idecko zaškrtnut. Je to jedno z možných řešení:

if( $("#idecko").is(':checked') ) {
    alert('jsem checked');
}
else{
    alert('nejsem checked');
}

jQuery - odstranění optionu s konkrétním value ze selectboxu

16:01 29.04.2013

Mějme tento selectbox:

<select id="group" name="group">
<option value="0">tenis</option>
<option value="23">badminton</option>
<option value="3">basketbal</option>
</select>

Option s value 23 z něj pomocí jQuery odstraním takto:

$("#group option[value=23]").remove();

jQuery - testování migračního pluginu

01:51 25.04.2013

jQuery ve verzi 1.9 přišlo s takovými změnami, že připravilo migrační plugin. Jak se s ním pracuje jsem si vyzkoušel na následujícím příkladu:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
  <meta charset="UTF-8">
  <title>pokus s jquery</title>
  <!--<script src="jquery-1.7.1.js"></script>   -->
  <script src="jquery-1.9.1.js"></script> 
  <!--<script src="jquery-2.0.0.js"></script>     -->
  <!--<script src="jquery-migrate-1.1.1.js"></script> -->
  <!--<script src="jquery-migrate-1.1.1.min.js"></script>-->
  <script type="text/javascript">
    var i=0;
      function kliknuto(){
        $('#nadpis').toggle();
        $("a").live("click", function(){ alert(i++); });   
      }
  </script>
</head>
<body>
  <h3 id="nadpis">Nadpis</h3>
  <p><a onclick="kliknuto()">klikni</a></p>
</body>
</html>

Pro tento příklad jsem měl v adresáři staženo několik verzí frameworku. Vždycky jsem zakomentoval / povolil to, co jsem měl zkusit.

  • bylo vidět, že v min variantě (produkční) se do konzole nevypisují žádné informace
  • funkce live byla v jQuery 1.9 odstraněna, ale s migračním pluginem to žádné chyby neházelo
  • v konzoli jsem při testovacím režimu viděl informaci o tom, že live() je deprecated

jQuery 2.0

00:46 25.04.2013

  • Na stránkách jQuery se o něm píše zde
  • přestalo to podporovat IE 8 a starší
  • větev 1.x je stále podporvaná, a tam podpora pro starší IE zůstává
  • je to určené pro moderní web
  • 2.0 je o 12% menší než 1.9.1
  • má to API kompatibilní s 1.9

jQuery 1.9 - změny

00:33 25.04.2013

  • jQuery 1.9 se objevilo v lednu 2013
  • některé deprecated vlastnosti byly odstraněny
  • http://api.jquery.com/category/version/1.9/
  • k dispozici jQuery Migrate Plugin - https://github.com/jquery/jquery-migrate
  • ke změnám je vedly snahy obravit vlastnosti, které jQuery dělaly nekonzistentní či se hůře používaly
  • nekomprimovaná vývojová verze jQuery Migrate pluginu zahrnuje console log ouput, který varuje, když je využita deprecated či odstraněná vlastnost
  • komprimovaná verze pluginu negeneruje žádný logovací výstup; tato verze může být použita na produkčních webech
  • odstraněna metoda jQuery.browser() - pro detekci doporučují
  • odstraněna funkce live() - místo toho používat on()
  • odstraněna metoda die() - místo toho používat off()
  • odstraněna metoda sub()
  • metoda add() vrací výsledky v pořadí v dokumentu
  • změny v chování after(), before() a replaceWith()
  • metody jako ajaxError(), ajaxStart() jsou vždy triggerovány nad $(document)
  • další změny zde: http://jquery.com/upgrade-guide/1.9/