Develop Reference

How can I edit html inside an iframe using javascript

I am working on automating a process within my business, part of which is sending an email through SalesForce. We don't have access to the SF API and the email has to be sent through salesforce in order to keep the communication searchable for the coworkers.
I need to use a template which can be selected in SalesForce, however this function does not work in IE (which our RPA solution uses) so I need to build this email from scratch.
I see two options for this:
Use the HTML to recreate the format with the right variables. This entails inserting/injecting/manipulating HTML.
Copy the format into memory/the clipboard, edit it programatically and paste it into the SF interface
This question will be about option 1. I will post an additional question with regards to the second option separately and edit this question to include that link. EDIT: Here is the link to the other question!
Now on to the question:
We use the Blue Prism RPA software suite. It has a possibility to insert javascript fragments into a website and subsequently invoke them. I was hoping that I could create a javascript fragment that recreates the template, insert it and then invoke it. I have been working on this for the past week and have hardly gotten any further.
I now am able to add basic text into the required field, but have found that to be able to use the template structure I need to use a different, HTML based, field. This field I find lives inside an iframe.
I have had zero experience with javascript prior to this week (luckily it seems similar to c# in which I do have experience) and now this iframe has me stumped. Apparently when you use Selenium or similar you can switch the driver to the new iframe but I don't have that option, it needs to be done through surface automation. Within javascript as well as the console I can not get it to target the separate document within the iframe. Apparently the iframe contents are not incorporated in that way in the bigger webpage.
So my question is this: How can I "switch focus" to the iframe using javascript? How can I then edit the iframe contents through javascript? Any help, tips etc. would be highly appreciated!

If you go to developer tools in the browser (F12 or right-click inspect) you can use the inpsect tool to get the path you are looking for. an iframe is just another window inside the window and once you have the 'base path' you can then extend further into the window from the iframe base path.
You can access frames one of two ways I know of;
document.getElementById('the frame you are looking for goes here').contentWindow.targetFunction();
and/or
window.frames[0].otherfunctions
where 0 is the Nth order of frame on the window in case there are others.
once you find that path you can interact with sub-elements on that iframe by getting the path to it from within the iframe.
some things to watch out for. frames not loading yet so make sure the frame you want is loaded and no other frame is moving it around the screen at run time. Also make sure the child frame is in the same domain, I think calling javascript has issues when going cross-domain i.e. it doesn't work (stand to be corrected there though maybe it depends on group settings)
Supply some code or the layout of the page and could give you a code example but top of my head the format will look like this
var doc = window.frames[0]
var thing = getElementById(doc.getElementByPath('maybePath')
'perform some set operations like set innerhtml to thing you desire

How to add mermaid diagrams to a rocket.chat instance?

There is something compelling in the integration of mermaid syntax in markdown text, since it is quite "markdownish". I got the idea that I would like to type my own mermaid diagram in a rocket.chat window and see it interpreted on the fly.
I have already had the opportunity to work on mermaid integrations, and I hope this one should not be too difficult.
mermaid is basically a javascript library that works on HTML snippets like:
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</div>
So it basically requires only to generate that piece of code + include the mermaid javascript library in the pane being visualized, to get a properly displayed diagram, which would look like:
The question I am asking here, is where one could start from, to configure a rocket.chat instance (and/or exploit its API) so that one could convince it to interpret a user-type sequence in a message e.g. :
```mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
as a proper diagram?

There isn’t any way to do this well, as rocket.chat is not customizable (at least as far as I can tell, I don’t use it). However, I think that if you injected external js code (along with mermaid-js) into rocket.chat, you could make rocket.chat send the graph as an image. Of course, if you do not want to paste the script in the console every time you need it, you would need to use something like Tampermonkey or a chrome extension.
That being said, you would also need to dynamically add mermaid as a script, so something like:
var url = ‘https://unpkg.com/browse/mermaid#8.8.0/‘;
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
Would suffice. Then, you would need to add a click event to the “send” button and read the value of the message bar. Use a bit of logic to determine whether the bar contains a ``` (and maybe add that you need to put mermaid after it like ```mermaid). If the chat bar contains mermaid code, then add a hidden mermaid graph and wrap the graph in a tag, then trigger an event (like a button click) that downloads the graph. I am not sure that you know any Node.JS, but if you wanted to have the image automatically send, you could make a POST request containing the image to a Node.js server that you host locally (or by Heroku). The server would process that image and in turn, return the url at which it is hosted. Then, you would use the URL you got and replace the value of the message bar with a markdown that displays the image. I would recommend making a second button appear over the first chat button, and if you want to send a mermaid graph, you can click that button.
In conclusion, what you are seeking to do is quite do-able, but it will take time (and a lot of patience). I would recommend researching Rocket.Chat and practice injecting scripts that automatically send messages and things like that. Since I am on my iPad (my computer’s screen is broken) I cannot give you code examples, but I hope you can make do with what I wrote.

JavaScript in iOS that responses to programmatic calls

I'm using Processing with the HYPE framework to create some visualizations and want to put it in my iOS app. I've searched around a bit and it looks like the easiest solution would be to export Processing to JS and put that in a UIWebView.
The part I'm unsure about is that I need to be able to send input to the JS to adjust the visualization on a steady timer. My first thought is that I can set up key listeners in the JS, and then programmatically simulate a key press within the app. Is that possible? Are there other solutions?

Not a javascript expert but I know you can run JS in UIWebView. eg:
// Get
NSString *innerHTML = [self.myWebView stringByEvaluatingJavaScriptFromString:#"document.documentElement.innerHTML"];
// Set
[self.myWebView stringByEvaluatingJavaScriptFromString:#"document.documentElement.innerHTML"];
I hope this guides you in the right direction.
Source

WP - JS - Get Instance of Tinymce Editor

I'm creating a Wordpress plugin, which adds a metabox right under the post editor containing a button. The plugin also loads a Javascript file right below the closing </body> tag.
PURPOSE
At the moment, what I am trying to achieve with the plugin is simple. When a user enters content to the editor and then clicks the button inside the metabox, I want to modify the editor's content.
JS CODE
In its simplest form:
jQuery(document).ready(function($) {
$('#button').on('click', function(e) {
e.preventDefault();
var editor = tinyMCE.get("content");
editor.setContent(some_content);
});
});
PROBLEM
The problem is that editor variable returns undefined.
FIREBUG (when trying to set var editor)
wpActiveEditor : "content"
editors : [ ]
activeEditor : null
WHAT HAVE I TRIED
I have tried many, many things (also many small tweaks) found on Tinymce's documentation and here on Stackoverflow but the problem still remains the same.
Any help would be very appreciated.
PS. The content textarea is visible when running my tests.

When the Editor first loads with the "Text" mode active, tinymce does not get initialized, therefore you cannot use tinyMCE.get(), as opposed to the "Visual" mode.
(I hadn't noticed that it actually works on the "Visual" mode, as I was keep testing it on the "Text" mode)
So, a conditional statement is necessary to determine first which tab is active. I solved my problem with this method:
function setEditorContent(val) {
var $_editorTextArea = $('#content');
$_editorTextArea.is(':visible') ? $_editorTextArea.val(val) : tinyMCE.get('content').setContent(val);
}
Hope this answer will prevent some headaches :)

Well, a live example would help a lot.
This way i can only guess: It looks a bit as if you cannot get the editor you want.
There are two possible reasons that come into my mind:
The editor id you are using is not the id of your editor
To verify this you check the id of your editors soure html element (in most cases a textarea).If there is no id set tinymce will use "content" as default.
There iy no editor initialized at all
To verify this you can use console.log(tinymce.editors) in your javascript console. If no editor is initialized then you will get an empty array.

Many years later but maybe this will help someone...
In addition to everything said above some consideration needs to be paid to the JS event model. Consider:
TinyMCE may not initialize (and the tinymce global may not be available) until the document is done loading. The OP correctly wrapped calls in jQuery(fn), which will solve this. This is relevant if you're using an added framework that initializes and tries to manipulate the editors (like AngularJS directives).
Parts of initialization seem to be asynchronous so even if you wrap everything in jQuery(fn) the editors may not be available until later. WP loads Underscore as part of Backbone so wrapping initial attempts to locate editors in _.defer(fn) seems to get me lots of mileage. This could be done with the native JS setTimeout as well.
Beyond the fantastic answer by #m.spyratos, it may be helpful to note that you can hook mode change events (Visual/Text) by adding a jQuery click event handler to button.switch-tmce[data-wp-editor="my_editor_id"] and button.switch-html[data-wp-editor="my_editor_id"] for when the user selects Visual or Text, respectively. Your version may vary but I found that the textarea goes away when switching to Visual mode and the tinymce.editor instance goes away when switching to Text mode. Hooking to these events gives a persistent means to re-hook when the user decides to change modes.
As a quick reference, you can attach to the editor object (activeEditor or something in editors[], which is keyed by editor ID) to receive any and all changes in visual editor content with by hooking to the editor with editor.on('NodeChange keyup', fn) and a single event callback. I included blur in my solution as well, for posterity. The text editor content can be hooked with jQuery('textarea#my_editor_id').on('keyup', fn).
I have successfully managed multiple editors on a page that are entirely two-way bound entirely through JS; the editors are created with wp_editor and no initial content then loaded asynchronously (via AJAX in my case) and managed through multiple edit cycles without a server round-trip. This is possible, if not slightly convoluted.

Convert my Xcode application to a webapp (to use tabbar)

I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.

Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar

Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.