How to add fields to user list by making JS?

Page 1 of 2 1, 2  Next

Go down

Solved How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Fri Aug 02 2019, 15:23

Hello, I need some help. I want to display the user rating in the user list.

I know that there are scripts that will help add new fields to the list of users, and therefore I really need a script that will help add a user rating or at least a field from the profile, for example: id = "field_id2"

Well, this is an example, but there will be a heading in this area.

Do not talk about mood swings. I use this field for other purposes, but other fields cannot be edited. This is a joke? How to change the “Private message” field in the field in which the user can publish, for example, his quote so that it can be seen in the list of users?


How to add fields to user list by making JS? 567ed8685e71c8


Here is a screenshot. I want to add this page after the username. So each user displays his own field.

Here is my forum and this page:

http://milanwake.forum2x2.ru/memberlist

Version of ModernBB.


Last edited by Storyteller of Wonderland on Fri Aug 16 2019, 15:04; edited 4 times in total
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by System32 on Fri Aug 02 2019, 15:53

I truly believe that because of your arrogant approach this topic may finish in thrash. Plus your image can not be seen. Also, the page can not be seen unless we are registered.

EDIT: Maybe this tutorial can be of some use: https://help.forumotion.com/t156778-add-instagram-as-contact-field-to-your-forum?highlight=add+new+field
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Fri Aug 02 2019, 16:04

@System32 wrote:I truly believe that because of your arrogant approach this topic may finish in thrash. Plus your image can not be seen. Also, the page can not be seen unless we are registered.

EDIT: Maybe this tutorial can be of some use: https://help.forumotion.com/t156778-add-instagram-as-contact-field-to-your-forum?highlight=add+new+field


I use a translator, so I did not immediately notice that he roughly translated my words. Corrected. Razz

By the way, thanks for noticing. I am never hostile))

I will now attach a new screenshot to show exactly what I want.


Thanks for the link, but this topic is completely different. Now I’ll show you exactly what I need ...
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by System32 on Fri Aug 02 2019, 16:12

System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Sat Aug 03 2019, 05:49

Okay, this topic is also not what you need ...

I will show what I could find. There is a script:

Code:

$(function(){
  var a=$('.zerstorer').get();
  for(i=0;i<a.length;i++) {
    var b=a[i].firstChild;
    var uid=b.href.substring(b.href.indexOf('/u')+2);
    $( $('.okeys')[i]).append('<a class="inprf" href="/u' + uid + 'contact">Contact</a>');
  }
});



This is the first:

Code:
var a=$('.zerstorer').get(); - Here is the class the user nickname is wrapped in.


This is the second:

Code:
$( $('.zerstorer')[i]).append('<a class="inprf" href="/u' + uid + 'contact">Contact</a>'); -
Here is the diva class in front of which you need to put the created element containing the desired fragment, and of course the fragment itself



This script inserts a link to the contact page on the user list page next to the name of each user, while the links are correct and each has its own link to its contact page.

Code:
$(function(){
  var a=$('.zerstorer').get();
  for(i=0;i<a.length;i++) {
    var b=a[i].firstChild;
    var uid=b.href.substring(b.href.indexOf('/u')+2);
    $( $('.okeys')[i]).append('<a class="inprf" href="/u' + uid + 'contact">Contact</a>');
  }
});



Now ... I need to change this script so that it does not display a link to the contact page, namely the user rating. If this does not work, then you can at least have a field, for example, field_id-12 from the user’s page, and I’ll already insert the header there. The main thing is that it is displayed next to the username in the list of users.


My template looks like this:


Code:
<h1 class="page-title solo">{PAGE_TITLE}</h1>

