Jump to content

Archived

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

caspersjan

How to enter shortcode with Javascript

Recommended Posts

caspersjan

Hello, I have been trying to use a timeline plugin that is based on Javascript (it is called Chronos, based on VeriteCo JS Timeline). In the early versions of DMS2 this worked flawlessly (to my pleasant surprise as it did not work in DMS1 and I had to import it as an iframe). I don't know what might have changed that it doesn't work now. I tried MediaBox (and was told it does not work with Javascript), NextBox and SingleBits. None work - "Ooops, there may be an issue loading". Is it really impossible to make a Javascript shortcode work? It seems something so basic! I always presume that it must be me not looking in the right place though I have tried everything I could think of.

The last word was to use Hooks, but how do I go about doing that? I have the Hooker plugin but I'm at a loss how that can help me enter this shortcode. I tried to follow the Docs (http://docs.pagelines.com/advanced/hooks) but I cannot find the PL Customize plugin anywhere in the Store. Is there a way to add such a shortcode? Or hope that in future releases the conflict will disappear again?

Thank you for your help. 

Share this post


Link to post
Share on other sites
Danny

HI,

 

What do you mean by Javascript shortcode ?

 

If you want to include Javascript the best method is to enqueue the script using the WordPress function via a child theme. For more information see the WordPress codex - http://codex.wordpress.org/Function_Reference/wp_enqueue_script


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
caspersjan

Dear Danny, 

it is an ordinary shortcode as far as I am concerned, it works in all the standard WordPress themes but not in DMS2. I called it a Javascript shortcode because I think that the plugin if puts in effect (or tries to do so) is based on Javascript. I replicated it on a site here:

http://animatinghebron.com/wordpress/?page_id=20

I put the shortcode in a Nextbox. If I open the link while logged out, there are not problems either. But inside the Editor I cannot open the page it's on, there is an "Oooops" and the spinning wheel. 

So, considering that on the page it is working even within DMS2 and in all the generic WordPress themes I presume it is a conflict with the Editor. Can you see from the link what exactly it can be? And would there be a way around it? The possibility of only entering the shortcode at the last minute before logging out only occurs to me me now. That would be a way around. But something must be at fault (especially since I am convinced that it worked in a previous iteration of DMS, I distinctly remember how it did not used to work at first and then suddenly did - only to not work again now. But I may be wrong...).

Thank you for your help in this matter, I appreciate your help always. All in the service of weeding out conflicts, unless it is something just I am doing wrong...

Yours faithfully, Jan.

 

 

Share this post


Link to post
Share on other sites
caspersjan

P.P.S.: Pagelines troubleshoot guide advises to check Chrome - View - Developer - JavaScript Console. This is what it says:

Uncaught SyntaxError: Unexpected token ILLEGAL        (?page_id=20:336)
Uncaught TypeError: undefined is not a function          (pl.editor.js?ver=a079eb:39)

Share this post


Link to post
Share on other sites
Simon

Without knowing the actual shortcode text you are adding, I came up with this anyway:

 

https://gist.github.com/Pross/a466bb21785847624eae

 

Add it to wp-content/mu-plugins/chronos.php

 

Dont forget to edit it with the actual shortcodes

Share this post


Link to post
Share on other sites
caspersjan

Dear Simon,

thank you very much. Your code seems to get me tantalisingly close to where I want to be: I replaced [whatever] with [chronos id="805"] and then put the shortcode [safe_chronos] as well as just [safe_chronos  id="805"] (consecutively, for good measure). The "Ooops" and the red wheel are gone! But now it is just the shortcode itself that is showing, as text (to be seen here, under "Training Timeline": http://animatinglibraries.com/wordpress/?page_id=175).

Any ideas what could be amiss? If it is too hard don't worry. I will reconcile myself with sliding in the shortcode just before logging out of WordPress admin, having viewed it on Firefox before. A somewhat clumsy and roundabout way admittedly, but it seems to work, and there is only one instance of this timeline. Still, if a tweak in your code can put things right inside the Editor I'd of course be very happy indeed!

Thank you again for your effort. Yours faithfully, Jan.

Share this post


Link to post
Share on other sites
caspersjan

Dear Simon, you are right: I added the code (to htdocs/animatinglibraries/wordpress/wp-content/plugins/chronos/chronos.php as there was no "mu-plugins" plugins folder) but it did not upload to the server properly. Now it's there and it works like you described: When logged in it says "not doing this while editor is on" (but I can see it properly in a different browser where I am not logged in!), when logged out everything is there. Not perfect but perfectly practicable! Thank you so much. Just out of interest: Was this conflict inevitable? Would it always be like that with a Javascript-triggering shortcode like that? Anyway, my ghosts are chased away for now and I can go on timelining. Once again, I appreciate your support. Yours faithfully, Jan. 

Share this post


Link to post
Share on other sites

  • Similar Content

    • IDdigital
      By IDdigital+
      Hi,
      A site of ours irregularly does not finish loading. The page in question is https://rw360.org/grievance-process/
      In Safari, I'll occasionally get the following error:
      [Error] TypeError: undefined is not an object (evaluating 'a.plModel.init')
          (anonymous function) (site.js:5:91)
          i (jquery.js:2:27455)
          add (jquery.js:2:27750)
          ready (jquery.js:2:29819)
          (anonymous function) (site.js:5)
          Global Code (site.js:5:3421)
      This seems to be a bug in PageLines as far as I can tell. Any suggestions or a fix coming?
      Thanks,
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using a plugin called Speed Booster Pack to speed up the load time of michaelkummer.com. One of the plugin settings, Minimize HTML and JavaScript causes an error that I only get with Pagelines. With other themes, such as WordPress' Twenty Seventeen, I do not get that error.
      I have reproduced the problem on my staging site and if you look at the JavaScript console, you will see the following error:
      SyntaxError: Unexpected end of script
      Any clue what PageLines may be doing differently to be contributing to this issue? I contacted the plugin developer and they, of course, pointed me to the theme developer
      Thanks
      Michael
    • flourishdesignstudio
      By flourishdesignstudio+
      Hello,
      We are working on a site and the customers are complaining that the site loads too slowly. They contacted their host who mentioned that the Java Script is all loading at the beginning. Is it possible to delay the load of the less important Java Script until after the initial load to speed up the site? The goal is to load the page faster by minimizing the initial javascript calls.
      Are there any preferred plugins that you would recommend or does this end up causing excessive problems with plugins, etc.?
      Thanks for the help!
    • John Olsson
      By John Olsson+
      We're often working with ACF (https://www.advancedcustomfields.com/) that's great for user experience in the backend, 'cause we don't want out clients to be in the editor to much.
      So we want to be able to use shortcodes in the editor fields, regardless of section, THIS WOULD BE SO GREAT. Is there a way to fix this, it should open up som much more functionality.
      In ACF, the shortcode is for example: 
      [acf field="field_name"] ...for example, I want to att field_names value to display in a section, i understand I can make it in embed and so, but I want it in titles and options, the whole range.
      I know I can build my own sections, that we've done, but it's not very effective, and thats what PL5 is about.
      Any ideas on this, can Pagelines take this in the core? I guessing there are more than just ACF out there who can use this.

    • 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>  
×