Thumbs not working on detail view J!4.4.0 Fabrik 4.0 Zeta

[boyjah2]

The thumbs plugin is behaving strangely. In list view we can click the thumb icon and it changes color and adds 1 to the count. But on detail view it displays strangely (there are 2 thumb icons with click count) and cannot be clicked.

This is how it appears when viewing a list and it can be clicked

When clicked:

However in form detail view, it displays like this and neither item can be clicked, although moving the cursor over the black thumb makes the cursor change to such that it believes that there is a link to click (on my computer cursor goes from being an arrow to a hand with a pointing finger when hovered over the black thumb icon). But clicking does nothing.

Detail form view:

 

[achartier]

Are there any javascript errors in the developer console?

 

[boyjah2]

This is what I get when inspect the element in the developer console. Are these javascript related?

[Log] JQMIGRATE: Migrate is installed with logging active, version 3.3.2 (jquery.migrate.js, line 69)
[Warning] JQMIGRATE: jQuery.fn.mousedown() event shorthand is deprecated (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
(anonymous function) (jquery.migrate.js:682)
(anonymous function) (jquery-3.5.1.js:3179)
(anonymous function) (jquery.migrate.js:158)
jQuery (jquery-3.5.1.js:157)
init (jquery.qtip.js:2730)
OVERLAY (jquery.qtip.js:2839)
(anonymous function) (jquery.qtip.js:2841)
(anonymous function) (jquery.qtip.js:30)
(anonymous function) (jquery.qtip.js:32)
Global Code (jquery.qtip.js:3493)
[Warning] JQMIGRATE: jQuery.isArray is deprecated; use Array.isArray (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
(anonymous function) (jquery.migrate.js:125)
(anonymous function) (jquery.ui-all.js:78)
(anonymous function) (jquery.fileupload.js:93)
(anonymous function) (jquery.fileupload.js:27)
Global Code (jquery.fileupload.js:29)
[Warning] JQMIGRATE: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
get (jquery.migrate.js:113)
(anonymous function) (jquery.ui-all.js:83)
(anonymous function) (jquery.fileupload.js:93)
(anonymous function) (jquery.fileupload.js:27)
Global Code (jquery.fileupload.js:29)
[Warning] JQMIGRATE: jQuery.isFunction() is deprecated (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
(anonymous function) (jquery.migrate.js:125)
(anonymous function) (jquery.ui-all.js:123)
each (jquery-3.5.1.js:387)
(anonymous function) (jquery.ui-all.js:122)
(anonymous function) (jquery.fileupload.js:93)
(anonymous function) (jquery.fileupload.js:27)
Global Code (jquery.fileupload.js:29)
[Warning] JQMIGRATE: jQuery.trim is deprecated; use String.prototype.trim (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
(anonymous function) (jquery.migrate.js:125)
(anonymous function) (jquery.cbtabs.js:120)
each (jquery-3.5.1.js:381)
(anonymous function) (jquery.cbtabs.js:69)
each (jquery-3.5.1.js:381)
init (jquery.cbtabs.js:5)
(anonymous function) (jquery.cbtabs.js:594)
(anonymous function) (index.php:157)
mightThrow (jquery-3.5.1.js:3762)
(anonymous function) (jquery-3.5.1.js:3830)
[Error] TypeError: undefined is not an object (evaluating 'document.getElements('input[name=rowid]')[0].value')
(anonymous function) (form.js:897)
forEach
(anonymous function) (mootools-core.js:121)
each (mootools-core.js:193)
(anonymous function) (form.js:893)
(anonymous function) (mootools-core.js:185)
forEach (mootools-more.js:1559)
addElements (form.js:892)
(anonymous function) (mootools-core.js:787)
(anonymous function) (index.php:1311)
execCb (Script Element 1:29:317)
check (Script Element 1:18:430)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
enable (Script Element 1:23:244)
init (Script Element 1:17)
E (Script Element 1:14:197)
completeLoad (Script Element 1:28:127)
onScriptLoad (Script Element 1:29:449)
[Warning] JQMIGRATE: jQuery.type is deprecated (jquery.migrate.js, line 100)
[Log] Trace
migrateWarn (jquery.migrate.js:102)
(anonymous function) (jquery.migrate.js:125)
invalidOpt (jquery.qtip.js:311)
sanitizeOptions (jquery.qtip.js:325)
(anonymous function) (jquery.qtip.js:1841)
(anonymous function) (jquery.cbtooltip.js:93)
each (jquery-3.5.1.js:381)
init (jquery.cbtooltip.js:5)
(anonymous function) (jquery.cbtooltip.js:749)
(anonymous function) (index.php:158:354)
> Selected Element
< <span class="thumb-count">62 </span>

 

[achartier]

The Error toward the bottom is likely the cause. Do you have a site link I can get to to see what is going on?

 

[boyjah2]

It is a development site that requires login to access. Is there some way for me to send you that information by private message?

 

[achartier]

It is a development site that requires login to access. Is there some way for me to send you that information by private message?

Yes, just click on my name over to the left and in the popup there is a start conversation button. Insert the details there.

 

[troester]

Can you replace plugins\fabrik_element\thumbs\layouts\fabrik-element-thumbs-form.php with

<?php

defined('JPATH_BASE') or die;

$d = $displayData;
?>

    <div class="btn-group">
        <button <?php echo $d->commentdata;?> data-fabrik-thumb-formid="<?php echo $d->formId;?>"
            data-fabrik-thumb="up" class="btn btn-small thumb-up<?php echo $d->upActiveClass;?>">
            <?php echo FabrikHelperHTML::image('thumbs-up', 'form', $d->tmpl); ?>
        <span class="thumb-count"><?php echo $d->countUp;?>
        </span>
        </button>
        <?php
        if ($d->showDown) :
            ?>
            <button <?php echo $d->commentdata;?> data-fabrik-thumb-formid="<?php echo $d->formId;?>"
                data-fabrik-thumb="down" class="btn btn-small thumb-down<?php echo $d->downActiveClass;?>">
                <?php echo FabrikHelperHTML::image('thumbs-down', 'form', $d->tmpl); ?>
                <span class="thumb-count"><?php echo $d->countDown;?></span>
            </button>
        <?php
        endif;
        ?>

    </div>


<input type="hidden" name="<?php echo $d->name;?>"
    id="<?php echo $d->id;?>" value="<?php echo $d->countDiff;?>"
    class="<?php echo $d->id;?>" />

 

[boyjah2]

Thank you for your advice. The code you provided made the strange green thumb go away, but the remaining black thumb is still not clickable. Console error info:

[Error] TypeError: undefined is not an object (evaluating 'document.getElements("input[name=rowid]")[0].value')
(anonymous function) (form.js:3:13492)
forEach
(anonymous function) (mootools-core.js:3:2514)
each (mootools-core.js:3:4435)
(anonymous function) (form.js:3:13357)
(anonymous function) (mootools-core.js:3:4244)
forEach (mootools-more.js:3:24370)
addElements (form.js:3:13336)
(anonymous function) (mootools-core.js:3:17373)
(anonymous function) (index.php:1236)
execCb (Script Element 1:29:317)
check (Script Element 1:18:430)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
(anonymous function) (Script Element 1:23)
(anonymous function) (Script Element 1:8:108)
(anonymous function) (Script Element 1:23:371)
v (Script Element 1:7:175)
emit (Script Element 1:23:342)
check (Script Element 1:19:408)
enable (Script Element 1:23:244)
init (Script Element 1:17)
E (Script Element 1:14:197)
completeLoad (Script Element 1:28:127)
onScriptLoad (Script Element 1:29:449)

Selected Element
<button data-fabrik-thumb-rowid="8" data-fabrik-thumb-formid="6" data-fabrik-thumb="up" class="btn btn-small thumb-up">
<span data-isicon="true" class="fa icon-thumbs-up">…</span>
<span class="thumb-count">80 </span>
</button>

 

[troester]

It's working on my site.
Did you clear J! and browser cache?
Is the thumbs element editable for the user?

I don't think the JS error is related to the thumbs element. I can see it if there's a repeat group but it doesn't stop the thumbs element.

 

[boyjah2]

I clear J! and browser cache basically every time before I load a page on the dev site. And I'm not sure what it means regarding thumbs element editable for user. Is that a setting somewhere?

 

[troester]

Editable: Element Access settings "Form(edit)"
Which stopps the thumb in form and details view (creating an alert message on click) but seems to be ignored in list view.

 

[boyjah2]

Form (add), Form (edit), Details view and List view are all set with the user group that can use the Thumbs element. It all works fine on our live site running Joomla 3.10/Fabrik 3.10

For the Thumbs element we also have Details/Thumbs Options/Rate in form set to Yes

I also notice that, even though we have Publishing/Tips/Show tips in detail view and Show tips in list view both set to Yes, it only works for list view. On the Detail view (where we cannot click the thumb) no tips show when hovering the cursor over the thumb icon

 

[troester]

On the Detail view (where we cannot click the thumb) no tips show when hovering the cursor over the thumb icon

These issues may be related - but all is working fine on my site...

Do you have the standard Fabrik details template or any customizsation?
Which J! template?
Can you try without tip?

 

[boyjah2]

We still can't get thumbs to work in detail view.

Clicking the icon for a list item opens the detail view in a default Fabrik page. Example:

index.php?option=com_fabrik&view=details&formid=6&rowid=33&Itemid=643&lang=en

We are using the default J4 template Cassiopeia with no modifications.

Removing the tip text and setting Show tips in detail view and Show tips in list view are both set to No

 

[troester]

Do you have a link?

 

[boyjah2]

It is a dev site that requires login. I will send details to your message box

 

[boyjah2]

I figured out what the problem is. Our website is multi language (English and Japanese). When we added the Thumbs element to the form, Fabrik automatically created one for each language. One is the Parent and one is the Child element. As an experiment I tried moving the element to a different group in the form (different groups on the form for each language). In order to do that I needed to unlink the parent-child elements, in order to move it to the appropriate group for the language. After unlinking them, I am now able to click the thumb in detail view as well. However, now that they are unlinked, an item that I clicked the thumb on in the English list does not show as clicked in the Japanese list. The list is generated from the same database table for both languages. If I relink the parent and child, it properly shows items with clicked thumbs in both language versions of the list, AND the thumb is now clickable on the English version of detail view (English is the parent element) BUT no longer clickable in detail view on the Japanese detail view. So it seems that the parent-child relationship is causing the unclickable thumb problem in detail view.

As I said previously, this does not happen with our live site running Joomla! 3.10.12 and Fabrik 3.10

 

[boyjah2]

More info: Thinking that maybe the parent-child id relationship was the issue, as a test I switched parent_id in the elements table. I made Japanese the parent element and English the child element. But the thumb is still clickable in English detail view but NOT clickable in Japanese detail view. So now it seems like maybe it is something to do with Japanese language messing up the Thumbs plugin?

 

[achartier]

Can you inspect the HTML for the Japanese Thumb and post it here. There may be something in the language encoding that is breaking the html for the button.

 

[boyjah2]

This is the HTML inspection for the Japanese Thumb: