STAR RATING IN CHRONOFORM v6 - JQUERY CONFLICT in JOOMLA

M.

M.Abletech 09 Jan, 2019

HI,

I'm using this library https://antenna.io/demo/jquery-bar-rating/examples/ in order to have a star rating system.
But it is not working due to a jquery conflict I believe.

I put the css link in head by an onlaod action.

Can you suggest how to solve the problem or another working library to achieve the same result?

Thanks!

Miriam

Gr

GreyHead 09 Jan, 2019

Hi Miriam,

What is the error you can see? Can you post a link to the form?

Semantic UI has a star rating option that should work with CFv6

Bob

M.

M.Abletech 09 Jan, 2019

Hi GreyHead thanks for your hint!

As a matter of fact I've already thougt about semantic ui. But the problem is that I cannot assign a class to the radio object.
So even if I put the class "ui massive star rating" to the conteiner, I cannot change the class for the radio button element that remain "ui checkbox radio".

Can you advise?

Link : https://www.arxivar.it/it/?option=com_chronoforms6&chronoform=test-star-rating

Thanks!

Gr

GreyHead 09 Jan, 2019

Hi Miriam,

The jQuery Bar Rating add-on seems to be designed to work with a Select Drop-Down, not with Radio Buttons?? And I don't see the barrating code anywhere on your page?

You can add a class to radio buttons using the Extra Attributes box on the Advanced tab of the element e.g. class:ui massive star rating

Bob

M.

M.Abletech 10 Jan, 2019

Thank you so much GreyHead! I'll give a try and update!

M.

M.Abletech 10 Jan, 2019

As you suggested I've tried with Semantic UI rating (css and js inserted in <head> section) and Extra Attributes box. (image1.png)
No stars displayed.

So I inserted - for testing purpose - a custom HTML code (image2.png) and JavaScript (image3.png) to invoke .rating method after the page is loaded.
It works perfectly! Ok, it use <i> instead of <input>, so it isn't a radios group, but it works.

Link: http://www.arxivar.it/it/?option=com_chronoforms6&chronoform=test-star-rating

How can I show stars in CF Radios Group above and make it works? I'm so close... but where I'm wrong?

he

healyhatman 11 Jan, 2019

The Semantic UI star rating isn't an input so it's not sent with the form. You would need to use a custom JS block, with something along the lines of this (no copy pasting from forums, type manually) to add the rating to the form data before it's sent. This code will only work with one rating on the page, if it's in a repeater you'll have to change the .ui.rating identifier.

jQuery('.ui.form').submit(function() {
  if(jQuery('.ui.form').form('is valid')) {
    jQuery(this).append('<input type="hidden" name="star_rating" value=' + jQuery('.ui.rating').rating('get rating') + ' /> ');
  }
});

M.

M.Abletech 11 Jan, 2019

Thanks healyhatman, I'll try your solution soon.
But... No way to use directly CF Radios Group (that are already <input> and are sent with the form)?
My goal is to use Radios Group with Semantic UI stars instead of checkbox... is it so difficult?

he

healyhatman 11 Jan, 2019

Semantic UI stars aren't input elements they're a div and li elements or somesuch. But sure you can only try.

Forums

STAR RATING IN CHRONOFORM v6 - JQUERY CONFLICT in JOOMLA