Develop Reference

Targeting dynamic elements in HTML widget with JavaScript

I'm trying to use Javascript to retrieve elements from an HTML widget on the page. I can't just use the usual document.getelementsbyclassname etc. as the widget is treated as an embedded section of the page.
I have tried this:
var iframe = document.getElementsByClassName("widgetclassname")[0];
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
I've used that in the past for iframes but not for this. I'm getting this error:
Uncaught TypeError: Cannot read property 'contentDocument' of undefined
I've tried adding a delay and moving around items in case it's a timing thing (trying to get things before it's loaded properly) but it made no difference.
I can't use ID instead of classname as the widget doesn't have one and I can't change that.

Cannot read property 'contentDocument' of undefined means "Hey! iframe is undefined!" Which means that your getElementsByClassName() is returning an empty node list.
We cannot help you further without a way of looking at the document you are trying to query. Are you using the developer tools to ensure that the <iframe> you want has that class on it? Exactly, no typos, no case changes?
Alternatively, you can try using:
// first iframe in the document
var iframe = document.querySelector('iframe');
// third iframe in the document
var iframe = document.querySelectorAll('iframe')[2];
Edit: in response to our chat discussion, the problem is that the page is dynamically loading content, and the script you are trying to run is taking place before that content has been loaded.
A simple hack is to wait for the element you want to load and then run the code you want. For example:
document.title = "Search Results - AvenaGo";
var waitForHotel = setInterval(function(){
var hotelName = document.querySelector('.hotel_page-hotel_name');
if (hotelName) {
clearInterval(waitForHotel);
document.title = hotelName.textContent + ' - AvenaGo';
}
}, 100);
Every 100ms this code will run and check to see if an element with the class hotel_page-hotel_name has loaded yet. If it has, it will stop checking, and modify the title of the page based on the text in that element.

Modify HTML Content Created by 3rd Party JS Script

I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.

getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

Embed HTML5 / JS Web App with parameters

I have been given a JSON url which returns some data. I need to create a javascript / html5 / css app that will grub this data and return it in a list.
Up to there I'm ok with doing this.
My issue is that I then need to be able to provide a <script></script> which the user can paste in any other website to display the web app.
The script or iframe need to be able to take parameters so it can filter the returned data.
Can anyone guide me in the right direction on instructions on how to do this?

The simplest way is using global variables.
Edit: added a way to "embed" the generated content. I use jQuery in the example, but it can be easily done with any other DOM manipulation library or plain JS.
The final user add an HTML element with a specific id and a <script> tag containing the parameters. We use a div element in the example.
<div id="generated-list"></div>
<script>
// the user defines parameters
var configParameters = {param1: 'some value', param2: ['is', 'array']};
</script>
The final user should paste your code. I have no idea how is your code, so I made this up:
<script>
// The user pastes your script here
// which may be a function accepting the defined parameters
function createList(configParameters) {
// create the necessary elements and append them to the element
// with the right id
// We create an empty ul element in the example
var newList = $('<ul></ul>');
$('#generated-list').append(newList);
}
</script>
Google analytics uses a similar approach

Make HTML visible inside Iframe

I'm making my own WYSIWYG. I've got two buttons: "Visualize" and Show Source.
I've got an iframe (rich text editor) that contains a huge piece of HTML code. First time it's loaded it shows all the elements visually. Once Show Source is pressed the innerHTML text (of the visualized html) is shown. But how can I make the HTML text visual again, when the Visualize button is pressed?
content.document.body.innerText holds the HTML that needs to be visualized.
(content = id of the iframe)
$('#Visualize').click(function()
{
// Make HTML visible
});

With the html code that you already have you and to show a preview in a div, correct? Just use the html function.
$('#Visualize').click(function(){
$('#myShowDiv').html(content.document.body.innerText);
});

If you're using an iframe and that iframe is only intended to hold the actual page source being edited, then you're going to need variables on your parent frame that hold the actual source. I would recommend keeping it separate and then use the following to perform switches:
var actualSource = content.document.body.innerHTML;
// just something to initialize it
// You should probably keep it in a global object instead of as a var
$('#Visualize').click(function()
{
actualSource = content.document.body.innerText;
content.document.body.innerHTML = "";
content.document.body.innerHTML= actualSource;
});
I would imagine that you have methods that are capturing the source, but I would imagine you'd want to capture the actual source as it is at that moment. I'm not sure what you're doing with the actual editing piece (is it a div that is editable? is it a text area?), but in order to perform the showing, it should just be a matter of toggling the innerHTML and innerText between the two settings. The real catch will be monitoring the actual controls affected by this change.

javascript multiple forms on the same rendered screen

I'm working with classic ASP.
I have an 2 includes that have 2 different forms on them. They are both unique in name. However, when I try to read the value of the one the elements in the 2nd form I get an error saying it is null. However, when I view the source in Firebug I can see that in face there is a value in that element.
My javascript code:
console.log(document.getElementById('focusValue').value);
Output from firebug:
<input id="focusValue" type="hidden" value="1006" name="focusValue">
Is there something I need to do because there are 2 forms on this "rendered" screen? The only other thing I think I should mention is that these pages are in an iFrame. Not sure if that really matters...

An iFrame creates a separate document within the containing document, you need to get a reference to that document before you can access its content. There is a reasonable tutorial at http://www.dyn-web.com/tutorials/iframes/.
If you only have one iFrame in the page, then you can reference it by:
var frame = window.frames[0];
Or you could use an id with getElementById. To get a reference to the document:
var doc;
if (frame) {
doc = frame.contentDocument || frame.contentWindow.document;
}
Now you can get to the input element:
var input = doc && doc.getElementById('focusValue');
Of course this all depends on you complying with the same origin policy, otherwise you can't access the frame content.

Can't see your page, so it's hard to debug. Assuming the script runs AFTER the forms. The only thing i can think is that there is more than one element on the page with the id "focusValue".
What happens when you console.log(document.getElementById('focusValue'))