entering input causing link change - javascript

This sort of links back to a previous question that I made. The goal was to change the iframe src with a text input. After lots of experimentation, it worked. However, this has arisen a new problem. After I enter the link and submit it, it adds /?link=linkhere to the end of the page and refreshes it. Then, once it's refreshed, the original src comes back, making it useless.
Here's the most important code:
<iframe
id="minecraftFrame"
src="//classic.minecraft.net"
height="500"
width="800"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
<input type="text" id="myInput" name="input">
<button class="button" onclick="changeChannel()">Go</button>
<script>
function changeChannel(){
document.getElementById("iFrame").src = document.getElementById("myInput").value;
}
</script>
I'm unsure of what to try at this point, since I'm not too experienced with javascript. I just don't want the main page to refresh after change the src.

You need to prevent default, i.e. stop event bubbling which is resulting in reload. See if that works for you. Seems like it should as you are submitting the form which would result in refresh of the page.
function changeChannel() {
event.preventDefault();
// ...
}

Your code included this --- document.getElementById("iFrame").src
the id of the iframe is "minecraftFrame" and not "iFrame"
or you could use document.querySelector('iFrame')
and stop the page reload with
function changeChannel(e) {
e.preventDefault();
// Code goes here
}

Related

On page reload entire focus on an id

I'm working on some accessibility stuff for a client and the site is basically in Ruby on Rails but I know this needs some JS that I'm pretty weak with. The site has three links that then trigger an iframe. So it's something like this:
<%=link_to("Alpha", "#alpha")%>
<%=link_to("Beta", "#beta")%>
<%=link_to("Gamma", "#gamma")%>
<iframe src="<%=#url%>" width="100%" height="500px;" id="myFrame" tabindex="0" title="<%=#title%>"></iframe>
<script>
window.onload = function() {
document.getElementById("myFrame").focus();
};
</script>
I'm testing the screen reading using ChromeVox and on page load/and reload it will read off the navigation from the top of the page. The keyboard focus is definitely on the iFrame but it reads through the entire page.
So how do I force the entire focus on the iFrame on a page reload?
This answer here seems like it may work for you. That would mean updating your code to have the aria-live attribute "assertive", such as:
<iframe src="<%=#url%>" width="100%" height="500px;" id="myFrame" aria-live="assertive" tabindex="0" title="<%=#title%>"></iframe>

Changing an iframe SRC dynamically

What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!

How to change iframe source pieces with javascript?

So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.
I just cannot get this to work.
Here is the HTML code:
<div id="start">
<label for="startLocation">Start location ID:</label>
<input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>
<div id="dest">
<label for="destination">Destination ID:</label>
<input type="text" id="destination" name="destination" ><br><br>
</div>
<button onclick="changeMap()">Show the map!</button><br><br>
</form>
<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>
This would be the function:
function changeMap(){
//place IDs to put into url
var start = document.getElementById('startLocation').value;
var dest = document.getElementById('destination').value;
//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";
var mapSource2 = "&destination=place_id:";
var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";
var mapSource = mapSource1+start+mapSource2+dest+mapSource3;
//iframe
var iframe = document.getElementById('map');
//changing the src of the iframe
iframe.src = mapSource;
}
The line
<button onclick="changeMap()">Show the map!</button><br><br>
may be causing the problem.
To begin with, button elements, if not given a type="button", are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.
Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:
<button type="button" id="show-map">Show the map!</button><br><br>
var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);
Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).
Unless you're using document.onReady, the order of the script tag and button really matter. If the script references the button, the button comes first. If the button references the script, the script must come first.
Wrapping in some sort of document.onReady is common practice. jQuery has a function ($.ready) that can be used to do this, but if you're brave you can also do it without jQuery.
Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.

Hide/Show Load function not working

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
The script works with the submit function like this:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
This is the loading animation script which works
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Here is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
Here is the CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.
Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/
Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.
Edit
One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.
$('#iframe1').contents().load(function() {
//window loaded
});

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|
Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D
If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

Categories