Autor Zpráva
PetrBK
Profil
Ahoj,
mám ještě jeden dotaz k mému včerejšímu vláknu, ale jedná se o jiný problém, takže jsem otevřel vlákno nové, snad je to tak správně... :) Aktuální kód je násedující:

<span id="compare_isa_indicator" class=""><?php if(isset($_SESSION['compare_isa'])){echo count($_SESSION['compare_isa']);}else{echo 0;} ?>/3</span>

.
.
.

<script>  
$(document).ready(function(){    
  function hasClass($element, $class) {
    return (' ' + $element.className + ' ').indexOf(' ' + $class + ' ') > -1;
  }
  
  $(".btm_compare").click(function(){     
    var $this_id_isa = (this.id); 
    
    var $selected_id = $('.selected');
    var $indicator = $('#compare_isa_indicator');
    
    var $el_btn = document.getElementById($this_id_isa);
    var $el_indicator = document.getElementById($indicator);
    
    $.ajax({
      url: 'ajax__compare.php',
      type: "GET",
      data: {id_isa: $this_id_isa},
      success: function(data) {
        $indicator.html(data);
        
        if (hasClass($el_btn, 'add') === true){          
          if($selected_id.length < 3){
            $el_btn.classList.add("button_red");
            $el_btn.classList.add("selected");
            $el_btn.classList.remove("button_blue");
            $el_btn.classList.remove("add");
            $el_btn.innerHTML = "Selected";
          } 
                  
          if($selected_id.length == 0){
            $el_indicator.classList.add("active");
          }
          
        } else if (hasClass($el_btn, 'selected') === true){ 
          $el_btn.classList.add("button_blue");
          $el_btn.classList.add("add");
          $el_btn.classList.remove("button_red");
          $el_btn.classList.remove("selected");
          $el_btn.innerHTML = "Compare";
                  
          if($selected_id.length == 1){
            $el_indicator.classList.remove("active");
          }
        }        
      }
    });     
  });  
});
</script>  

Mám vlastně dva dotazy:

1) Nefunguje mi přidání/odebrání třídy "active" -> $el_indicator.classList.add("active"); . Do podmínky to skočí správně, ale třída se nevytvoří. Také jsem kontroloval, zda není někde v kódu element s duplicitním ID "compare_isa_indicator", ale není. JS jinak funguje správně.

2) JS není má silná stránka a potřeboval bych poradit, jak tyto chyby stopovat, popř. vypsat chybu či varování jako u PHP. Zkoušel jsem příkaz různě přesouvat abych měl jistotu, že script k němu dojde, ale stále nic. Pokud tam je překlep, tak se omlouvám, ale nevidím ho.

Díky moc
P.
lionel messi
Profil
PetrBK:

Ahoj,

základná chyba:

Na riadku 17 tohto výstrižku kódu priraďuješ do premennej $indicator tzv. jQuery objekt - zjednodušene povedané súbor elementov, ktoré zachytáva selektor v zátvorke. S premennou potom pracuješ na r. 20. Tam používaš metódu getElementById, ktorá ako svoj argument prijíma reťazec, čiže samotné id. Správne by teda bolo:

var $el_indicator = document.getElementById('compare_isa_indicator');

jak tyto chyby stopovat, popř. vypsat chybu či varování jako u PHP

V prehliadači na to slúži tzv. konzola. Nájdeš ju vždy vo vývojárskych nástrojoch. Isté chyby (v Javascripte sa označujú ako výnimky) sa ti do nej zapíšu automaticky. Na testovanie hodnoty premennej či výrazu ťa bude zaujímať metóda console.log().

Zopár rád do budúcna:

• Ak s JS len začínaš, nemixuj čistý JS a framework jQuery, budeš v tom mať dvojnásobný hokej. Vyber si jednu cestu a tej sa drž, na prvé kroky by som sa osobne priklonil k čistému JS, hoci niektorí kolegovia so mnou možno nebudú súhlasiť.

• V čistom JS nemá znak $ v rámci deklarácie či prístupu k premenným špecifický význam.* Namiesto var $indicator stačí písať var indicator a ďalej normálne if (indicator == 1).

• V kóde používaš classList, čo je super, ale vo funkcii hasClass máš finálny riadok zbytočne komplikovaný, veď aj tu ti classList ochotne pomôže skrátiť a sprehľadniť kód:

function hasClass($element, $class) { //mimochodom, ani v tejto funkcii netreba doláre, ale to je detail
    return $element.classList.indexOf($class) > -1;
  }

*) Istý špecifický význam má $ pri spracovaní reťazcov uzavretých do spätných apostrofov ``. Ak si ešte nepočul o možnosti uzatvárať reťazce do spätných apostrofov, túto poznámku ignoruj.
PetrBK
Profil
lionel messi:
Ahoj, díky za vyčerpávající odpověd, hodně to pomohlo. Upravil jsem řádek 17 a již mi to funguje. Zjednodušeně řečeno, celý problém byl v tom použitém hashtagu u ID?

ad mixování JS a jQuery - vůbec jsem si tuhle skutečnost neuvědomil. Většinou věci okolo JS posílám dál, ale toto se mi zdálo jednoduché, že to zvládnu dát dohromady sám... :) Nicméně, jestli to teď lépe chápu, tak toto identický zápis pro jQuery a pro čistý JS:
jQuery: $('#xxx').html("xxx");
JS: document.getElementById('xxx').innerHTML = "xxx";
Pokud ano, tak již vidím to mixování a zkusím to sjednotit. Teď jsem to narychlo zkoušel, něco šlo něco ne. Budu se na to muset lépe podívat.

ad symbol "dolaru" - Ano vím, že jej nemusím používat, je to jen síla zvyku z php a abych měl přehled o vlastních proměnných.

ad úprava funkce - Tam by ale stále mělo zůstat className a ne classList aby to fungovalo.

Ještě jednou díky.
lionel messi
Profil
PetrBK:
Nicméně, jestli to teď lépe chápu, tak toto identický zápis pro jQuery a pro čistý JS:

Presne tak.

Zjednodušeně řečeno, celý problém byl v tom použitém hashtagu u ID?

Skôr v tom, že si metóde predal neočakávaný dátový typ.

Tam by ale stále mělo zůstat className a ne classList aby to fungovalo.

Ospravedlňujem sa, tu som neporadil presne. S classList bude fungovať toto:

function hasClass($element, $class) {
  return $element.classList.contains($class);
  }
Kcko
Profil
Můžu vědět proč vymýšlíte třídu hasClass když ji jQuery má?

api.jquery.com/hasClass

Jinak konvence je taková co se matchne přes jQuery použije se se dolarovým prefixem jinak ne.

$para = $('p');
paraTotal = $para.length;

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0