Looping through mini profile fields

[Cicada]

I'm trying to add links to members' characters on their mini profiles, and since many of the members have lots of characters I'd like the option of having up to 30 links. However, I'm also trying to allow them to input their own links, character names, and colours in so that it can act as a replacement for their signatures (which are too small). Initially I tried this with a couple of {foreach} loops and it worked fine, but when I tried to get it up to 30 characters it told me there were too many. I've tried a couple of other things, but none of them worked.

This is the one that I got working initially (cut down due to repetitiveness):

<span style="
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 1 Color"}
color: #$[user.mini_custom_field.value]
{/if}
{/foreach}" title="
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 1 Name"}
$[user.mini_custom_field.value]
{/if}
{/foreach}">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 1 Link"}
<a href="$[user.mini_custom_field.value]" style="color: inherit;">[1]</a>
{/if}
{/foreach}</span>

<span style="
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 2 Color"}
color: #$[user.mini_custom_field.value]
{/if}
{/foreach}" title="
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 2 Name"}
$[user.mini_custom_field.value]
{/if}
{/foreach}">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character 2 Link"}
<a href="$[user.mini_custom_field.value]" style="color: inherit;">[2]</a>
{/if}
{/foreach}</span>

I tried a few more between here and there, but this is the one I'm trying to get to work now. Bear with me, I'm mostly working off of my beginner's knowledge of Java, not JS:

<script>
       var color = [];
       var name = [];
       var link = [];
       var char = [];
       for (i = 0; i < 30; i++){
           $[user.mini_custom_field].foreach(){
               if ($[user.mini_custom_field.name] == "Character " + i + "Color"){
                color[i] = "$[user.mini_custom_field.name]";
               }
           }
       }
       for (i = 0; i < 30; i++){
           $[user.mini_custom_field].foreach(){
               if ($[user.mini_custom_field.name] == "Character " + i + "Name"){
                   name[i] = "$[user.mini_custom_field.name]";
               }
           }
       }
       for (i = 0; i < 30; i++){
           $[user.mini_custom_field].foreach(){
               if ($[user.mini_custom_field.name] == "Character " + i + "Link"){
                   if ($[user.mini_custom_field.value] != ""){
                       link[i] = "$[user.mini_custom_field.name]";
                   }
               }
           }
       }
       for (i = 0; i < link.length; i++;){
           char[i] = "<span style=\"color: #" + color[i] + "\" title=\"" + name[i] + "\"><a href=\"" + color[i] + "\" style=\"color: inherit;\">[" + i + "</a></span>";
       }
       document.getElementById("charbox").innerHTML = char;
   </script>

Any suggestions?

[Brian]

Ideally you'll want a single foreach loop in the template that simply goes through all of your custom fields and adds the same hidden predesignated HTML for all of them similar to how the default template does it, then pick through that HTML using Javascript.

Trying to do it through the templates alone results in a massive mess due to all of the inline if statements and has a ton of limitations. There's no limit on the amount of Javascript if statements you can use, so you can go crazy there if you need to do extra customization. In addition, you also get the added security of not having to worry about the page breaking if a user enters quotation marks or other potential things that would end your tags early since Javascript escapes them.

Can't guarantee the Javascript down below will work 100% since I just typed it out and didn't fully test it (I'd have to set up all of those custom fields) but it should be a start. I can debug it later.


HTML (goes in Mini-Profile template anywhere before the final closing </div> tag):

{foreach $[user.mini_custom_field]}
<span class="field-name $[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]</span>
<span class="field-value $[user.mini_custom_field.content_class]">$[user.mini_custom_field.value]</span>
{/foreach}

CSS (goes at the bottom of theme's style sheet):

.mini-profile .field-name,
.mini-profile .field-value { display: none; }

Javascript/jQuery (goes in Forum Wrapper template before closing </head> tag):

<script type="text/javascript">
    function sortCustomFields(){
        $('.mini-profile').each(function(){
            var fields = {};
            for(i=0; i<$(this).find('.field-name').length; i++){
                var n = /character\d\d?\w*/.exec($(this).find('.field-name').eq(i).attr('class').split('custom-field-')[1]);
                if(n){
                    n = n.toString();
                    var num = /\d\d?/.exec(n).toString();
                    if(!fields[num])
                        fields[num] = {};
                    fields[num][$(this).find('.field-value').eq(i).attr('class').split(num)[1]] = $(this).find('.field-value').eq(i).html();
                }
            }
            for(var i in fields)
                $(this).append('<span style="color: #'+fields[i].color+'" title="'+fields[i].name+'"><a href="'+fields[i].link+'" style="color: inherit;">['+i+']</a></span> ');
        });
    }
    $(document).ready(function(){ sortCustomFields(); });
    proboards.on('afterSearch',function(){ sortCustomFields(); });
</script>

[Brian]

Alternatively I can make it so that instead of always using the character number associated with the custom profile field it always counts up from 0 so that it doesn't go "1, 2, 3, 11" like in my screenshot (since I filled out their corresponding fields and skipped the others between 3 and 11) and instead goes "1, 2, 3, 4" regardless of which number you filled out.

[Cicada]

That would be a lot better, yeah! I wasn't sure how to accomplish that. However, for some reason, the code won't work on my forum, for any of the themes. Would a link help?

I'm not 100% sure since as mentioned before I'm not familiar with JS, but looking at the code it didn't seem like there was a place defining what fields[ i].color, fields[ i].name, and fields[ i].link contained. I tried combining it with my original code and tweaking it a bit, but to no avail

[Brian]

A link to the forum would definitely help.

If your fields are "Character 1 Name", "Character 1 Color", and "Character 1 Link" the code should automatically read the class that was generated by $[user.mini_custom_field.content_class] in the HTML I provided and define the color, name, and link properties of the fields object for that particular character number.

The for(var i in fields) bit then goes through each character number in the fields object and adds HTML to the end of the mini-profile based on the properties defined there.

The image I posted was from my test forum where I got it working, but I forgot to edit out the part where the code might not work because it definitely worked there.

venomwork5.proboards.com/post/3

[Cicada]

Hmm, strange. I thought that looked like you'd gotten it working, but I can't seem to get it to work even on the basic PB theme on our forum. Here's the link: thehomestuckglitch.proboards.com/

At this point I believe I'm the only one who's put anything in any of the fields, but the div for it in my miniprofile shows up blank just like everyone else's.

[Brian]

I didn't add anything to the code to address the div since you hadn't provided a link to it up until now. It was just trying to add them to the end of the mini-profile. I changed it to point to the proper element within the mini-profile.

I moved the ID of the div over so that it was part of the class since an ID can only be used once per page. Having multiple mini-profiles using the same ID wouldn't work.

I also found the part of the code that was causing it to break. Apparently I didn't add anything to it to ignore custom fields that didn't contain "Character ##" so it was searching for a number, finding nothing and returning null, then trying to run functions on that null value.

It should all be working now.

[Cicada]

Well, almost! I can get them to show up and it works just fine, but I can't get it in the div.

[Brian]

Well, they were in the div up until you copied the code again. I had already fixed it on your forum so that it was targeting the div, but I didn't include the div in the code posted here because it normally doesn't exist in the default template.

I fixed it again.

[Cicada]

Ahh, sorry, I didn't realize that. ^^; It looks great, thank you so much!