Last Minute Development

Skisma

Ok so I've done all of these steps and have located it from within firefox debugger. It's currently not executing since I don't have anything listed when I click the discussion prefix dropdown. One thing I notice about the script is the line I highlight in the image below.

On this line it's saying to execute the following code if the target value is between 1 & 3. However, the 3 categoryID's I have listed are 9, 11 and 15.

At the time of inputting this information into this portion of the script I was under the impression that since I only had 3 categories that will be utilizing prefixes, that I need to put 1 & 3. At the time, I was not declaring the categories by categoryID like I am now, so this method seemed logical. Now however, I see that this is likely the issue.

Am I making sense here?

R_J

From the way you ask the question I'd say you already know the answer

CategoryID is the identification number of a category in the database. So if you want to do something as soon as a special category is chosen, you need to know the name or ID (ID couldn't be changed so this is to be preferred).
For writing code in Vanilla, the sort order of the categories is at nearly no place of interest to you.

Skisma

Ok so I've went in an updated the 1 & 3 to 9 & 15, but still am getting no results. Does anyone have any idea what else I need to modify?

R_J

I must admit that I completely lost track. Can you show your code here?

Skisma

Sure!

$(document).ready(function () {

    var prefixes = new Array();

    prefixes[9] = ['MCC: H2A', 'MCC: H3', 'MCC: H4', 'Halo 4', 'Reach', 'Halo 3'];
    prefixes[11] = ['Unreal Engine', 'Unity', 'UT', 'Minecraft', 'Far Cry', 'Project Spark'];
    prefixes[15] = ['Destiny', 'Call of Duty', 'Smite', 'Evolve'];

    $('#Form_CategoryID').on('change', function (e) {

        var prefixSelect = $('#Form_Prefix');

        prefixSelect.innerHTML = '<option value="-">-</option>';

        if (e.target.value >= 9 && e.target.value <= 15) {

            $.each(prefixes[e.target.value], function (option) {
            prefixSelect.options[prefixSelect.options.length] = new Option(option, option);

            });
        }
    });
});

R_J

Oh how I hate JavaScript... It took me some time but here are the things that have to be changed.

$() != getEmentById()

While getEmentById() would have returned one element, the jquery $() selector (var prefixSelect = $('#Form_Prefix');) returns a collection of a elements and you only need the first one. So you have to make it var prefixSelect = $('#Form_Prefix')[0];

Error for undefined CategoryIDs

If you changed the above, you'll see errors in the console for CategoryID 10, 12, 13, 14 because prefixes[] is not defined for them. if (e.target.value >= 9 && e.target.value <= 15) { is taken and modified from my first proposal where I thought you would have a list for all categories.Better use this to only execute the code for defined category IDs: if (e.target.value in prefixes) {

Set select options to values, not keys

Everything is great until now, but you only see numbers in the drop down...
prefixSelect.options[prefixSelect.options.length] = new Option(option, option); stacks elements to the prefix dropdown but instead of adding the values of the corresponding array, it just adds a number for each of them. So you have to get the value for that number: prefixSelect.options[prefixSelect.options.length] = new Option(prefixes[e.target.value][option], prefixes[e.target.value][option]);

That should be all you need... Here it is all added up:

$(document).ready(function () {
    var prefixes = new Array();
    prefixes[9] = ['MCC: H2A', 'MCC: H3', 'MCC: H4', 'Halo 4', 'Reach', 'Halo 3'];
    prefixes[11] = ['Unreal Engine', 'Unity', 'UT', 'Minecraft', 'Far Cry', 'Project Spark'];
    prefixes[15] = ['Destiny', 'Call of Duty', 'Smite', 'Evolve'];
    $('#Form_CategoryID').on('change', function (e) {
        var prefixSelect = $('#Form_Prefix')[0];
        prefixSelect.innerHTML = '<option value="-">-</option>';
        if (e.target.value in prefixes) {
            $.each(prefixes[e.target.value], function (option) {
                prefixSelect.options[prefixSelect.options.length] = new Option(prefixes[e.target.value][option], prefixes[e.target.value][option]);
            });
        }
    });
});

Skisma

@R_J wow man I really appreciate you going out of way to help me out here! I input the new code into my file and saved, the uploaded. Unfortunately I'm not getting anything different. When I attempt to start a new discussion in one of the three categories, the discussion prefix dropdown is still blank.

If anyone else wants to chime in here to help out, that would be totally cool!

R_J

Are you sure, the JavaScript is loaded? You have to add a line to the original plugin:

    public function postController_beforeBodyInput_handler ($Sender) {
        // only show dropdown if permission is set
        if (!CheckPermission('Vanilla.PrefixDiscussion.Add')) {
            return;
        }
        // maybe someone wants to style that
        $Sender->AddCssFile('prefixdiscussion.css', 'plugins/PrefixDiscussion');

// the following line is not enclosed in the plugin and you have to add it.
// Make sure you choose the right name. The file is expected to be in the following directory:
// plugins/PrefixDiscussion/js
$Sender->AddJsFile('prefixdiscussion.js', 'plugins/PrefixDiscussion');

R_J

If you provide me with an Url and a test account, I can take a look at it. I've tested the javascript above and it worked for me.

Skisma

Awesome, I PM'd you your login info.

R_J

Problem solved - role permissions weren't set.

Skisma

As it turns out, the role permissions was not the problem.

I am still unable to see a populated list of options to choose from when clicking the Discussion Prefix dropdown in one of these three categories. For example, when starting a new discussion in my General Game Discussion category I should see Destiny, Call of Duty, Smite and Evolve in the dropdown...but I have 0 results.

Would anyone be kind enough to help me out here who has knowledge of js?

Here is the most recent script:

$(document).ready(function () {
    var prefixes = new Array();
    prefixes[9] = ['MCC: H2A', 'MCC: H3', 'MCC: H4', 'Halo 4', 'Reach', 'Halo 3'];
    prefixes[11] = ['Unreal Engine', 'Unity', 'UT', 'Minecraft', 'Far Cry', 'Project Spark'];
    prefixes[15] = ['Destiny', 'Call of Duty', 'Smite', 'Evolve'];

// //////////
// the following part is new
    var categoryID = $('#Form_CategoryID')[0];
    var prefixSelect = $('#Form_Prefix')[0];
    prefixSelect.options.length = 1;
    if (categoryID in prefixes) {
        $.each(prefixes[categoryID], function (option) {
            prefixSelect.options[prefixSelect.options.length] = new Option(prefixes[categoryID][option], prefixes[categoryID][option]);
        });
    }
// /////////

    $('#Form_CategoryID').on('change', function (e) {
        var prefixSelect = $('#Form_Prefix')[0];
        prefixSelect.options.length = 1;
        if (e.target.value in prefixes) {
            $.each(prefixes[e.target.value], function (option) {
                prefixSelect.options[prefixSelect.options.length] = new Option(prefixes[e.target.value][option], prefixes[e.target.value][option]);
            });
        }
    });
});

R_J

To my excuse: yes, I've written that messy code but my intention was that it should help a beginner understand what I do. And I have advised him to clean it up and encapsulate the on change action into a function. And the permission have been a problem.

I have told you to check that line: var categoryID = $('#Form_CategoryID')[0];

You do not know how to check that? Add a alert(categoryID); below the line. You'll see that it does not return a value! Search the internet for "jquery get value of select element" and you'll find that you have to use it like that var categoryID = $('#Form_CategoryID')[0].vlaue;. Don't know if that is already enough...

You really should get to the point that you can read and debug code. Get the knowledge what a javascript console is in your browser and play around with it. Coding and customizing small scripts like that is quite easy once you know a way to check each step.

R_J

I've cleaned it up:

/**
 *  @param obj   target       HTML SELECT element to fill
 *  @param int   contentID    Index of the contentArray
 *  @param mixed contentArray Array of strings that should be filled in the SELECT
 */
function fillSelect(target, contentID, contentArray) {
    // reset the content of the SELECT
    target.innerHTML = '<option value="-">-</option>';
    // only if contentID is in the contentArray
    if (contentID in contentArray) {
        // loop through a contentArrays element
        $.each(contentArray[contentID], function (option) {
            // create a new OPTIOn for each entry
            target.options[target.options.length] = new Option(
                contentArray[contentID][option],
                contentArray[contentID][option]
            );
        });
    }
}

$(document).ready(function () {
    // define values to fill into our SELECT element
    var prefixes = new Array();
    prefixes[9] = ['MCC: H2A', 'MCC: H3', 'MCC: H4', 'Halo 4', 'Reach', 'Halo 3'];
    prefixes[11] = ['Unreal Engine', 'Unity', 'UT', 'Minecraft', 'Far Cry', 'Project Spark'];
    prefixes[15] = ['Destiny', 'Call of Duty', 'Smite', 'Evolve'];

    // get references to the CategoryDropDown and the prefixes dropdown
    var categorySelect = $('#Form_CategoryID')[0];
    var prefixSelect = $('#Form_Prefix')[0];

    // get currently selected category
    var categoryID = categorySelect.value;

    // do an initial fill
    fillSelect(prefixSelect, categoryID, prefixes);

    $('#Form_CategoryID').on('change', function (e) {
        var categoryID = e.target.value;
        fillSelect(prefixSelect, categoryID, prefixes);
    });
});

It should work: http://jsfiddle.net/jzuhuxef/

hgtonight

@R_J said:

It should work: http://jsfiddle.net/jzuhuxef/

You should get a double awesome for posting a fiddle.

R_J

It simply was the easiest way to try if it works...

Skisma

@R_J You're a boss! This works perfectly! Thanks so much for all of your dedication on this. I really plan on learning more about code, just have been really busy lately.

Skisma

@R_J said:
You could also skip those brackets completely and do something like this instead:

.SpQuestion {
  background-color: blue;
  color: white;
  padding: 1px;
  margin: 1px;
  border-radius: 2px;
}

Hey I'd like to implement this and tried doing some research before asking here. I've looked at this article: http://www.w3schools.com/css/css_boxmodel.asp

This part in the article is extremely simple. What I'm having trouble with is the variable or whatever it is before the curly brackets. At the time the above quote was written we were using "Question" and "Solved" as prefix examples, so I assumed I just needed to replace Question with a prefix name I actually use, so: .SPDestiny.

What I've done is create a css file called PrefixStyling and added it to forums/plugins/PrefixDiscussion. This did nothing so obviously my assumption must have been wrong.

hgtonight

The thing before the brackets is called a selector. The simple ones are easy to grok: http://www.w3schools.com/css/css_selectors.asp

Skisma

Thanks for the insight! Ok so it looks like RJ used a class selector in his example, .Sp

I'm still looking at this the same though since he followed that with Question making it .SpQuestion. Is .SpDestiny not what I should be using to display a textbox around any Destiny prefixes?