<div class="forumbg forumbg-table">
   <div class="inner"><span class="corners-top"><span></span></span>

   <table class="table1" cellspacing="1" id="memberlist">
   <thead>
   <tr>
      <th class="number">#</th>
      <th class="name">{L_AVATAR} - {L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
         <th class="group">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="interests">{L_INTERESTS}</th>
      <th class="joined">{L_JOINED}</th>
      <th class="active">{L_VISITED}</th>
      <th class="posts">{L_POSTS}</th>
      <th class="pm">{L_PM}</th>
      <th class="website">{L_WEBSITE}</th>
   </tr>
   </thead>
   <tbody>
   <!-- BEGIN memberrow -->
   <tr class="{memberrow.ROW_CLASS}">
      <td>&nbsp;{memberrow.ROW_NUMBER}&nbsp;</td>
      <td class="avatar-mini"><div class="zerstorer"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;{memberrow.USERNAME}</a></div><div class="okeys"></div></td>
      <!-- BEGIN switch_td_group -->
         <td>{memberrow.GROUPS}</td>
      <!-- END switch_td_group -->
      <td>{memberrow.INTERESTS}</td>
      <td>{memberrow.JOINED}</td>
      <td>{memberrow.LASTVISIT}</td>
      <td>{memberrow.POSTS}</td>
      <td>&nbsp;{memberrow.PM_IMG}&nbsp;</td>
      <td>&nbsp;{memberrow.WWW_IMG}&nbsp;</td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
   </tr>
   <!-- END switch_no_user -->
   </tbody>
   </table>

   <span class="corners-bottom"><span></span></span></div>
</div>



Code:
<td class="avatar-mini"><div class="zerstorer"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;{memberrow.USERNAME}</a></div><div class="okeys"></div></td>


As you can see, the necessary divas stand still. If you paste the script into the console on this page, it displays a link to his contacts next to the user’s name, but I need a rank or at least a profile field in which I will put the user’s rank ...


I also tried to use something like this, but the console throws an error and indicates something is wrong. This should fulfill the function .load but the error ...

Code:
$(function(){
        var thfield = 'field_id-12';
        $('#memberlist .zerstorer a[href^="/u"]').each(function(index){
          var prof = jQuery(this).attr('href');
          $(.okeys).load(prof + ' #' + thfield');
           
             
        });
        });
     
        });


please help who can ... I’ve been unable to find a solution for two weeks ... I thought I could, but it didn’t work out ... It will be useful for many who want to add new fields to the list of users, while the script is simple and will not huge load ...


If I load the rank separately for each user in the list of users, it will be a very huge script, for example, I have 2000 users ... I can’t do this ... Why don’t I want to use the Mood field? Because I already use it for another.

I want to change the structure of the user list and make it more beautiful and adaptive, so I ask for help ... I really don’t know how to change the script
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Mon Aug 05 2019, 13:22

I will leave a message so as not to cause an opinion that a solution has been found ... I still need help, guys ...

I am pleased to see the sign - In progress, and I want to believe in the best ...
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by skouliki on Mon Aug 05 2019, 13:53

hello

i put the topic icon , we do that to all threads 

thank you
skouliki
skouliki
Manager
Manager

Female Posts : 6540
Reputation : 982
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Mon Aug 05 2019, 14:01

@skouliki wrote:hello

i put the topic icon , we do that to all threads 

thank you


Hi buddy geek

Good...)
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by omarpop23 on Mon Aug 05 2019, 18:21

can u put your forum URL
omarpop23
omarpop23
Forumember

Male Posts : 182
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Mon Aug 05 2019, 19:08

@omarpop23 wrote:can u put your forum URL

Hello!

Yes, of course, here is my clean test forum without scripts or other modifications.

http://milanwake.forum2x2.ru/memberlist

Link to the forum, as well as directly to the users page.

Version of ModernBB.
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Wed Aug 07 2019, 19:00

I tried to make it such a script:

Code:
$( document ).ready(function() {
 $('#zerstorer a[href^="/u"]').each(function() {
 var url = this.href;
$(this).load(url +'.hello > #field_id-12');
 });
});

I wrapped the user profile link in a div with Id - zerstorer i.e.:

Code:
<div class="zerstorer"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;{memberrow.USERNAME}</a></div>

Next, I created the header, and of course the block into which the information should be loaded, okay:

<td><div class="hello"></div></td>

I posted this block after the avatar and nickname of the user.

Below I posted my full template:

Code:
<h1 class="page-title solo">{PAGE_TITLE}</h1>

