• Administrator
  •  
    Information: Choosing social login option will register your account automatically without the need for email confirmation.
     

[JavaScript] Widget for status updates

A place for codes and tutorials which will improve the functionality of your board.
Post Reply
User avatar
Shadow
Administrator
Posts: 21
Joined: Sat Jan 06, 2018 4:56 pm

Sun Jan 07, 2018 1:21 am

Description:
This tutorial will allow you to quickly change your profile status without a need of visiting your profile and changing a Status column.

Version:
Punbb (Forumotion)

Preview:
Image

Installation steps:
1. Create a new profile field like this:
Image

2. Create a new widget and put the following code inside:

Code: Select all

<div class="module main">
                                                                    
 <div class="main-head">
                                                                                            
 <div class="h3" id="statusTitle">
                                                        <em class="fa fa-comment-o"> </em>  <span id="statusAtual">Status update</span>                                                  
 </div>
                                                                               
 </div>
                                                                    
 <div class="main-content clearfix">
                                                                                            
 <div id="statusUpdateBody">
                                                                                                                
 <center>
                                                                          <input id="statusUpdate" type="text" style="width: 100px;" />                <input id="statusUpdateButton" value="OK" style=" margin-top: -3px; " type="submit" />                <br />Maxium amount of characters are <strong>21</strong>. <br /><strong><span style="color: #ff3300;">Important:</span></strong> Advertising is against rules.                           
 </center>
                                                                                                     
 </div>
                                                <script>
            jQuery(function () {
                jQuery('#statusUpdateButton').click(function () {
                    var USER_ID = _userdata["user_id"];
                    var statusText = jQuery('#statusUpdate').val();
                    var TID = jQuery('input[name="tid"]').val() + '';
                    jQuery.post("/ajax_profile.forum?jsoncallback=?", {
                        id: "7",
                        user: USER_ID,
                        active: "1",
                        content: '[["profile_field_13_1", "' + statusText + '"]]',
                        tid: TID
                    }, function (data) {
                        jQuery('#statusUpdate').val('');
                        jQuery('#statusTitle').html('Status has been updated.<span id="statusNovoAtual" style="display:none;"></span>');
                        jQuery('#statusNovoAtual').load('profile?mode=editprofile&page_profil=informations #', function () {
                            jQuery('#statusNovoAtual').hide();
                            var statusTextAtual = jQuery('#statusNovoAtual #profile_field_13_1').val();
                            jQuery('#statusTitle').html('<em class="fa fa-comment-o"></em> Status: <span id="statusAtualText">"' + statusTextAtual + '"</span>');
                            var statusTextChat = jQuery('#statusAtualText').text();
                        });
                        console.log("OK: ajax_profile, userID = " + USER_ID);
                    }, "json").fail(function () {
                        alert("There was an error updating status! If this problem persists, contact your administrators.")
                        console.log("error: ajax_profile, userID = " + USER_ID);
                    });
                });
            });
            jQuery(function () {
                jQuery('#statusAtual').load('profile?mode=editprofile&page_profil=informations #profile_field_13_1', function () {
                    jQuery('#statusAtual').hide();
                    var statusText = jQuery('#statusAtual #profile_field_13_1').val();
                    jQuery('#statusTitle').html('<em class="fa fa-comment-o"></em> Status: <br/><span id="statusAtualText">"' + statusText + '"</span>');
                });
            });
        </script>                                   
 </div>
</div>
 <style>#statusTitle br {
  display: none;
}
#statusTitle {
  white-space:nowrap;
  width: 100%;                  
  overflow:hidden;
  text-overflow:ellipsis;
}</style>  
In code find the following string: profile_field_13_1
Image

Replace it with your status field code with inspect element function in chrome or Mozilla. (Right click -> Inspect Element)
Closing Notes:
Feel free to ask your questions here!

User avatar
Jack Knows
Registered user
Posts: 7
Joined: Sat Mar 17, 2018 12:31 am

Sat Mar 17, 2018 12:51 am

Thanks this will come in handy.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest