XF 2.2 Show another row on rating change

mjda

Well-known member
I have an addon that uses the XF star rating system. I'd like to show another input row, but only in cases where a member selects a rating less than 5 stars. The default rating is 5 stars, so I guess I'd need a way to show the other input row if that value is changed. Is that possible somehow?
 
Just coming back to this one in hopes someone can help me figure this out. I still haven't been able to figure out what needs to be done to get something like this working.
 
Just in case anyone else was searching for how to do this, I was finally able to figure out how to do what I wanted to do.

I should mention that I'm not sure if this is the "right" way to do this, but it works just like I want it to and it doesn't break anything else. Also, this assumes your default rating is 5.

Here is the HTML that I used inside my template.

HTML:
<div class="rating-change" style="display:none">
    <xf:textboxrow name="user_input" value=""
        label="{{ phrase('vendor_input') }}"
        explain="{{ phrase('vendor_input_explain') }}" />
</div>

Then this is the code I put between xf:js tags at the bottom of the same template.

JavaScript:
!function($, window, document, _undefined)
{
    "use strict";
  
    XF.VendorRatingChange = XF.extend(XF.Rating, {
        ratingSelected: function(value, text, event)
        {
            if (value < '5') {
                jQuery('.rating-change').slideDown(1000);
            }
            if (this.options.readonly)
            {
                return;
            }

            if (!this.options.ratingHref)
            {
                return;
            }

            if (this.ratingOverlay)
            {
                this.ratingOverlay.destroy();
            }

            this.$target.barrating('clear');

            XF.ajax('get', this.options.ratingHref, {
                rating: value
            }, XF.proxy(this, 'loadOverlay'));
        }
    });
    XF.Element.register('rating', 'XF.VendorRatingChange');
}
(jQuery, window, document);
 
Top Bottom