Not logged in. · Lost password · Register
Forum: General Help and Support Development RSS
Syntax plugin: pass data from PHP to JavaScript without an inline script
Avatar
FosseWay #1
Member since May 2016 · 118 posts · Location: Canada
Group memberships: Members
Show profile · Link to this post
Subject: Syntax plugin: pass data from PHP to JavaScript without an inline script
I'm working on a syntax plugin. If I have data in PHP, and would like to know how to make it available to JQuery without using an inline script, since use of inline scripts is discouraged as per https://www.dokuwiki.org/devel:javascript#inline_scripts

The data I want to pass from PHP to JavaScript is a list of key-value pairs, e.g.
fruit: 35
apple: 3
banana: 7
cherry: 9

I have considered writing this out as JSON inside a hidden div, which seems ugly. I have read the documentation about JSINFO, but I'm not clear whether that's viable.

Further reading has lead me to https://www.dokuwiki.org/devel:plugin_programming_tips#han… which I believe does offer what I need, although I haven't been able to try it out yet.

Any advice gratefully received!
This post was edited 3 times, last on 2019-05-22, 01:55 by FosseWay.
Avatar
schplurtz (Moderator) #2
Member since Nov 2009 · 439 posts · Location: France, Finistère
Group memberships: Global Moderators, Members
Show profile · Link to this post
Hi,

I am by no mean expert in JS in dokuwiki, so take my advice for what it's worth...

AJAX requests are handled by action plugins. Syntax is handled by syntax plugins. How will these 2 different components communicate ? I mean, how will you pass parsing results from the syntax plugin to the action plugin ? they are not even run by the same script. Syntax plugins are triggered by doku.php, while AJAX are run by lib/exe/ajax.php. So you'll have to store some data somewhere; maybe in the page metadata or some database of yours... AJAX puts more load on the server, and will add delay in page rendering.

You can't use JSINFO in syntax plugins (well, you could, but it would have no effect as it would be too late). JSINFO is available in action plugins. Once again, how will you pass data from your syntax plugin to the action plugin ?

the devel/javascript page states that you "should avoid mixing JavaScript and XHTML.", not that you mustn't mix them.

I'm afraid there is little choice but to inline your JS. Don't despair though, others are doing it too. For example, the very popular indexmenu plugin does that, and has been doing it for years : See the code in _jstree() called by _indexmenu() called by render() in syntax/indexmenu.php.
Avatar
FosseWay #3
Member since May 2016 · 118 posts · Location: Canada
Group memberships: Members
Show profile · Link to this post
Thank you schplurtz for taking the time to set all of this out.

I agree that the documentation is only discouraging inline scripts, rather than forbidding them. Perhaps in the my case, where all I want to do is provide a small-ish amount of data (maybe 50-100 key/pair values) and the inline script isn't otherwise taking any action, it's OK to just use an inline script. I appreciate the example of the indexmenu plugin, since that certainly shows that it's de facto acceptable to use inline scripts sometimes.
Avatar
turnermm (Moderator) #4
Member since Oct 2009 · 4645 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
I am not entirely clear where this data originates.  Is it dynamically developed in the syntax plugin or does it exist outside of the syntax plugin? And is it needed in the syntax plugin, or can it be passed to jQuery independently of the syntax plugin?

Just some observations which might be of use:
1. You can set JSINFO values in an action plugin (DOKU_WIKI_STARTED) that can be accessed in a syntax plugin.  If you take this route, you have to handle it judiciously, because it could get rather messy, since syntax plugins are called multiple times during rendering, and so anything you would be doing with JSINFO could possibly be repeated with each call. So, this should be handled under the appropriate state--Enter, Exit, Matched,

2. As for using Ajax, these are calls from Javascript to php, and so the data you are accessing must already be settled,  not dynamic, i.e. not created at the time of the syntax rendering.  If that's the case, then Ajax is fine, as long as you can run it asynchronously, which is the default--synchronous calls are deprecated.

3.  You can also set JSINFO values in a syntax plugin. It's not something I've used myself, so I did some tests and found that this works only in the handle method, not in render.   But you can create class variables that can be set in the handle method and accessed in render.
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Avatar
turnermm (Moderator) #5
Member since Oct 2009 · 4645 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
only in the handle method, not in render.
The reason for this is that the renderer is called after the javascript has been sent to the browser.
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Avatar
FosseWay #6
Member since May 2016 · 118 posts · Location: Canada
Group memberships: Members
Show profile · Link to this post
Thank you turnermm for weighing in. I should probably show my hand a bit here.

My goal is to fuse the existing DokuWiki cloud plugin with d3-cloud. Although I appreciate the existing cloud plugin, I would like to enhance it so that it [optionally] makes use of more modern techniques to display a more visually arresting word cloud. I'm not intending to replace the default behaviour, since I expect that people may rely on it or like it just fine the way it is.

The key-pair values represent words for the word cloud, and their incidence, which informs their size relative to one another.

Quote by turnermm:
I am not entirely clear where this data originates.  Is it dynamically developed in the syntax plugin or does it exist outside of the syntax plugin? And is it needed in the syntax plugin, or can it be passed to jQuery independently of the syntax plugin?
I'm not able to dig into the code right now, so I'll have to look at this later in more depth when I can spend time with a terminal; the same goes for your #2. I will respond properly as soon as I can. Thank you!
Avatar
schplurtz (Moderator) #7
Member since Nov 2009 · 439 posts · Location: France, Finistère
Group memberships: Global Moderators, Members
Show profile · Link to this post
3.  You can also set JSINFO values in a syntax plugin. It's not something I've used myself, so I did some tests and found that this works only in the handle method,
What about the cache ? Syntax plugins are not called when DW serves pages from cache. But JSINFO is not cached. So this wouldn't work.
Avatar
turnermm (Moderator) #8
Member since Oct 2009 · 4645 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
Probably I got a bit carried away. It is cached on the edit.  So, it would depend on what you are doing as to whether that would be adequate.
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Avatar
FosseWay #9
Member since May 2016 · 118 posts · Location: Canada
Group memberships: Members
Show profile · Link to this post
Quote by turnermm:
I am not entirely clear where this data originates.  Is it dynamically developed in the syntax plugin or does it exist outside of the syntax plugin? And is it needed in the syntax plugin, or can it be passed to jQuery independently of the syntax plugin?
Yes, the data is developed within the render function of the cloud plugin. It is also needed within the syntax plugin because the current behaviour is to write out a list of HTML links. Even with my JavaScript override, I'd like to still write out the HTML as a fallback to display if the user's browser fails to use jQuery to replace the content of the cloud div with the fancy JS cloud.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-06-25, 01:50:36 (UTC +02:00)