[Karma + Jquery + Ajax]

[Dhayzon]

Modificar karma con ajax y  jquery



lo  are basado en una estructura separada  a la de por defecto, pero funciona perfectamente en el default.

esta es mi estructura html la que esta en la imagen.

echo'<div class="uKarma">
                       <div class="uKarma-good">
                       <a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" class="karma" title="', $modSettings['karmaApplaudLabel'], '"><i class="icon-left-open-big"></i> </a>
                       </div>
                       <div class="uKarma-total">', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</div>
                       <div class="uKarma-bad"><a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" class="karma" title="', $modSettings['karmaSmiteLabel'], '"><i class="icon-right-open-big"></i> </a></div>
                      </div>';

y buscaremos esto en el display.template de tu thema

Code Select Expand

// ]]>
</script>

y agregaremos después

Code Select Expand

<script type="text/javascript"><!-- // --><![CDATA[
var  smf_ksSessionId= "', $context['session_id'], '",
smf_ksSessionVar= "', $context['session_var'], '";

// ]]></script>


y esto agregaremos al final de nuestro theme.js  de nuestra plantilla

Code Select Expand

$(document).ready(function(){

     $(".karma").click(function(event) {
         event.preventDefault();
                var url = $(this).attr('href');
                 var vars = {};
                var parts = url.replace(/[?;]+([^=;]+)=([^;]*)/gi, function(m,key,value) {
                vars[key] = value;
                });
                var a = vars["action"],
                    b = vars["sa"],
                    c = vars["uid"],
                    d = vars["topic"],
                    e = vars["m"],
                    f = smf_ksSessionVar,
                    g = smf_ksSessionId;
                       $.post(smf_scripturl+'?action='+a+';sa='+b+';uid='+c+';topic='+d+';m='+e+';'+f+'='+g,

                         function(responseText) {
                            if (responseText.status === 'error') {
                               $('#error').html('<p>' + responseText.message + '<p>');
                            }
                         }
                      );
      });
         

});


hasta este punto ya podemos modificar el  karma sin tener que refrescar la pagina, si tienes dudas pregunten, y el tuto continuara

[d3vcho]

Muy buenos tutoriales los que estás haciendo últimamente. No estaría de más una mejor presentación

[-Rock Lee-]

Muy bueno a ver si ahora me va en el theme default xD


Saludos!

[Dhayzon]

esto es mas como ayuda,  lo que estoy haciendo exactamente es enviar los datos con ajax, talvez esté mal o no, pero funciona,  al hacer click en +1 o la etiqueta que pongas +aplaud etc..  el dato se envía sin refrescar la pagina, pero no se nota que fue enviado.

para eso tendríamos que obtener el total  del karma y sumarle  +1  con cada click ,

Code Select Expand


                var kid = $(this).parent().parent().attr('id');
                 var str = $( "#"+kid+" .uKarma-total" ).text();
                          $( "#"+kid+" .uKarma-total" ).html(parseInt(str)+1);


luego faltaría un else if para saber si es applaud o smite y asi sumarle o restarle  en esta parte

Code Select Expand

    $( "#"+kid+" .uKarma-total" ).html(parseInt(str)+1);

yo creo que le servirá a alguien,   todavía no lo termino por completo,