This is throwing a jQuery error "Uncaught TypeError: $(...).find(...).off(...).popover is not a function" when there are no popovers enabled and a page is updated via AJAX - currently experiencing it where I'm using the Views Load More button:

    detach: function (context) {
      // Destroy all popovers.
      $(context).find('[data-toggle="popover"]')
        .off('click.drupal.bootstrap.popover')
        .popover('destroy');
    }

The find function returns nothing and trying to call ".off" or ".popover" on the empty array throws the error. I tried turning off popovers from the sub theme level but it still breaks.

Should it be using something like the attach function like this to iterate the array so it doesn't work on empty arrays? (Not tested, just asking for suggestions)

var elements = $(context).find('[data-toggle=popover]').toArray();
for (var i = 0; i < elements.length; i++) {
  var $element = $(elements[i]);
  $element.off('click.drupal.bootstrap.popover')
     .popover('destroy');
}
CommentFileSizeAuthor
#3 recent_update_for_popovers_2883951.patch785 bytesnsciacca
#8 recent_update_for_popovers_2883951-8.patch503 bytesnsciacca
#13 recent_update_for-2883951-8.x-3.x-13.patch1.51 KBmarkhalliwell
#13 recent_update_for-2883951-7.x-3.x-13.patch1.32 KBmarkhalliwell
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nsciacca created an issue. See original summary.

nsciacca’s picture

nsciacca
She/Her/Hers
Primary language English
Location Connecticut
CreditAttribution: nsciacca commented
Issue summary: View changes
nsciacca’s picture

nsciacca
She/Her/Hers
Primary language English
Location Connecticut
CreditAttribution: nsciacca commented
FileSize
recent_update_for_popovers_2883951.patch785 bytes

Attaching proposed patch that checks the settings and uses the same loop as the attach function

nsciacca’s picture

nsciacca
She/Her/Hers
Primary language English
Location Connecticut
CreditAttribution: nsciacca commented
Status: Active » Needs review
markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Needs review » Needs work 
+++ b/js/bootstrap.js
@@ -145,12 +145,16 @@ var Drupal = Drupal || {};
+      var elements = $(context).find('[data-toggle=popover]').toArray();
+      for (var i = 0; i < elements.length; i++) {
+        $(elements[i]).off('click.drupal.bootstrap.popover')
+          .popover('destroy');
+      }

This change is not needed.

nsciacca’s picture

nsciacca
She/Her/Hers
Primary language English
Location Connecticut
CreditAttribution: nsciacca commented

If I leave the checkbox for enable Popovers checked for the theme (which was the original setting before I tried to turn it off to fix the error), but there are no items with "data-toggle=popover" on the page it will throw the error, so I think it's still needed. This is with jQuery 1.10.2.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

there are no items with "data-toggle=popover" on the page it will throw the error

No, it threw the error Uncaught TypeError: $(...).find(...).off(...).popover is not a function, which is just saying that the $.fn.popover method doesn't exist.

jQuery's $.fn.find method will return a valid jQuery object, even if there's no elements. Thus, any subsequent method calls like $.fn.off will simply be ignored.

Placing the if statement at the top and checking the settings should sufficiently cover whether the detach handler should be executed.

nsciacca’s picture

nsciacca
She/Her/Hers
Primary language English
Location Connecticut
CreditAttribution: nsciacca commented
FileSize
recent_update_for_popovers_2883951-8.patch503 bytes

Got it, thanks. I traced it back to my theme not using the full bootstrap js library via "bootstrap_cdn"- we selectively include the bootstrap js files we're using, so the popover is not included and $.fn.popover is undefined. So I should be good with just disabling the option in the theme. New patch attached with what you originally suggested without the for loop.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

Hm, well I suppose adding || !$.fn.popover to the if statement would be prudent as well then.

drupal_simply_amazing’s picture

drupal_simply_amazing CreditAttribution: drupal_simply_amazing commented

Patch #3 is also working for me. In my case the error shows when you have a views blocks with expose filter on it.

DanielVeza’s picture

DanielVeza
he/him
Location Brisbane, AU
CreditAttribution: DanielVeza at Sparks Interactive commented
Status: Needs work » Reviewed & tested by the community

Patch in #3 solved the problem for us too. Setting this to RTBC since it's had 2 reports of success. Happy for it to be changed back if you still think there may need to be more work done as per #9

dadderley’s picture

dadderley CreditAttribution: dadderley as a volunteer commented

@nsciacca - Thank you
I just encountered this with the image module upload functionality.
Trying to upload an image resulted in this error message:

An error occurred while attempting to process /file/ajax/field_imaged/und/form-V3VGfZ50IxlxLBAuLI9lb8bP-ZhV8LPbHMH5f9wokoM: $(context).find('[data-toggle="popover"]')
.off is not a function. (In '$(context).find('[data-toggle="popover"]')
.off('click.drupal.bootstrap.popover')', '$(context).find('[data-toggle="popover"]')
.off' is undefined)

Patch in #3 solved the problem.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Reviewed & tested by the community » Fixed
FileSize
recent_update_for-2883951-7.x-3.x-13.patch1.32 KB
recent_update_for-2883951-8.x-3.x-13.patch1.51 KB

Ok. I went ahead and fixed #9 as well as the code in HEAD (8.x-3.x).

  • markcarver committed 99e5a40 on 8.x-3.x 
    Issue #2883951 by nsciacca, markcarver: Recent update for popovers...

  • markcarver committed 6d0c86a on 7.x-3.x authored by nsciacca 
    Issue #2883951 by nsciacca, markcarver: Recent update for popovers...
sonnguyenhcm’s picture

sonnguyenhcm CreditAttribution: sonnguyenhcm as a volunteer commented

I had the same issue, when a page is loaded via ajax

In Appearance, it says

"Elements that have the data-toggle="popover" attribute set will automatically initialize the popover upon page load"

So I just needed to enable popover.js in theme_name.info. Then It was working.

GuillaumeDuveau’s picture

GuillaumeDuveau
Location Toulouse
CreditAttribution: GuillaumeDuveau commented

Great, thanks for the fix in #13 :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.