Placing Points in a widget

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Opera
Who the problem concerns : All members
Forum link : http://onepiecegr.forumgreek.com/forum

Description of problem

Quick question: I am trying to add the points field in the login widget using templates but i can't find any solution, is it possible to do something like this at all?

This will all profile fields to a widget:

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

hmmm for some reason when i put it there nothing happens, can you check my code?

Code:

  <div class="module main">
      <!-- BEGIN switch_login -->
      <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div>
      <div class="main-content">
      <form action="{S_LOGIN_ACTION}" method="post">
      <fieldset class="frm-set login">
          <dl>
            <dt><label for="username">{L_USERNAME}:</label></dt>
            <dd><input type="text" tabindex="1" name="username" id="username" size="20" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></dd>
          </dl>
          <dl>
            <dt><label for="password">{L_PASSWORD}:</label></dt>
            <dd><input type="password" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" /></dd>
            <dd><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></dd>
          </dl>
          <dl>
            <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /> {L_AUTO_LOGIN}</label></dd>
          </dl>
          <dl>
            <dd style="text-align:center;"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd>
          </dl>
                    <!-- BEGIN switch_fb_connect_login -->
                    <dl>
            <dd style="text-align:center;"> 
                                <div class="fb_login_widget">
                                    <div class="fb_or_widget">{switch_login.switch_fb_connect_login.L_OR}</div>
                                    <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button>
                                </div>
                            </dd>
          </dl>
                    <!-- END switch_fb_connect_login -->
      </fieldset>
      </form>
      </div>
      <!-- END switch_login -->

      <!-- BEGIN switch_login_small -->
      <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div>
      <div class="main-content">
      <form action="{S_LOGIN_ACTION}" method="post">

      <p><label for="username"><strong>{L_USERNAME}:</strong></label></p>
      <p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></p>
      <p><label for="password"><strong>{L_PASSWORD}:</strong></label></p>
      <p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p>
      <p><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></p>
            <br>
      <p><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /><label for="autologin"> {L_AUTO_LOGIN}</label></p>
            <br>
            <p align="center"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></p>
            <!-- BEGIN switch_fb_connect_login -->
                                <div class="fb_login_widget">
                                    <div class="fb_or_widget">{switch_login_small.switch_fb_connect_login.L_OR}</div>
                                    <p align="center"><fb:login-button size="small" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login_small.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login_small.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button>
                                </p>
                                </div>
                    <!-- END switch_fb_connect_login -->
      </form>
      </div>
      <!-- END switch_login_small -->

         
      <!-- BEGIN switch_profile -->
      <div class="main-content clearfix details">
      <div class="left">
        <dd style="text-align: center;"><h1>WANTED</h1></dd>
        <br>
          <dd style="text-align: center;">{USERNAME_AVATAR}</dd>
        <dd style="text-align: center;"><h4>DEAD OR ALIVE</h4></dd>
      </div>
      <dl class="left">
        <div style="text-align: right;"><h3>{USERNAME}</h3></div>
          <dt>{L_MESSAGES}: <strong>{NB_MESSAGES}</strong> </dt>
                <!-- BEGIN profile_field -->
        <dt>{postrow.displayed.profile_field.LABEL} :{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</dt>
        <!-- END profile_field -->
            
                       
        <dd style="text-align: center;"><a href="{U_PROFILE}">{L_MY_PROFILE}</a></dd>
      </dl>
      </div>
      <!-- END switch_profile -->
    </div>
    <!-- BEGIN switch_fb_widget_login -->
    <div id="fb-root"></div>
    <script>
        FB.init({
          appId      : {switch_fb_widget_login.FACEBOOK_APP_ID},
          cookie    : true,
          xfbml      : true,
          oauth      : true,
          version    : 'v2.3'
        });

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    <!-- END switch_fb_widget_login -->
<style>
.module .main-content {
    padding: 1em;
    background: url('http://i65.tinypic.com/2n9m1lf.jpg') no-repeat;
}
</style>

Are you adding that to a widget?

Code:

<div id="get_point"></div>

Code:

$(function() {
$('#get_point').html(_userdata.user_posts);
});

or

Code:

$(function() {
$('#get_point').load('/u'+ _userdata.user_id +' div#profile-advanced-details', function(d) {
$(this).html($('dl#field_id-13 .field_uneditable', d).text());
});
});

SLGray wrote:Are you adding that to a widget?

I am modifing the forummotion's Login widget (Mod_login template)

Phyton wrote:

Code:

<div id="get_point"></div>

Code:

$(function() {
$('#get_point').html(_userdata.user_posts);
});

or

Code:

$(function() {
$('#get_point').load('/u'+ _userdata.user_id +' div#profile-advanced-details', function(d) {
$(this).html($('dl#field_id-13 .field_uneditable', d).text());
});
});

for some reason none of these is working ++ i can't make any element of the widget get aligned to the center of the widget (username, posts etc.)

Are you publishing the modified template?

SLGray wrote:Are you publishing the modified template?

lol of course dude i am not stupid


btw i fixed the align problem but not i still can't make my points view on the widget

You'll need to use AJAX to get the point value. Add this to your template :

Code:

Points : <span id="points_value"></span>
<script type="text/javascript">//<![CDATA[
jQuery.get('/u' + _userdata.user_id, function(d) {
  var points = $('#field_id-13 .field_uneditable', d)[0];
  if (points) document.getElementById('points_value').innerHTML = points.innerHTML;
});
//]]></script>

Just place it where you want the points to display.

Ange Tuteur wrote:You'll need to use AJAX to get the point value. Add this to your template :

Code:

Points : <span id="points_value"></span>
<script type="text/javascript">//<![CDATA[
jQuery.get('/u' + _userdata.user_id, function(d) {
  var points = $('#field_id-13 .field_uneditable', d)[0];
  if (points) document.getElementById('points_value').innerHTML = points.innerHTML;
});
//]]></script>

Just place it where you want the points to display.

huh, forgot to say but phyton's second script actually worked, the align ,however, prevented me from seeing it in first place, when i fixed the mod_login's template align, it appeared!