<div class="forumbg forumbg-table">
   <div class="inner"><span class="corners-top"><span></span></span>

   <table class="table1" cellspacing="1" id="memberlist">
   <thead>
   <tr>
      <th class="number">#</th>
      <th class="name">{L_AVATAR} - {L_USERNAME}</th>
                <th class="name">Rang</th>
      <!-- BEGIN switch_th_group -->
         <th class="group">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="interests">{L_INTERESTS}</th>
      <th class="joined">{L_JOINED}</th>
      <th class="active">{L_VISITED}</th>
      <th class="posts">{L_POSTS}</th>
      <th class="pm">{L_PM}</th>
      <th class="website">{L_WEBSITE}</th>
   </tr>
   </thead>
   <tbody>
   <!-- BEGIN memberrow -->
   <tr class="{memberrow.ROW_CLASS}">
      <td>&nbsp;{memberrow.ROW_NUMBER}&nbsp;</td>
      <td class="avatar-mini"><div class="zerstorer"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;{memberrow.USERNAME}</a></div></td>
                <td><div class="hello"></div></td>
      <!-- BEGIN switch_td_group -->
         <td>{memberrow.GROUPS}</td>
      <!-- END switch_td_group -->
      <td>{memberrow.INTERESTS}</td>
      <td>{memberrow.JOINED}</td>
      <td>{memberrow.LASTVISIT}</td>
      <td>{memberrow.POSTS}</td>
      <td>&nbsp;{memberrow.PM_IMG}&nbsp;</td>
      <td>&nbsp;{memberrow.WWW_IMG}&nbsp;</td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
   </tr>
   <!-- END switch_no_user -->
   </tbody>
   </table>

   <span class="corners-bottom"><span></span></span></div>
</div>


However, nothing came of it.

But!

I found this thing on the Romanian forum:

https://help.forumgratuit.ro/t48385-afisarea-rangurilor-in-lista-de-membri-phpbb2?highlight=lista+de+membri

And this works to some extent for phpbb2. But not as needed. An attempt to do this on modernbb using the field I needed instead of the image failed.

I just don't understand Javascript very well, so I want some help.
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Wed Aug 07 2019, 19:59

Hello,

I made an account on your forum(same username as here) and I can't access the memberlist or the user profiles(I get
Code:
You haven't got the rights to access this page
). Displaying the ranks will probably mean making requests to the profile pages and eventually caching them in localStorage.

The code would look similar to this:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.users'); // the a tag that contains the user page link
var ranks=_query('.ranks'); // the element where the ranks will be displayed
var aranks='.aranks'; // the element in the user page that contains the ranks

var len=users.length;

function get(i){
if(i==len) return false;
var id=users.getAttribute('a').match(/\d+/);

if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {

fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
ranks[i].innerHTML=doc.querySelector(arank).innerHTML;
get(i+1);
}).catch(function(err){ 
console.log(err); 
});
}

}
})

I haven't tested this but with a couple modifications it should work. Unless I made an error. Which I probably did Smile
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Wed Aug 07 2019, 21:24

@Occultist wrote:Hello,

Spoiler:
I made an account on your forum(same username as here) and I can't access the memberlist or the user profiles(I get
Code:
You haven't got the rights to access this page
). Displaying the ranks will probably mean making requests to the profile pages and eventually caching them in localStorage.

The code would look similar to this:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.users'); // the a tag that contains the user page link
var ranks=_query('.ranks'); // the element where the ranks will be displayed
var aranks='.aranks'; // the element in the user page that contains the ranks

var len=users.length;

function get(i){
if(i==len) return false;
var id=users.getAttribute('a').match(/\d+/);

if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {

fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
ranks[i].innerHTML=doc.querySelector(arank).innerHTML;
get(i+1);
}).catch(function(err){ 
console.log(err); 
});
}

}
})

I haven't tested this but with a couple modifications it should work. Unless I made an error. Which I probably did Smile

Hello! Flowers

Thanks for the answer!

Alas .. it doesn’t work ... I used your code:

Code:

function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.users');
var ranks=_query('.ranks');
var aranks='#field_id-11';
 
var len=users.length;
 
function get(i){
if(i==len) return false;
var id=users.getAttribute('a').match(/\d+/);
 
if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {
 
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
ranks[i].innerHTML=doc.querySelector(arank).innerHTML;
get(i+1);
}).catch(function(err){
console.log(err);
});
}
 
}
})

adding only the desired id from the user’s page. Strange, but the console does not produce errors, but also does not give a result. I waited about 30 minutes. Nothing ...

As for access, I do not understand)) It seems that everything is normal, just in case I checked it. If there is also no access, I can send a new test account cat

I think that if you change this script, everything will work out ...

Code:
$ (function () {
  var a = $ ('. users'). get ();
  for (i = 0; i <a.length; i ++) {
    var b = a [i] .firstChild;
    var uid = b.href.substring (b.href.indexOf ('/ u') + 2);
    $ ($ ('. rang') [i]). append ('<a class="inprf" href="/u' + uid +'contact"> Contact </a>');
  }
});
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Wed Aug 07 2019, 21:40

