Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Custom js

  1. #1
    Join Date
    Mar 2009
    Location
    Sweden
    Posts
    742

    Default Custom js

    Hi
    I am just trying out the DF4WP plugin and I like it! :-)

    However, I have a question. I am using custom js in my webapp and when trying to load the webapp from within the wordpress site i get the following error
    Click image for larger version. 

Name:	ErrorWP.PNG 
Views:	292 
Size:	5.2 KB 
ID:	11255
    Of course, I have the js included in the html-file, but it seems the wordpress site wants it somewhere else?
    How can I fix this?

    thanks in advance!
    /Leif Angestam
    Sweden

  2. #2
    Join Date
    Mar 2009
    Location
    Sweden
    Posts
    742

    Default Re: Custom js

    OK solved with the help of Johan Broddfelt! Thanks!
    had to add references on the wordpress side to these .js-files
    /Leif Angestam
    Sweden

  3. #3
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    2,812

    Default Re: Custom js

    Leif

    Glad Johan was able to help you out.

    For everybody else, what the plugin does is replicate the stuff your app's Index.html usually does, with some extras, but into the generated WordPress page. It does this via a PHP file called df4wp-page.php which can be found two ways:


    1. In your <WordPress-install-root>\wp-content\plugins\dataflex4wordpress\df4wp-page.php
    2. From within WordPress, login as an administrator and on the left-menu, go to Plugins --> Editor. Select the "Edit" link under the DataFlex4WordPress plugin and then on the right-pane, the df4wp-page.php file


    In it you will find: function df4wp_webapp_page. This, among other things, builds up a string array called $df which will eventually be written out to the WordPress page. Around line 103 you should find:

    Code:
        array_push($df, "\n    <!-- DataFlex Custom Controls (do not remove this line, used for automatic insertion) -->");
        
        // Use the sizeFix.js script:
        array_push($df, "\n    <script src='", DF4WP_PLUGIN_URL, "/js/sizeFix.js'></script>\n");

    Here you can add any special JavaScript your app needs, using (obviously) the same approach of building it into the $df string:

    Code:
            array_push($df, "\n    <script src='" $apppath, "/RelativePathToYourJavaScriptFile'></script>\n");
    The $apppath variable will hold the URL of your application (whatever would usually precede "/Index.html" when calling it), so that, with what follows it (where I've written "/RelativePathToYourJavaScriptFile") appended, should find your file. If it doesn't, your file will not get loaded. Getting this right may involve a bit of trial and error.

    Do that for as many JavaScript files as your app requires.

    Take care with this (backup copies would be good!), because any typos may stop your WordPress site from working at all (PHP is a good servant, but a horrible master!). Especially take care with the usage of the two different types of quotes.

    As I am writing this, I'm thinking that maybe we should include this as a new pipe-separated string setting in the shortcode, to shield developers from the horrors of editing PHP. Something like:
    Code:
    customJS="js/MyScript1.js|custom/js/MyScript2.js|js/MyScript3.js"
    We do need a new version of the plugin to work properly with DF 19 anyway and so this might be a good time to add such a feature. Opinions solicited.

    Mike

  4. #4
    Join Date
    Mar 2009
    Location
    Adelaide, South Australia
    Posts
    477

    Default Re: Custom js

    Mike,
    That would be good I was about to look at making that mod myself. Sometimes you need css specific to your custom js so it would be useful to allow this, too.

    Ian
    The most important leg on a three legged stool is the one that's missing.
    Murphy's Law (2)

  5. #5
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    2,812

    Default Re: Custom js

    Yup, I agree. So two new pipe-separated settings: customJS and customCSS.

    Mike

  6. #6

    Default Re: Custom js

    Hi,

    Don't know how hard it is, but nowadays most themes have a page for adding custom CSS to apply to your theme.
    It makes it very very easy to tweak and no breakage when updating the theme which is quite important as you want to run those automatic if you can.

    An example, it is usually here:
    Click image for larger version. 

Name:	DF4WP_EditCSS.png 
Views:	175 
Size:	232.9 KB 
ID:	11267

    and you can add things like:
    Click image for larger version. 

Name:	DF4WP_AddCSS.png 
Views:	175 
Size:	25.1 KB 
ID:	11268

    It even checks your CSS and if you make a mistake like forgetting a curly bracket it will tell you.
    As it is in pretty much every standard theme nowadays I suspect it is standard WordPress.

    For adding javascript something like this would be superior, you can check if the file exists etc.. but that might be too much work I don't know.
    Just pointing out that the above works very well and that I use it all the time for my customers.

    edit: this was meant as a reply to Mike, but the forum software is a little silly and attaches it elsewhere yet again.
    --
    Wil
    Last edited by wila; 19-Aug-2017 at 04:05 PM.

  7. #7
    Join Date
    Mar 2009
    Location
    Adelaide, South Australia
    Posts
    477

    Default Re: Custom js

    Wila,
    The point here is that the Cusom.js applies to the DF application that is run from the Wordpess plugin, not to Wordpress itself. Therefore the javascript must be in the DF workspace and be accessible from the AppHtml directory. The modifications which Mike is suggesting will end up being written into the Index.html "file" which the plugin generates to run the DF application/view.

    Ian
    The most important leg on a three legged stool is the one that's missing.
    Murphy's Law (2)

  8. #8

    Default Re: Custom js

    Ianv,

    That doesn't really invalidate anything I said. The plugin is part of the Wordpress site.
    While you can't test for the .js file locally you can still use curl or whatever to test if the remote .js file exists. It has to be accessible right? otherwise it's not gonna run in your browser.

    My main point was that I don't like having to edit files in a wordpress configuration.
    From a management point of view that is simply not ideal, users mess up, break things and by feeding it through a configuration option you can prevent breakage and thus head aches.

    Anyways, I was just providing another point of view.
    I don't use DF in WordPress and because of the current licensing costs around DF for webapp I doubt that that will change even while it seems somewhat interesting.
    But that's a completely different discussion and I do not want to take this too far off topic.
    --
    Wil

  9. #9
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    2,812

    Default Re: Custom js

    Wil

    I'm not seeing that option on my WordPress site (localhost). I even updated to 4.8.1 and added the Twenty Seventeen theme, but I don't see that "Edit CSS" link on the menu:
    Click image for larger version. 

Name:	Screen Shot 2017-08-20 at 18.27.46.jpg 
Views:	146 
Size:	108.3 KB 
ID:	11269

    Maybe there is something I need to enable.

    Mike
    Last edited by Mike Peat; 20-Aug-2017 at 12:38 PM.

  10. #10
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    2,812

    Default Re: Custom js

    OK, found it... it is under "Appearance" --> "Customize" --> "Additional CSS":
    Click image for larger version. 

Name:	Screen Shot 2017-08-20 at 18.35.04.jpg 
Views:	193 
Size:	72.6 KB 
ID:	11270

    Mike

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •