Using a popover inside EM shortcode breaks the site

  • Resolved stephanmoenninghoff

    (@stephanmoenninghoff)


    7 years, 2 months ago

    Hi all,

    in order to show two calendar links for each event (Webcal and Google), I wanted to create a popover that has both links. Unfortunately, whenever I try to use code like

    <button
  data-toggle="popover"
  data-content="Link: <a href='#_EVENTWEBCALURL'>Webcal</a>"
  data-html="true">
  CLICK
</button>

    it breaks my page. Used outside of EM shortcode, it works fine. Trouble is, I need to pass the event’s #_EVENTWEBCALURL and #_EVENTGCALURL to the href in the popover and I see no other way.

    Has anyone tried this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter stephanmoenninghoff

    (@stephanmoenninghoff)

    7 years, 2 months ago

    Ok, I have narrowed it down to the html and here’s what happens:

    Using the popover without html works fine. The popover is created and all is peachy

    [events_list_grouped mode="monthly" limit="8" pagination="1"]
<a href="#" class="calendar-popover" data-toggle="popover" title="" data-content="Button1 Button2">
[/events_list_grouped]

    However: as soon as I introduce any html in data-content, things go south. Even using Button1 <br> Button2 will break the page.

    I am using the Bootstrap library for the popover and I have tweaked the script so it *should* accept html. Maybe someone with better knowledge of EM and Java can help me out here?

    <script>
$=jQuery;
$(document).ready(function(){
  $('[data-toggle="popover"]').popover({html:true}); 
});
</script>

    As always: thanks for any hints or just beat me up for doing stupid things I shouldn’t be doing 🙂

    Thread Starter stephanmoenninghoff

    (@stephanmoenninghoff)

    7 years, 2 months ago

    Again, for completeness, this is the script I am using in the header:

    <script type='text/javascript' src='/wp-content/themes/Divi-child/js/tooltip.js?ver=3.4.1'></script>

<script type='text/javascript' src='/wp-content/themes/Divi-child/js/popover.js?ver=3.4.1'></script>

<script>
$=jQuery;
$(document).ready(function(){
  $('[data-toggle="popover"]').popover({html:true}); 
});
</script>
    Thread Starter stephanmoenninghoff

    (@stephanmoenninghoff)

    7 years, 2 months ago

    I have made some major strides and I don’t want to withhold what I have fond in case someone has the same question. There is a solution to the problem and it is detailed in this JS Fiddle.

    So, I have managed to get there without breaking the page but one little detail is still missing: Although the events get passed to the popover, the first event appears in *all* the popovers. Again, if someone knows why, please let me know. Thanks!
    Site: http://bemoused.com/show-calendar-2/ (Use Password “Micerule”)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Using a popover inside EM shortcode breaks the site’ is closed to new replies.