I'm using the Angular Dialog Service to build pop up forms on my website. This services source can be found here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md
Anyway, the actual angular and JavaScript that describes what the modal contains and does goes after the following where the ... is:
.run(['$templateCache',function($templateCache){
$templateCache.put(...)
My problem is the html and js seem to have to all be one after the other with no spacing or indentation allowed between any of it. This causes the code that describes the modal to essentially just be a wall of text that has become borderline unreadable and editable in my complicated modal. An example of this can be found in the JS portion of the code here: http://codepen.io/m-e-conroy/pen/rkIqv
Is there an easy fix which will allow me to have my modals html and JS in non wall of text format and have it build successfully? If there is no fix this seems like a pretty big flaw in using the Angular Dialog Service to handle modals...
Thanks!
There are tools, like html2js, that can build templateCache for you.
It means, that you can store your html code in html files (where it obviously should be), and then gather it into single javascript file with $templateCache.put(/* content of html file */); in it. Just don't forget to include resulting module into your project, so when one of the services requested html file, it could be found in templateCache.
So you shouldn't edit html in .js files. It's wrong on many levels.
Related
I am working with tinyMCE, which, in its latest release doesn't support the editing of <head> and <!doctype>. I still need to use it to create a "full" document, so i need a way of "prepending" those tags to the editor content.
The problem can be split in two parts:
When i edit a file in my page, and use save() from TinyMCE, only the contents in the editor are POSTed to my Node.js + Express backend. The solution i've found is to have, outside of the editor, some buttons to create options for the request, so that the server knows what to write together with the content.
The real problem arises when i want to upload a file from my machine to be modified in the editor, when a file i upload is a "full" HTML file. In that case, the content outside the <body> tag still isn't displayed in the editor, but it's discarded, stopping me from editing it from within the page as i would if i were creating a new doc.
As i mentioned i'm working with node.js and Express for a backend, and, since i'm not familiar with jquery i'd need the solution to be vanilla js.
I have looked into the html-dom-parser' library, but it doesn't seem to fit the bill as i don't see how i can use the dom object it produces to then do the splitting.
I am using an <input type ="file> to choose the file i want to upload, but this problem is stumping me and i'm not sure anymore if it's the right path, so any help is welcome.
My project has admin panel and main page. On admin panel I can create posts using HTML editor (VueEditor in this example) post that in data base looks like this:
<p>Here is some test text from VueEditor</p>
Then, I want to parse it one the main page, but, of course, without <p> tag, so I use this:
<p v-html='item.plot'></p>
And here is a problem, IDE tells:
ESLint: 'v-html' directive can lead to XSS attack.(vue/no-v-html)
Is this really that dangerous? Should I parse it some other way?
Yes it is really that dangerous.
Consider what happens when I create the post.
Hi I'm Dave this is my <script>alert('pwned,' + document.cookie)</script> post!
I can now run arbitrary JS code on your website and steal login info for every user you serve this code too.
I'm not super familiar with vue in particular but most frameworks have an easy way to output sanitized html. I think this is {{ itme.plot }} in vue. This will not render an actual (or any other tag) but an escaped version <script> which the browser will not interpret as actual code.
There are a million other way to do XSS if you let me inject my own HTML in your website.
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
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I've a couple of extension methods I've been developing for a couple of projects, they currently rely heavily on some AJAX to make bits and pieces work. The problem is that they require copying and pasting JavaScript files to the project you want to use it in.
As this JavaScript file only needs to be used once (all instances of the rendered control use the same file) I'd like to do something like add the script element to the headers collection of the page it's used on via a web-resource (embedding the file as a resource in the assembly). In Web-forms this wasn't a problem - you could add a script block to the headers with a specific ID and simply check for it on page load.
What's the MVC equivalent - is there an equivalent?
I'd like a solution that doesn't require the consumer to copy and paste/ add lines to pages or config...any thoughts?
Stephen Walther has some very good articles on MVC, including Html Helpers.
http://weblogs.asp.net/stephenwalther.
A great place to see Html Helpler code is the MVC source code available at
Codeplex.
There is a tutorial at www.asp.net/mvc on Html Helpers
Here ya go, this guy wrote a custom FormlessScriptManager that will let you register scripts even when there is no <form runat="server"> in your page.
http://developmentalmadness.blogspot.com/2008/04/abstracting-systemwebuiscriptmanager.html