Prihvaćanje TU, TD bez refresha

Na svom forumu imam palac gore i palac dolje. Da bi nekom stavio palac gore klikneš ga i onda se stranica refresha, uspio sam namjestiti da se bar nađe na istom postu ali puno bi bolje bilo da se ne mora osvježit stranica.

Evo koda koji riješava za palac dolje, sve je isto i u palac gore samo su riječi suprotne tdn,tup :) http://pastebin.com/vRw8vFNT.

Napravio sam da automatski kad se stavi thumbdown da se skine thumbup i obratno.

Da, PHP je.

I ja sam mislio Javascriptom riješit da on izmijene sliku, promjeni brojku i doda te na listu prividno, to bi vjerojatno mogao sam izvest ali nije mi bilo jasno kako da ono zabilježi u bazu bez ponovnog učitavanja stranice. Znam za AJAX i znam da je to ono što mi treba ali to ne mijenja činjenicu da ne znam kako radi to funkcionira. Ako ima dobra duša da to pobliže pojasni .

Mogu li ovako to riješit?

http://chriscook.me/web-development/phpajax-execute-php-function-by-clicking-a-link/

I ako tako namjestim oću moći ovako namjestiti za Javascript

ubaciti u PHP kod ako je pritisnut (prikaziva tdnremove) $pritisnut = 1; a ako nije pritisnut (prikaziva tdnadd) $pritisnut = 0;

var pritisnut = "<?= $pritisnut ?>";

var pritisnut = "<?= $pritisnut ?>";

var kolkoimatdova = "<?= $post['tdncount'] ?>";

if (pritisnut==1) {

Šta već ide da zamijeni pritisnutu sliku sa nepritisnutom i oduzme brojku za counter, makne me sa liste

}

if (pritisnut==0) {

Šta već ide da zamijeni nepritisnutu sliku sa pritisnutom i doda brojku na counter, ubaci me na listu

}

Sad tu opet nastaje problem, vjerojatno bi sve radilo kad bi prvi put pritisnu dugme ali šta ako ga pritisnem opet? Hoće li se PHP kod osvježiti na stranici, hoće li Javascript dobiti novu brojku za brojač tj hoće li raditi ako želim opet nešto stisnuti.

<script>

$("#someid).click( function () {

//neki podaci kao postid, userid bla bla.. npr

var form_data ={userid: $("#nekid").val()

}

$.ajax({
        url: "url do php funkcije",
        type: 'POST',
        dataType: 'json',
        success: function(data) {

          if(data){
           //napravi nešto sa palcem
         }
        else{
        //pljuni neki error
        }
     }
  });

});

</script>

Evo ovo su osnove jquery ajax-a. Isto gore vrijedi i za GET, odnosno za dohvaćanje broja tu i td.

To je samo primjer.

form data su vrijednosti elemenata u nekoj formi. Dakle input, select, checkbox, textarea itd.

$('#nekiid').val(); uzima vrijednost elementa sa id-om #nekiid.

Ti naravno ne moraš koristiti formu, a userid se može preuzeti iz session-a, u backendu, kao i postid itd.

Ali na kraju krajeva ne trebaš ti koristiti jquery ajax, možeš koristiti čisti ajax. Ali ista stvar jer jquery ajax samo olakšava posao.

Dakle da bi ti radilo trebaš 2 POST ajax requesta i 2 GET, jedan od to dvoje za TU i jedan od to dvoje za TD.

Pa imaš li neku base_url funkciju? location.href nikako koristiti.

Druga stvar nikada, ali nikada ne echo-irati <script></script> tagove i sve što se u njima nalazi. To je vrlo loša sigurnosna praksa i može dovesti do izvršavanja arbitrarnog koda.

Treće, ne stavljaj php logiku u javascript. On ti mora samo služiti za prijenos podataka između frontenda i backenda.

Evo ti jedan mali dio koda koji ja koristim:

<script type="text/javascript">

    $('.remove').click(function(r){
       var mid = $(this).attr("id");
       jConfirm('Are you sure you want to delete this message permanently?', 'Delete message', function(r) {
          if(r){
             $.ajax({
                url: "<?php echo base_url();?>messages/delete/" + mid,
                type: 'POST',
                dataType: 'json',
                success: function(data) {
                   if (data.notify){
                        $.pnotify({
                         title: 'Success!',
                         text: data.message,
                         type: 'success',
                         history: false,
                         animation: 'show'
                         });                     
                     }
                   else{
                      $.pnotify({
                         title: 'Error!',
                         text: data.message,
                         type: 'error',
                         history: false,
                         animation: 'show'
                      });                     
                   }
                }
             });   
       }
          else{ return false;}
       });
    });

</script>

Vraćanje json-a u php-u:

     $array = array('notify' => TRUE, 'message' => $result);
     echo json_encode($array);