We Keep Coding

Is it possible to load external js files/libraries into Acumatica?

I'm working on a new Acumatica screen for our company that will require some javascript code to retrieve and display a map object (from ESRI).
This code requires an external .js file that is included to the HTML by the javascript code itself. Everything works fine if I use a blank HTML page to test this.
The problem I have is that when I try using the same code from inside the Acumatica screen, it doesn't load this required external file, and therefore the code does not work properly.
I attempted to load the full .js file code along with my code, but it returned the following error:
error CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants.
I haven't tried splitting this file into multiple strings (as the error message suggests), because I want to make sure there isn't a cleaner and more professional, direct/right way to do this.
Is it possible to manually import this external .js file into our Acumatica instance, so I can point to it instead? (in case it makes a difference if it's hosted in the same environment)
or, is there any way to make Acumatica able to load external files so we can keep using our current approach? (any setting that may be preventing external files from loading?)

I'm not sure i fully understand the question. What comes to mind however is you may be looking to use the PXJavaScript control. I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed. Let me know if this gets you in the right direction?
Dynamically Change Button Color

Not able to move my inline JavaScript to an external file

I finished developing and testing my HTML intake form and it is working nicely with ajax, json, and validation, and mailing. To finalize the form for production, I attempted to move the JavaScript from the HTML page to an external file and provide a link to the file in the HTML page. The js file is called formjs.js, and the link to it was placed at the bottom of the HTML page as <script src="../js/formjs.js"></script>.
The way I moved the JavaScript is cutting the scripts and pasting to the new js page and same the page and linked to it in the HTML page as mentioned above.
Upon doing so, I received tons of error messages on the js page because many of the functions are looking for information that exists on the HTML and had no idea how to get it. For example, a document. For example, this following script:
var Server_response_value_failure = document.getElementById("server_response_value_failure");
gets the following error:this variable is assigned and value but was never used.
Another example:
end of function};
at the end of each function get the error message that unnecessary semicolon.
I am not sure how to link the formjs.js file back to the HTML. Otherwise, the form works perfectly fine if I leave the script on the HTML page.

its fine, its just eslint that gives these warnings. for example, it will complain if you declare a variable and assign a value but you dont use the variable later on.
or if you call a function that you declare "later down" in the file.

I don't know if this will help, but sometimes you want to put the entire body of your javascript file in round parenthesis like this
(function(...) {
...
})();
in the end, you put another round parenthesis. This basically acts like $.ready() in jQuery.
I don't know if this will help you. You might want to rewrite your code.

Managing page specific Javascript: 1 big file with conditionals or multiple files

In my project I have a load of functions that are used on every page, so I have put these in a single javascript file common.js and have included it in my footer template. My questions is, what is the best way to handle page-specific javscript?
For example, on one of my pages I have a google map. If my map js code is run on a page where I don't have an element with id map_canvas, I get an error.
Method 1: I could write some PHP which echos an additional script tag requesting map.js if and only if I'm on a map page.
Method 2: I could give the <body> of my map page an id of "map_page", then I could write a conditional clause in common.js along the lines of:
if (#map_page exists){
put contents of map.js here
}
The problem with method 1 is that it increases the number of requests to the server.
The problem with method 2 is that it bloats my common javascript file.
Please can somebody explain, which, if any would be the preferred method to do this, or if neither are suitable, what I should do instead?
I have approximately 10 page-specific javascript files to deal with.
Thanks

I would say that simpler is better. On every page, just add a script tag calling map.js. Or, in your common.js, you don't need to paste all of map.js's code. You can just create a new script tag with the js and call map.js like that. I would not recommend the php method. The easiest and simplest, therefore the least likely to be buggy method, is just to add another script tag to the pages that need it. Or if that is not an option, common.js could include this:
if(need map.js){
var mapjs=document.createElement("script");
mapjs.type="text/javascript";
mapjs.src="map.js";
document.body.appendChild(mapjs);
}

Including javascript files

I'm finishing my project right now and see that I've got a lot of javascript code on each page. It's not included as a ".js" file, but rather coded in the page itself. I figured it's a bad idea, so now I'm trying to put them all in one .js file and include it in each page.
The only problem I'm facing now is this: Some functions are only called on certain pages and are depending on the inclusion of jquery plugins. Not all pages needs the plugin however.
Example:
On the home page I need to chain the Country dropbox with the City dropbox, thus I need the jchained.js plugin for jquery. The code I need to use is:
$(function(){
$("#city").chained("#country");
});
When I add this function to the .js file, and I open a page where I don't need to chain the dropboxes I get logically an error:
TypeError: $("#city").chained is not a function
So if I understand this correctly, in order to use a .js file with all my different functions for different plugins, I need to include all the plugins to all the pages?
Thanks for your ideas & help.

Personally, I don't think you should worry about including alot of .js files, that's part of web development. Another option, albeit slightly more tedious, is you can make a check for the function to exist (if the plugin .js has been included) and then call it if it does:
if(typeof yourFunctionName == 'function') {
yourFunctionName();
}

It completely depends on how the code is structured or how complex the current code is.
An immediate solution will be,
Give an id to each page (may be on body tag).
Put all the code in a single external JavaScript file.
Execute the code meant for that particular page only if it has required id on that body element.
Something like :
if ( $('body').attr('id') == "home" ) {
/* Add home page JS here */
}
You can try this.
Correct me if I am wrong.

How to automatically put JS files into a AJAX-called page?

Into my app I have included all needed JS files (my scripts, libraries such as Twitter Bootstrap etc.).
The problem is, that when I have a request which is called via AJAX, so in the called page are not included the JS files, which are included in my app and I have to include them into the called page.
Example: my_scripts.js contains lots of JS functions.
link to page called through AJAX
<a href="/articles/create_new" data-remote="true>Create New Article</a>
/views/articles/_create_new.html.haml
...some content of this file.. #here doesn't work the functions from the file "my_scripts.js"
when I put into the /views/articles/_create_new.html.haml this link
= javascript_include_tag "my_scripts"
...some content of this file..
so then in the /views/articles/_create_new.html.haml those JS functions working.
I would like to ask you, if exist any way, how to automatically put all JS files in my every single AJAX pages, because always include the JS files into an AJAX pages is not good way...
Thanks

use a script loader like RequireJS or $cript.
Have your pages reply 2 things also: the content and the scripts to load. This is best using JSON like:
{
"content" : "content here",
"scripts" : ["an","array","of","script","urls"]
}
then when the data is returned, parse and paint the content and after that, use the script loaders to load the scripts. Actually, you can make your own script loader. It's just a matter of dynamically creating a <script> tag, put it in the <head> and give it an src

I would achieve this in one of three ways:
jQuery
From http://api.jquery.com/load/:
Script Execution When calling .load() using a URL without a suffixed
selector expression, the content is passed to .html() prior to scripts
being removed. This executes the script blocks before they are
discarded. If .load() is called with a selector expression appended to
the URL, however, the scripts are stripped out prior to the DOM being
updated, and thus are not executed. An example of both cases can be
seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
However, in the following case, script
blocks in the document being loaded into #b are stripped out and not
executed:
$('#b').load('article.html #target');
Basically, you can add the JS references to the HTML returned by Ajax request and jQuery will execute them.
RequireJS or simular
Rather than return straight HTML, return the HTML as part of a JSON bundle that also contains an array of script references:
{
html: '<p>stuff</p>',
scriptRefs: [ 'js/one.js', 'js/two.js' ]
}
I would then iterate through the scriptRefs array with something like RequireJS.
Just add the code to base page
In all honesty, I'm more likely to just do this.