Advertisement:

Author Topic: [Karma + Jquery + Ajax]  (Read 2073 times)

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,137
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
[Karma + Jquery + Ajax]
« on: August 06, 2016, 11:07:09 PM »
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.
Quote
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]
// ]]>
</script>

y agregaremos después

Code: [Select]
<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]
$(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




« Last Edit: August 06, 2016, 11:26:49 PM by Dhayzon »

Offline d3vcho(void)

  • Sempiterno
  • Lead Localizer
  • SMF Hero
  • *
  • Posts: 2,759
  • Gender: Male
    • frandominguez03 on GitHub
    • @_d3vcho on Twitter
Re: [Karma + Jquery + Ajax]
« Reply #1 on: August 07, 2016, 06:19:33 AM »
Muy buenos tutoriales los que estás haciendo últimamente. No estaría de más una mejor presentación :)
"Demons are like obedient dogs; they come when they're called"

d3vcho(void)

Offline Rock Lee

  • SMF Hero
  • ******
  • Posts: 1,704
  • Gender: Male
  • I also speak english :D
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: [Karma + Jquery + Ajax]
« Reply #2 on: August 07, 2016, 10:50:48 AM »
Muy bueno a ver si ahora me va en el theme default xD


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code © 2018
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,137
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Karma + Jquery + Ajax]
« Reply #3 on: August 07, 2016, 06:40:16 PM »
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]
                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]
    $( "#"+kid+" .uKarma-total" ).html(parseInt(str)+1);
 yo creo que le servirá a alguien,   todavía no lo termino por completo,