I still can't access any of those 2 pages. I get this error for both of them:

How to add fields to user list by making JS? PdVvroLl

As about the code not working, I made it blindly. I was kind of expecting it not to work. I could probably make it work once I can see those pages.

The code that you posted doesn't have much to do with this issue. Plus you'll have a hard time convincing me to use jquery Smile
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Wed Aug 07 2019, 21:54

Strange, but there really was no access to the page. Sorry, apparently I changed something in the settings. Now access is open to both guests and users. You can check
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Wed Aug 07 2019, 22:27

I can access the pages now. The selectors were a bit off and I somehow forgot to actually call the run function. Also the localStorage part was missing about half of the code that was needed. Anyway, this is the updated version:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.avatar-mini>div>a'); // the a tag that contains the user page link
var ranks=_query('.ranks'); // the element where the ranks will be displayed
var aranks='#field_id-9>dd>.field_uneditable'; // the element in the user page that contains the ranks
       
var len=users.length;
       
function get(i){
if(i==len) return false;
var id=users[i].getAttribute('href').match(/\d+/);
       
if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {
 
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
try{
var r=doc.querySelector(aranks).innerHTML;
localStorage.setItem('user'+id, r);
if(r!==null){
ranks[i].innerHTML=r;
}
} catch(e){
console.log(e)
}
get(i+1);
}).catch(function(err){
console.log(err);
});
}
       
}
get(0);
})
There is a problem though. In my profile(http://milanwake.forum2x2.ru/u5) there is a field with the rank(Звание as per google translate). My rank seems to be
Code:
-
. I can't see any rank on the other profiles, though. I made a modification in the code to make sure that the code doesn't go haywire when it encounters profiles with that issue.
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Thu Aug 08 2019, 18:42

@Occultist wrote:
Spoiler:
I can access the pages now. The selectors were a bit off and I somehow forgot to actually call the run function. Also the localStorage part was missing about half of the code that was needed. Anyway, this is the updated version:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.avatar-mini>div>a'); // the a tag that contains the user page link
var ranks=_query('.ranks'); // the element where the ranks will be displayed
var aranks='#field_id-9>dd>.field_uneditable'; // the element in the user page that contains the ranks
       
var len=users.length;
       
function get(i){
if(i==len) return false;
var id=users[i].getAttribute('href').match(/\d+/);
       
if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {
 
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
try{
var r=doc.querySelector(aranks).innerHTML;
localStorage.setItem('user'+id, r);
if(r!==null){
ranks[i].innerHTML=r;
}
} catch(e){
console.log(e)
}
get(i+1);
}).catch(function(err){
console.log(err);
});
}
       
}
get(0);
})
There is a problem though. In my profile(http://milanwake.forum2x2.ru/u5) there is a field with the rank(Звание as per google translate). My rank seems to be
Code:
-
. I can't see any rank on the other profiles, though. I made a modification in the code to make sure that the code doesn't go haywire when it encounters profiles with that issue.

And so ... it only works if you put the script in the Admin Panel - Modules - Manage Scripts - By creating a document.

But this does not work if I upload an external file with the script.js extension or if I attach the script in the <script> </ script> tags before the </ body> tag in the total_footer_end template

Yes interesting. And thanks for the proposed option, but I do not use script loading through the Script Management in the admin panel.

I have many scripts that I use in my work, and all of them are based either on Vue.js | Corner | Jquary | Reaction and conflict do not exist. Most often for forums I use Jquary.

Your code reminds me of Vanilla JS, and therefore I think that it does not work in the template.

It would be more convenient for me to get a solution on Jquary...

Update: Error detection in the console.

This script, when attached to a template, causes an error in the console. This is bad...

How to add fields to user list by making JS? Q4jqwpldvtmw2syew3q5e89rf

Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Thu Aug 08 2019, 19:28

There are some comments in my code(lines 8, 9 and 10). When you put the code in the templates, it gets minified. Normally, those comments automatically close themselves, but when the entire code is on a single line, the comment basically spans the whole line, making more than half of the code a comment.

This code solves that issue:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.avatar-mini>div>a');
var ranks=_query('.ranks');
var aranks='#field_id-9>dd>.field_uneditable';       
var len=users.length;
       
function get(i){
if(i==len) return false;
var id=users[i].getAttribute('href').match(/\d+/);
       
if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {
 
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
try{
var r=doc.querySelector(aranks).innerHTML;
localStorage.setItem('user'+id, r);
if(r!==null){
ranks[i].innerHTML=r;
}
} catch(e){
console.log(e)
}
get(i+1);
}).catch(function(err){
console.log(err);
});
}
       
}
get(0);
})

