Javascript in ocenjevanje komentarjev

Pozdravljeni, lotil sem se novega projekta in bi potreboval pomoč, saj mi javascript glih ne gre najbolje. Zadeva sicer deluje če dam vse v while zanko, vendar želim imeti samo eno javascript. V while zanki se nahaja koda php, ki pa se spreminja glede na id.

Kodo potrebujem za ocenjevanje komentarjev. Hvala za pomoč in lep pozdrav

PHP

<form>

<div id="pozitivni_fedbacki_<?php echo $forum_odgovori_podatki['id'];?>" class="izberi_oceno">

<input class="prekrij_input" onClick='pozitivni_<?php echo $forum_odgovori_podatki['id'];?>(this.value)' type="radio" name="pozitivni_fedbacki" value="<?php echo $forum_odgovori_podatki['id'];?>" id="z_<?php echo $forum_odgovori_podatki['id'];?>">

<label class="izberi_oceno_ni" for="z_<?php echo $forum_odgovori_podatki['id'];?>"><span class="orodna_vrstica_forum_text_zelena"><?php echo $forum_odgovori_podatki['pozitivni_fedbacki'] ;?></span></label>

</div>



<div id="negativni_fedbacki_<?php echo $forum_odgovori_podatki['id'];?>" class="izberi_oceno">

<input class="prekrij_input" onClick='negativni_<?php echo $forum_odgovori_podatki['id'];?>(this.value)' type="radio" name="negativni_fedbacki" value="<?php echo $forum_odgovori_podatki['id'];?>" id="r_<?php echo $forum_odgovori_podatki['id'];?>">

<label class="izberi_oceno_ni" for="r_<?php echo $forum_odgovori_podatki['id'];?>"><span class="orodna_vrstica_forum_text_rdeca"><?php echo $forum_odgovori_podatki['negativni_fedbacki'] ;?></span></label>

</div>

</form>

javascript:

<script>





function pozitivni_<?php echo $forum_odgovori_podatki['id'];?>(str) {

  if (window.XMLHttpRequest) {



    xmlhttp=new XMLHttpRequest();

  } else {

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      document.getElementById("pozitivni_fedbacki_<?php echo $forum_odgovori_podatki['id'];?>").innerHTML=xmlhttp.responseText;

    }

  }

  xmlhttp.open("GET","pozitivni_fedbacki.php?a="+str,true);

  xmlhttp.send();

}



function negativni_<?php echo $forum_odgovori_podatki['id'];?>(str) {

  if (window.XMLHttpRequest) {



    xmlhttp=new XMLHttpRequest();

  } else {

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      document.getElementById("negativni_fedbacki_<?php echo $forum_odgovori_podatki['id'];?>").innerHTML=xmlhttp.responseText;

    }

  }

  xmlhttp.open("GET","negativni_fedbacki.php?q="+str,true);

  xmlhttp.send();

}



</script>

Mogoče si se tega lotil malce narobe. Tudi, če hočeš JS funkcije klicati samo 1x, se da drugače rešiti. While zanka v tem primeru ni prava rešitev.

Glede na kodo, bi rekel, da si še v začetkih. Lepo, da se učiš JS, ampak sam za take stvari raje uporabim jQuery knjižnico, saj

pri večji količini kode pride zadeva dosti bolj berljiva. Vsekakor pa podpiram, da znaš čisti JS, saj ljudje dostrikrat ne vedo, da je jQuery samo knjižnica, ki naredi upravljanje DOM-a in nekaterih JS funkcij (v tvojem primeru ajax klic) doti bolj prijazen do programerja.

HTML (nisem uporabil tvojega primera, ker se mi zdi precej neberljiv in ima za tale primer čisto preveč nepotrebnih podatkov):

<div class="feedback" data-type="positive" data-id="<?php echo $komentar_id">

    <?php echo $stevilo_pozitivnih_komentarjev; ?>

</div>



<div class="feedback" data-type="negative" data-id="<?php echo $komentar_id">

    <?php echo $stevilo_negativnih_komentarjev; ?>

</div>

Kot lahko vidiš imata oba HTML snippeta class "feedback" (na ta class bomo nastavili JS selector) in data-id (id od komentarja), razlikujejo se samo data-type (pove nam ali gre za negativno ali pozitivno oceno) in pa izpis koliko je dejanski sestevek enih in drugih komentarjev.

JS koda (če boš delal preko jQuerya) bo izgledala takole:

$(document).ready(function){



    $('div.feedback').on('click', function(){

        var $that = $(this); //cache od $(this) na katerega se bomo sklicevali

        var feedtype = $that.data('type'); //dobimo vrednost negative oz. positive

        var feedid = $that.data('id'); // dobimo id komentarja



        //naredimo post v PHP dokument, kjer bomo spremenljivke prebrali in jih obdelali

        $.post( "feedback.php", { type: feedtype, id: feedid }, function(data){

            //v spremenljivko data lahko vrnemo json in lahko on the fly posodobimo stevilo pozitivnih/negativnih

        });

    });



});

JS Fiddle - klikni na enega od gumbov in poglej konzolo, da vidiš izpisane podatke

Upam, da bo šlo (: Verjamem, da so začetki težki, vendar je najbolje, da se že na začetku poskusiš držati dobrih praks.

sikmajnd najlepša hvala za obrazložitev :)

Lahko si pogledaš še tole:

http://codular.com/part-1-rating-system