Reloading an HTML element with a Javascript function - javascript

I have a flash object embedded inside a DIV. Now I want to use a link('a' tag) above that div for the user to be able to reload that flash dialer, or more specifically the div tag it is contained in(I cannot change the flash file in any way).
I've tried using this JS function below, but it does not work(does not reload the div and contents when hitting the 'reload' link.
<div class="userProfile">
<script type="text/javascript">
function refreshDialer(){
document.getElementById("dialerDiv1").contentWindow.location.reload(true);
}
</script>
Reload
<div id="dialerDiv1">
<embed type="application/x-shockwave-flash" wmode="opaque"
src="http://dummysite.com"
width="301"
height="401"
id="popUpSwf"
name="popUpSwf"
quality="high"
border="none"
allowscriptaccess="always"
pluginspage="http://www.adobe.com/go/getflashplayer"
scale="noscale"
menu="false"
flashvars="#" />
</div>
</div>
What am I doing wrong here?
Thanks

Try this:
function refreshDialer(){
//alert("In function");
var container = document.getElementById("dialerDiv1");
var content = container.innerHTML;
//alert(content);
container.innerHTML= content;
}
In action using youtube link as example.

You can, but the way you have used is wrong. When you want to reload something, you can just append a search query, so that it refreshes the source.
For Eg., when there is a frequently changing image (say captcha) and you wanna load it again, without refreshing the browser, you can do this way:
Initial Code:
<img src="captcha.png" alt="captcha" />
Refreshed Code:
<img src="captcha.png?1" alt="captcha" />
So, the same technique can be used in your page too. So the DIV's ID is 'dialerDiv1' right, for that, if you use jQuery, you can refresh this way:
function refreshDialer()
{
var d = new Date();
document.getElementByTagName('embed')[0].setAttribute('src', + document.getElementByTagName('embed')[0].getAttribute('src') + d.getMilliseconds());
}
Or if you are not using jQuery, you need to use the setAttribute() function this way:
function refreshDialer()
{
var d = new Date();
$('#dialerDiv1 embed').attr('src', $('#dialerDiv1 embed').attr('src') + d.getMilliseconds());
}
Simple. Hope this helps.

Related

entering input causing link change

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
}

How to automatically click on a HTML link when opening a new window?

I have a small program in JSP which basically when I click on a document, it opens a new window that allows me to view it. The problem here is it would not show the viewer unless I update or install adobe flash player.
I added a hyperlink link where I can easily click on it and it prompts me to "Allow" to view the document which is fine. The hyperlink looks like below:
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
Now, I have to manually click on it, is there a way I can have the hyperlink auto clicked when the pop up windows shows?
I am new to JavaScript and HTML so I figured there is something that I could use like <body onload > .
Edit
This is how my code looks like now:
<body onload="Auto()" > <!--oncontextmenu="return false;"-->
<script>
function Auto(){
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
}
</script>
Am I doing anything wrong?
You can simply use click() method
Add id to anchor element
<a href="https://get.adobe.com/flashplayer" id="myLink" >Enable Flash</a>
Add to your script
function automateClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", automateClick);
Yes..you can use below code and load your link there
$(document).ready(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
$(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
window.onload = function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
}
You can do this with as little as one line, if you want to learn more about the approach I've used, then it may be worth your time looking into functions such as querySelector. Once you have the desired element, you can then simply fire the click method like so.
Demo
<script type="text/javascript">
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
</script>

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!

onclick on a image to navigate to another page using Javascript

I am getting warmed up with Javascript so I am trying something on my own. I am searching for a onclick function, where I have thumbnail images in my index.html page, and whenever a user clicks the image he will be redirected to a new page where the image is again displayed along with some information about it. Right now I am doing it using just plain HTML.
I want to use javascript to navigate to the page corresponding to the image the user has clicked. Is that possible to do using onclick? I have more than 10 images on my webpage and each time a user clicks an image I want to get the id of that image and redirect it to the new page. The new page is named after the image name.
For ex:
image name: bottle.jpg (residing in the images folder)
redirect page name: bottle.html (residing in the main folder)
<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>
Any valuable information will be appreciated!
If it is somewhere asked in this forum, it would be helpful if somebody can give me that link.
Thanks,
Raaks
maybe this is what u want?
<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>
edit: keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page....
Because it makes these things so easy, you could consider using a JavaScript library like jQuery to do this:
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Basically, it attaches an onClick event to all images with class thumbnail to redirect to the corresponding HTML page (id + .html). Then you only need the images in your HTML (without the a elements), like this:
<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
</script>
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.
You can define a a click function and then set the onclick attribute for the element.
function imageClick(url) {
window.location = url;
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
This approach lets you get rid of the surrounding <a> element. If you want to keep it, then define the onclick attribute on <a> instead of on <img>.

JS Function to create link - how?

I have the following code in my html
<input type="image" src=images/more.png onClick="showInviteInfo() />
When clicked it brings up a pop up box via this js function.
function showInviteInfo(){
document.getElementById("divsignup").style.visibility = "visible";
document.getElementById("txtemail").focus();
}
But I no longer want it to bring up pop up rather when clicked take user to a new page. What do I need to change? Probably easy, but I am a newbie.
Use
window.location = "new location path";
in your function.
window.location
If you can use an anchor tag then it would be like this.
Click here to navigate to new page
change
<input type="image" src=images/more.png onClick="showInviteInfo() />
to
<img src="images/more.png" />
EDIT: sorry, the editor was giving me grief with the second line

Categories