My code looks like vanilla js because that's what it is. The original js, which is faster then any framework, be it jquery, vue, angular or whatever else.
Honestly speaking, if you did really work with those frameworks you mentioned, you would not only have been able to fix the issue with the comments, but you would have been able to code this entire script by yourself.
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Thu Aug 08 2019, 23:34

@Occultist wrote:There are some comments in my code(lines 8, 9 and 10). When you put the code in the templates, it gets minified. Normally, those comments automatically close themselves, but when the entire code is on a single line, the comment basically spans the whole line, making more than half of the code a comment.

This code solves that issue:
Code:
function query(e){
return document.querySelector(e);
}
function _query(e){
return document.querySelectorAll(e);
}
document.addEventListener('DOMContentLoaded', function(){
var users=_query('.avatar-mini>div>a');
var ranks=_query('.ranks');
var aranks='#field_id-9>dd>.field_uneditable';       
var len=users.length;
       
function get(i){
if(i==len) return false;
var id=users[i].getAttribute('href').match(/\d+/);
       
if(localStorage.getItem('user'+id)!==null){
ranks[i].innerHTML=localStorage.getItem('user'+id);
get(i+1);
} else {
 
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
try{
var r=doc.querySelector(aranks).innerHTML;
localStorage.setItem('user'+id, r);
if(r!==null){
ranks[i].innerHTML=r;
}
} catch(e){
console.log(e)
}
get(i+1);
}).catch(function(err){
console.log(err);
});
}
       
}
get(0);
})

My code looks like vanilla js because that's what it is. The original js, which is faster then any framework, be it jquery, vue, angular or whatever else.
Honestly speaking, if you did really work with those frameworks you mentioned, you would not only have been able to fix the issue with the comments, but you would have been able to code this entire script by yourself.

You are just a magician!

Thanks so much buddy ...!

Well, you know, I usually use ready-made solutions and rarely write my own, because there is not enough knowledge in the codes. I am more a web designer and builder than an encoder, since I switched to training frameworks and javascript + php only at the beginning of this year. More precisely in the month of March.

Okay

I apologize for my stupid question, but in order not to ask a thousand questions later, I immediately want to know how to duplicate this code?

For example, I need to load five fields. For example :

#field_id-9 #field_id-10 #field_id-11 #field_id-12 #field_id-13

How then to write codes?
That which is separately clear. But there clearly need to change the variables? Please show.

By the way, your code will definitely work quietly? Since I want to bring this method to 30 different sites.
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Fri Aug 09 2019, 10:08

I am currently on my phone. I will modify the code later to work with multiple fields.
In theory, as long as the selectors are correctly provided, the code should work on any forum. If it doesn't you can always post here on the support forum.
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Fri Aug 09 2019, 10:50

Yes, I understand. It’s hard to do anything on the phone)) I’ll wait and better until I close the topic. After an hour, I will get to the computer and check the change of variables to create at least two queries. In any case, I will publish the result here and I will wait for your help.

Once again, many thanks to you for your help ... I already thought that no one would help.

Update: hmm ... no, I changed the names of the variables, all but the one that should take the user's link, but there is no result. nothing comes out. The script copies the operation of the first script and inserts the same field into a new block.
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Sat Aug 10 2019, 15:47

I think I might have finally managed to get it working:
Code:
function query(e) {
    return document.querySelector(e);
}

