We Keep Coding

How to capture the displayed link in HTML (JavaScript) and pass to another HTML page as a variable?

I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.

In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>

If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.

Javascript help for a Chrome extension

First of all, I am not a programmer. I do not know Javascript at all. I'm trying to create a Chrome extension that modifies my browser tab's title, by taking a specific string on a webpage. I know how to create Chrome extensions (just barely) and I just need to modify the Javascript to do what I want (which I do not know how).
I found the following script online and am trying to modify it but can't figure out how to get it working. Here is the script:
https://pastebin.com/dY1LSdjT
// Fire this event any time the mouse is moving. Sucks for performance, but it's a better experience
document.addEventListener("mousemove", function() {
// This will get us the banner
let bannerTextElements = document.getElementsByClassName("dijitReset dijitInputField dijitInputContainer");
console.log(bannerTextElements);
console.log(bannerTextElements[0]);
if (bannerTextElements[0]) {
console.log("ok!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
console.log(bannerTextElements[0].innerHTML);
// This will get us the text
let bannerTextLine = bannerTextElements[0].getElementsByClassName("dijitReset dijitInputInner");
console.log(bannerTextLine);
document.title = bannerTextLine[0].innerHTML
}
}, false);
And here's the website viewed in developer mode. I would like to get the text "blahhhh" and use that for the title of my browser tab.
Below is a different webpage and the difference here is that the "div class" names will change. The numbers in those class will change to different numbers, but the structure and the overall name remains the same. For example, "ms-Button-label label-549" may change to "ms-Button-label label-640". This happens whenever you refresh the page. I found that the "viewport" id name doesn't change though, so I think if we can use that as a reference and then just look at the nested div classes and reference them and extract the value (in this case Crystal Mountain).

Fixing your code
You got like 95% of everything you need.
The one thing you are missing right now is that the fact that an input element does not posses an "innerHTML" (That is why it isn't closed like this: <input>renderedText</input>). Instead you want to check for it's value:
document.title = bannerTextLine[0].value;
Some Improvements:
Search by ID
You have a well defined input which can be more easily obtained by looking it up using the id:
let bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');
End result:
const bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');
bannerTextLine.addEventListener("blur", function() {
if (bannerTextLine != null) {
document.title = bannerTextLine.value;
}
});
This is the entire JS code. Note that I changed the event to blur which activates when the form is left, this should be optimal for your case.

Why is rails changing my placeholder hashtag values?

I have hyperlinks with href="#" that are assigned to client-side javascript event handlers. When making requests via ajax, these links behave as expected (via "click" events) but when I occasionally use a link generated by the Rails link_to helper these href values suddenly become corrupted: href="#" becomes href="users/1/photo/4" for example. Every link on the page picks up the same value!
When I use Chrome's Inspect Element, it reveals that the rendered href value remains href="#", yet rolling over it reveals it is pointed to the unwanted url. The event listeners fail. Is this turbolinks forcing my link placeholders to take on unwanted values? Why is rails messing with my links?
Here is typical javascript code assigning an event handler:
Menu.prototype.activatePhotosLink = function() {
var self = this;
// ======= get all user photos =======
$("#main-nav").on("click", function(){
event.preventDefault();
self.getUserPhotos();
});
}
Here's how the link looks via Chrome's Inspect Element with href="#":
photos
I tried to fix this problem with data-no-turbolink="true" but that did not work. Meanwhile, here is what I see in the browser's "link to tooltips" on rollover:
localhost:30000/users/1#
Why not href="#"? Thank you for any thoughts!

The path is not corrupted. It should be the path of the page you are at with the hashtag appended to it. This is not related to Rails nor JavaScript, but rather a feature in HTML. In HTML, if you want to create an anchor link to a certain element in the page, you pass its id to the href. You can read more about it here.
If you don't want a url to appear when you roll over the link, you can use href='javascript:void(0)'

Can new elements inserted with javascript be seen with view-source?

My code is as follows:
window.onload = initialise;
function initialise() {
var objPForSubmitMsg = document.createElement('p');
objPForSubmitMsg.setAttribute('class', 'submitmsg');
var arObjForms = document.getElementsByTagName('form');
for (i = 0; i < arObjForms.length; i++) {
var objFormParent = arObjForms[i].parentNode;
alert(objFormParent);
objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
}
} // end initialise().
I checked the function with alerts and it goes through.
When I "view-source" for the page after the function initialise() is done, there are no new elements added.
So my first question would be as per subject: can new elements inserted with javascript be seen with view-source?
If yes, then what is wrong with my code above? Why it doesn't insert new element?
I also tried to call initialise() from a button, but nothing happens then either.
I'm new to javascript so any comments would be appreciated.
EDIT: Thanks everyone. Ok, view-source cannot see it...
Than if I pass my page to php and load it with: $page = file_get_contents("mypage.html"); , if I echo that back with: echo $page; then I guess the newly created elements will not appear there either?
If that is the case, how would you pass the whole thing including the newly js created elements to php?

View Source in the browser shows you the original HTML source of the page - exactly what came from the server before any client side modifications have been made.
As such, it will NOT include any dynamic changes to the page made by javascript.
To see changes that have been made dynamically, use a DOM inspector. There is one built into Safari and Chrome and IE and Firebug is an add-on for Firefox. All will show you the entire DOM hierarchy, live exactly like it currently exists in the browser. In fact, you can even modify the live DOM yourself in the inspector.
Your current code is inserting an empty <p> tag which may not be visible because it's empty. If you put some content into the <p> tag, it successfully inserts one <p> tag into your page. It will only insert one because you only create one and then you try to insert the same tag before each form. You can see what your current code does here: http://jsfiddle.net/jfriend00/3fvbj7re/.
If you want a <p> tag inserted before each form in the page, you'd need to create a separate <p> tag for each insertion like this:
function initialise() {
var arObjForms = document.getElementsByTagName('form');
var objPForSubmitMsg;
for (i = 0; i < arObjForms.length; i++) {
objPForSubmitMsg = document.createElement('p');
objPForSubmitMsg.innerHTML = "hello"; // give tag some content
objPForSubmitMsg.setAttribute('class', 'submitmsg');
var objFormParent = arObjForms[i].parentNode;
objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
}
}
window.onload = initialise;

The Dom elements you add at runtime, were not present when the first time your page was loaded. In other words, it wasn't a part of your original page.
When you view source of your original page, it just shows the HTMl, without executing any JS or CSS, since you only explore HTMl in the source.
Hence, even when you add dynamic html elements in a page, you won't be able to see them when you click view source.
To see those elements, you should use the Developer Console of a browser.

If you want to see the current DOM you should use the code inspector (Developer Tools) or javascript console, not the source, which is what the original response body was.
In Chrome for example go to view->developer->developer tools

I would like to add that just because you can't see it with view-source, doesn't mean you can't access your newly created elements using document.getElementById('el-id') or something similar. Kinda off topic but it's important to note.

Can you turn off the loading screen in Submodal?

We are using the enhanced sub-modal script (http://gabrito.com/files/subModal/) and would like to bypass the loading.html screen that comes up by default. Can this be turned off? Setting the value to "null" shows a "page not found" error before the actual page loads.

It's not hard, but the code is scattered all over the place in the Javascript source. You might want to use a more modern alternative instead (especially if you're already using a library on your site)
First of all, we strip out all instances of the gLoading variable - this means removing the setPopUpLoadingPage function and the src="'+gLoading+'" in the part where they build the HTML string to inject into the page. And finally, one last reference to gLoading exist in the hidePopWin function, to reset the iframe source back to the loading page when the modal is hidden.
Then finally we replace the line gPopFrame.src = url; in the showPopWin function with this:
if(gPopFrame.src != url){
gPopFrame.src = url;
}
To stop the iframe from reloading if it's the same source.
You can see a live demo of the new script here: http://www.jsfiddle.net/yijiang/T2u2Z/ and also grab a copy of it here: http://dl.dropbox.com/u/1722364/submodalsource.js