#registerEndOfPageHtml() directive

Hello, we tried to use the #registerEndOfPageHtml() directive but it doesn't work to register the scripts on the end of the page - and it gets echoed instead at the bottom.
What am I doing wrong?

I'm going through the docs here: https://community.telligent.com/community/11/w/developer-training/65122/using-ajax#When_should_I_use_JavaScript_in_widgets

Parents
  • Can you provide a sample of the code that is not working for you?

    Most of the widgets that are included in Community use this directive, have you reviewed any existing widgets to see how they are implemented and attempted to mimic one of those widgets?

  • Hi, we are using an Unfiltered HTML widget.

    Our code inside it is like so:

    #registerEndOfPageHtml()
        <script src="">unpkg.com/.../script>
    #end


    #registerEndOfPageHtml()
    <script type="text/javascript">
    //ajax preloader
    var $loading = $('.content-tagged,a.catego').hide();
    $(document)
      .ajaxStart(function () {
        $loading.hide();
        $(".spinner").show();
      })
      .ajaxStop(function () {
        $loading.fadeIn();
        //trigger click onload
            $(".button-reset").trigger("click");
        $(".spinner").hide();
      });
    </script>
    #end


    #registerEndOfPageHtml()
      <script type="text/javascript">
        jQuery('#toggle').css('cursor','pointer').click(function(){
            jQuery('#content').slideToggle('500');
            jQuery('#toggle').find('i').toggleClass('fa-toggle-off fa-toggle-on')
        });
      </script>
    #end

    However we find this once we save and publish (see at the end):

    Why is this? Do you have any idea?

    Thanks,

Reply
  • Hi, we are using an Unfiltered HTML widget.

    Our code inside it is like so:

    #registerEndOfPageHtml()
        <script src="">unpkg.com/.../script>
    #end


    #registerEndOfPageHtml()
    <script type="text/javascript">
    //ajax preloader
    var $loading = $('.content-tagged,a.catego').hide();
    $(document)
      .ajaxStart(function () {
        $loading.hide();
        $(".spinner").show();
      })
      .ajaxStop(function () {
        $loading.fadeIn();
        //trigger click onload
            $(".button-reset").trigger("click");
        $(".spinner").hide();
      });
    </script>
    #end


    #registerEndOfPageHtml()
      <script type="text/javascript">
        jQuery('#toggle').css('cursor','pointer').click(function(){
            jQuery('#content').slideToggle('500');
            jQuery('#toggle').find('i').toggleClass('fa-toggle-off fa-toggle-on')
        });
      </script>
    #end

    However we find this once we save and publish (see at the end):

    Why is this? Do you have any idea?

    Thanks,

Children