function _query(e) {
    return document.querySelectorAll(e);
}
window.ls = {
    save: function(name, data, expiry) {
        localStorage.setItem(name, JSON.stringify({
            data: data,
            expiry: expiry,
            date: (new Date).getTime(),
        }))
    },
    get: function(name) {
        var b, c, d;
        b = localStorage.getItem(name);
        if (b === null) return null;
        b = JSON.parse(b);
        c = (new Date).getTime();
        d = parseInt(b.expiry);
        if (c - b.date >= b.expiry && b.expiry !== -1) {
            localStorage.removeItem(name);
            return null;
        } else {
            return b.data;
        }
    }
}
;document.addEventListener('DOMContentLoaded', function() {
    if (location.pathname != '/memberlist') return false;
    var users = _query('.avatar-mini a');
    var fields = [_query('.alalal'), _query('.lalala')];
    var profilefields = ['#field_id-6 dd div.field_uneditable', '#field_id-7.left-box.details .field_uneditable'];
    var exp = 1000 * 60 * 60 * 24 * 7;
    var len = users.length,
        len2 = fields.length,
        len3;

    function get(i) {
        if (i == len) return false;
        var id = users[i].getAttribute('href').match(/\d+/);
        var data = ls.get('user' + id),
            j = 0;
        if (data !== null && data.fields.length === len2 && data.fields.indexOf(null) === -1) {
        len3 = data.fields.length;
            for (; j < len3; j++) {
                fields[j][i].innerHTML = data.fields[j]
            }
            get(i + 1)
        } else {
          (function(i){
            fetch('/u' + id).then(function(response) {
                return response.text()
            }).then(function(html) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, "text/html");
                var data = [];
                for (var k = 0; k < len2; k++) {
                    var q = doc.querySelector(profilefields[k]);
                    if (q === null) {
                        data.push( null);
                        fields[k][i].innerHTML = null
                    } else {
                        data.push(q.innerHTML);
                        fields[k][i].innerHTML = q.innerHTML
                    }
                };
                ls.save('user' + id, {
                    fields: data
                }, exp);
                get(i + 1)
            })
              })(i);
             
        }
    }
    get(0)
})


These are the lines that need to be edited:
Code:
var users = _query('.avatar-mini a');
var fields = [_query('.alalal'), _query('.lalala')];
var profilefields = ['#field_id-6 dd div.field_uneditable', '#field_id-7.left-box.details .field_uneditable'];
var exp = 1000 * 60 * 60 * 24 * 7;
Code:
users
is the link to the user profiles.
Code:
fields
are the elements where the data will be inserted. To add a third one, you can edit it like this:
Code:
[_query('.alalal'), _query('.lalala'), _query('selector')]
modifying selector to match the element. Note that query without the _ will not work.
Code:
profilefields
are the selectors for the elements on the profile page. They have to be the direct selectors.
Code:
exp
is the number of milliseconds after which the data will be refreshed. 1000*60*60*24*7 is exactly a week. If you don't want the data to be refreshed, replace this with
Code:
-1
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Sat Aug 10 2019, 18:34


It causes an error in the console, in Brackets too ...

The template causes an error.

And it doesn’t work ...

How to add fields to user list by making JS? Y24rbzo1qw5fz79i4ilu37w3v

How to add fields to user list by making JS? Y2m3mvpyan1a9q8nv26hv65fi

and I already thought that now everything will work out ...
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Sat Aug 10 2019, 19:30

This is weird. It works on my side, tested both on Firefox and Chrome.
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by SLGray on Sat Aug 10 2019, 20:40

When you copied and pasted the codes from here, did the numbers also get copied and pasted?  If yes, you need to remove them.


How to add fields to user list by making JS? Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46087
Reputation : 3250
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland on Sun Aug 11 2019, 00:38

@SLGray, hello! Yes, of course, I copy safely so that there are no numbers and a failure in the code.


@Occultist,

Strange ... but the template is clean. I deliberately reset the template and set the code so that there was no reason to worry about the changed template. But the error does not work again.

I also pasted the code into the control panel indicating the display on all pages. Again there is no result.

Then I ran the script through the javascript validator and it gave me as many as 16 errors compared to the previous code in which there are only 3 errors.

I understand that there are errors in any code, but ... if it just didn’t work, this is one thing, but it also shows an error in the template itself, giving the body and html tags red, which means an error ...
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist on Thu Aug 15 2019, 19:44

Sorry for my one-week hiatus. I had some personal issues to solve.

Anyway, the templates use some sort of a code highlighter that is quite messed up when it comes to highlighting anything but html. Did you manage to make the code work?
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland Yesterday at 01:34

@Occultist wrote:Sorry for my one-week hiatus. I had some personal issues to solve.

Anyway, the templates use some sort of a code highlighter that is quite messed up when it comes to highlighting anything but html. Did you manage to make the code work?

Hello my friend! I'm so glad you are in touch! Moderator

Yes, I understand that there is a personal life and therefore I waited. Thank you for coming back.

