Jump to content

Archived

This topic is now archived and is closed to further replies.

ketri

Something in DMS is preventing a jQuery -based section from working

Recommended Posts

ketri    7
ketri

I'm trying to create an instagram widget section.
It's based on https://github.com/pavelk2/social-feed
Demo: http://pavelk2.github.io/social-feed/

Here is my section.php code (it's formatted so you can just create a new section and copy-paste it - all .js etc are loaded from external page for simplification)
 

<?php
/*
Section: social feed
Author: Ketri
Author URI: http://petripottonen.com
Description: Just trying stuff
Class Name: socialFeed
Workswith: templates, main, header, morefoot, content
Cloning: true
Filter: component
Loading: refresh
*/

/*
 * Main section class
 *
 * @package PageLines DMS
 * @author PageLines
 */
class socialFeed extends PageLinesSection {
 function section_styles(){
        // This will load the 'cooljavascript.js' file from the current section folder
       // wp_enqueue_script( 'doT.min.js', $this->base_url.'/doT.min.js', array( 'jquery' ), PL_CORE_VERSION, true );
       // wp_enqueue_script( 'moment', $this->base_url.'/moment.js', array( 'jquery' ), PL_CORE_VERSION, true );
       // wp_enqueue_script( 'socialfeed', $this->base_url.'/jquery.socialfeed.js', array( 'jquery' ), PL_CORE_VERSION, true );
    }

/**
* Section template.
*/

   function section_template() {
    $categoryName = $this->opt( 'pagelines_categoryloop_category', $this->tset );
$numberOfPosts = $this->opt( 'pagelines_herounit_tagline', $this->tset );
$catOrCMP = $this->opt( 'herounit_category_or_cpt', $this->tset );
?>
        <div class="social-feed-container"></div>

    <!-- doT.js for rendering templates and moment.js for showing time ago -->
    <!--<script src="dependencies/doT.min.js"></script>
    <script src="dependencies/moment.min.js"></script>
  
    <script src="js/jquery.socialfeed.js"></script>-->


    <script src="http://petripottonen.com/social-feed2/dependencies/doT.min.js"></script>
    <script src="http://petripottonen.com/social-feed2/dependencies/moment.min.js"></script>
    <script src="http://petripottonen.com/social-feed2/js/jquery.socialfeed.js"></script>
    

    <script>
    jQuery(document).ready(function(){
        jQuery('.social-feed-container').socialfeed({
                    //FACEBOOK--------------------
                    facebook:{
                        accounts:['teslamotors'], //usernames or id
                        limit:2,
                        token:'240696342763428|FgHgjfn7wWMNT15ONHP0tVdWm_k' //you can also create an app and put  here your 'APP ID|APP SECRET' - it is easier but not safe
                    },
                    //VK--------------------
                    vk:{
                        accounts:[125936523], //id for users and -id (with minus) for groups 
                        limit:2,
                        source:'all'
                    },
                    //GOOGLEPLUS-------------------
                    google:{
                         access_token: 'AIzaSyA_lDYGTnTiEjhzjvkxX1KZnouhbVQ0QUU', //AIzaSyA_lDYGTnTiEjhzjvkxX1KZnouhbVQ0QUU
                         accounts: ['111435337725041517235','114461178896543099856','+TeslaMotors'],
                         limit: 2
                     },
                    //INSTAGRAM---------------------
                    instagram:{
                        accounts:[297604134], //userid
                        client_id:'2c6d2173ae9d41de905236e6301e5a43', //2c6d2173ae9d41de905236e6301e5a43
                        limit:2
                    },
                    //GENERAL SETTINGS--------------
                    length:130,
                    show_media:true,
                    callback: function(){
                        console.log('all posts are collected');
                    }
                });
});
</script>
    
<?php 


}


}

 

 

It does not work.

BUT the strange thing is, that if I copy-paste the functional part of the code to a blank -html -file, it works. 
In fact, even if I copy paste the entire code that shows in my DMS, the whole thing and copy-paste it to a blank .html, the section then works! 
What could be the problem?

Thank you. 

Share this post


Link to post
Share on other sites
Simon    247
Simon

1. please dont post huge bits of code in the forum, it doesnt render it at all well, use a gist, pastebin, or even the pastebin here on the forum

2. please give us a url where this section is installed so we can see whatever error it is producing

Share this post


Link to post
Share on other sites

  • Similar Content

    • cas45
      By cas45+
      I am running a site based on PageLines Framework 2.5.0. I am making some changes to a current website and managed to find a script that will do what I want.:
       
      $(".vend-cat").each( function() {
          if ( $(this).find(".no-vendors").html() == '' ) {
                 $(this).hide();
          }
      } );
       
      I have tested it on jsfiddle and it works fine. It does however need to be adapted to work with jQuery for pagelines and wordpress. Any help or advice?
       
      Thanks
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • unifeyed
      By unifeyed+
      Hello there. 
      I am trying to have all the ® symbols throughout my website superscript without having to individually go to each symbol and wrap them in <sup> tags. There is quite a bit of them. I have the following code within the Custom Scripts, but it seems to cause issues with the Hamburger navigation, as it does not seem to work. Can you offer up some assistance? 

      <script>
      jQuery(document).ready(function() {
                 jQuery("body").html(
          jQuery("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
         );
              });
      </script>
    • John Olsson
      By John Olsson+
      Does anyone now what's up with grams. The API works 'cause it shows my own pics, but if I choose a hashtag, no pics shows up?
      Any ideas? Even on popular...
      It says: "No Instagram items available."
    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
×