And so ... despite all my attempts, I could not get it to work.

I changed the names of variables, inserted into the template and control panel, in short, did everything differently. It didn’t work out ...

At the moment, I use your previous script and load only one field, but I need two more, but at least one more ...

Code:
$(function(){
        var newbname = "New Field"; // New Column Name
        var aftbox = parseInt("0"); // The column after which your new one will be inserted .. countdown from 0
        var thfield = 'field_id-1'; //  id of your field
        var wfield = ["3","4","5"]; // columns to delete .. starting from 0 and including your new column from left to right
        var remf = "yes";  // delete columns or not
        $('#memberlist thead tr th').eq(aftbox).after('<th class="name" nowrap="nowrap">'+newbname+'</th>');
        $('#memberlist tbody tr').each(function(){
          $(this).find('td').eq(aftbox).after('<td class="row2" id="blahhh" align="center">LOADING...</td>');
        });
        $('#memberlist tbody tr td:nth-child(2) a[href^="/u"]').each(function(index){
          var prof = jQuery(this).attr('href');
          $(this).closest('tr').find('td').eq(aftbox+1).load(prof + ' #'+thfield+':eq(0)', function() {
              jQuery(this).find('dt').remove();
              jQuery(this).text().replace("-","");
              jQuery(this).find('.field_uneditable').unwrap();
        });
        });
        if(remf =="yes"){
        for (var i = wfield.length-1; i>-1; i--){
        $('#memberlist thead tr th').eq(parseInt(wfield[i])).remove();
        $('#memberlist tbody tr').each(function(){
          $(this).find('td').eq(parseInt(wfield[i])).remove();
        });};};
        });


I found such code in Jquary. But it works with the table, i.e. when the profile template is standard, but I have already changed it.

Here is the link:

http://milanwake.forum2x2.ru/memberlist

Sorry, there is no menu on the site. I cleaned to make a new cool. Therefore, I immediately give the link.


Here is the name of the block class to which you want to load Rating:

Code:
<span class="rating"></span>

And this is the id of this field from the user’s page:

Code:
#field_id-14

Please help, I really need this ...

By the way, this script works crookedly ... but it works ... This is a stupid solution.
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Occultist Yesterday at 12:44

You did a good job on the design. Congratz!

Anyway, I still have no idea why that code doesn't work. Anyway, I rewrote the entire thing:
Code:
function query(e){
return document.querySelector(e);
};
function _query(e){
return document.querySelectorAll(e);
};

document.addEventListener('DOMContentLoaded', function(){
if(!(location.pathname==="/memberlist")) return false;
var users=_query('.user-box.username a');
var fields=[_query('.rating')];
var proffields=['#field_id-14 .field_uneditable'];
var len=users.length, len2=fields.length;
function get(i){
if(i==len) return false;
var id=users[i].getAttribute('href').match(/\d+/);
fetch('/u'+id).then(function(response){
return response.text();
}).then(function(html){
var parser=new DOMParser();
var doc=parser.parseFromString(html, "text/html");
window.doc=doc;
var k=0;
for(;k<len2;k++){
fields[k][i].innerHTML=doc.querySelector(proffields[k]).innerHTML;
};
get(i+1);
});
};
get(0);
});
It works when tested in the console. Let me know if it works on your side. If you place it in the memberlist template, you can remove this line:
Code:

if(!(location.pathname==="/memberlist")) return false;

Edit:I realized I use the word anyway too much Laughing
Occultist
Occultist
Forumember

Posts : 54
Reputation : 21
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: How to add fields to user list by making JS?

Post by Storyteller of Wonderland Yesterday at 15:03

I want to thank you for your time, efforts and patience. You have helped me a lot, and I hope that my words of gratitude will be able to convey to you all my gratitude.

I want to say that the script located in the overal_footer_end template colors the </ body> tag in red, but, as I understand it, this is because the script has an unusual code format. Not a special problem ...)) This code does not work in the panel, but here I am sure that it is better not to put anything there at all))

If suddenly in the future I have problems with these scripts, I will ask for help, but so far there are no problems, we can finally consider the topic closed. I have accumulated many other questions)) But already in new topics.

Thanks again for your help, @Occultist Cheer Razz Love and peace, baby
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 104
Reputation : 10
Language : Russian, German, French, English.
Location : Russia

http://milanwake.forum2x2.ru

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum