i have smth like following code:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
When i click this button iframe have added:
<html>
<head>
</head>
<body>
<button id="test1" onclick="OnSave()">Save</button>
<iframe id="test2" src="smth">//button inside that will fire OnSave event</iframe>
</body>
<script>
function OnSave() {
if ($("#test2").length)
{
alert("i see iframe");
}
else
{
//some code that will call Iframe via ajax
}
}
</script>
</html>
So, when i click button that will call OnSave function from iframe,jquery didn't see my iframe or smth inside it.How should i call check if iframe exist?
You're not calling the OnSave function like that.. try to do this instead
<button id="test1" onclick="OnSave()">Save</button>
(Note the parenthesis after the function name)
Edit: Ok, so you may want to get back to parent window before calling the function
window.parent.functionName();
Related
Please help! How assign buttons with functions in Popup menu?
popup.html
<html>
<head>
<title>Common Messages for Intercom</title>
<script src="popup.js"></script>
</head>
<body>
<a href='#'>Message 1</a>
<br>
<a href='#'>Message 2</a>
</body>
</html>
popup.js
function Button1() {
// Something
}
function Button2() {
// Something
}
Thanks!
popup.html
<html>
<head>
<title>Common Messages for Intercom</title>
</head>
<body>
<a id="button1" href='#'>Message 1</a>
<br>
<a id="button2" href='#'>Message 2</a>
<script src="popup.js"></script>
</body>
</html>
popup.js
document.getElementById('button1').onclick = Button1;
document.getElementById('button2').onclick = Button2;
function Button1() {
// Something
}
function Button2() {
// Something
}
You need to be able to identify your elements. Therefore, give them unique IDs:
Message 1
<br>
Message 2
You need to bind your functions to the click event:
function Button1() {
// Something
}
document.getElementById("btn1").addEventListener("click", Button1);
The above will not work yet, as it will execute before DOM is built (and therefore #btn1 does not exist yet). Wrap things in DOMContentLoaded listener to make sure DOM is ready:
function Button1() {
// Something
}
function Button2() {
// Something
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("btn1").addEventListener("click", Button1);
document.getElementById("btn2").addEventListener("click", Button2);
});
I have the following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2' onclick="ClickBack();">Click me </span>
</body>
<script>
$(".click2").click(function (event) {
if(confirm("Sure to continue"))
event.stopImediatePropagation();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</html>
My requirement is to call ClickBack() only when its being confirmed by , and i cannot make any change in ClickBack function , Its ony one case,
main thing is
I have to add this click2 to a number of elements, and it will basically call the inline events only after confirmation by click2
$(".click2").click(function (event)
I am getting two issue,
ClickBack is being fired firstly,
TypeError: event.stopImediatePropagation is not a function it was type mistake thanks to #manwal its solved
How can I achieve my goal.
I cannot make any change in ClickBack() function
Please advise
Thanks
You have typo issue, use this line there should be double m:
event.stopImmediatePropagation()
instead of
event.stopImediatePropagation()
^
for this ClickBack is being fired firstly, problem the solution is remove onclick="ClickBack();" from
<span class='click2' onclick="ClickBack();">Click me </span>
First of all if you bind inline onclick function it will be trigerred first.
So instead of adding it inline do it in your script like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Remove onclick event handler from span
<span class='click2'>Click me </span>
and call the ClickBack function in on click event handler for .click2 class as follows,
<script>
$(".click2").click(function (event) {
if(confirm("Sure to call ClickBack"))
ClickBack();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
I have a main jsp page in which alert functionality is modified using
window.alert=function(txt)
In other jsp pages are loaded in the same document using iframe. parent.alert is used in most of these pages to keep consistency.
This is a piece of code I am working with:
<div onkeypress="handlekey()">
<button id='done' onclick="example()" >submit</button>
</div>
Script portion is as following:
<script>
function handlekey(){
if ((window.event) && (window.event.keyCode == 13))
{
// click the search button
done.click();
}
}
function example(){
parent.alert('Done');
}
</script>
Alert is not fired if I press an enter key but get fired when I click on the button.
Alert also gets fired when I replace parent.alert with alert.
This works fine for me:
index.html
<html>
<head>
<script>
window.alert = function(){
console.log('My alert');
}
</script>
</head>
<body>
<iframe src="iframe.html" id="myIframe"/>
</body>
</html>
iframe.html
<html>
<head>
<script>
function handleEvent() {
if ((window.event) && ((window.event.keyCode == 13) || window.event.type == 'click')) {
example();
}
}
function example(){
parent.alert();
}
</script>
</head>
<body>
<div onkeypress="handleEvent()">
<button id='done' onclick="handleEvent()" >submit</button>
</div>
</body>
</html>
I am having problems getting the OnChnage Listener to work, if i position the script after the </form> tag the listener works fine but if i place the script within the <head> tags it fails to work.
On my site i can only have the script within the <head> tags is there anything I can do to make the script runn within the <head> tags?
in this configuration the script does not work
<head>
<script type="text/javascript">
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
</script>
</head>
<body>
<form>
<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>
</form>
Put it this way:
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
</head>
Put your code in the window.onload function:
<head>
<script>
window.onload = function() {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
<body>
...
</body>
When you place the script in the <head>, the elements you are getting with document.getElementById do not exist yet. Wait for the window to load before adding the event listener.
You need to wait for the window to load with a jQuery $(document).ready or by adding a loaded listener to the window:
window.addEventListener('load',addListener,false);
function addListener() {
//your code here
}
EDIT I Found the solution! credit goes entirely to the assistance I received from Mixel. For those who find themselves in the same predicament of needing to pull a div from an iframe without using onload here is the entire working code that I am using:
<html>
<head>
<title>Main page</title>
<style type="text/css">#hiddenframe {display:none;}</style>
<script type="text/javascript">
window.onload = function () {
var myUrl = "test.html"
document.frames['hiddenframe'].location.href = myUrl;
}
</script>
</head>
<body>
<div id="parent-div"></div>
<iframe id="hiddenframe"></iframe>
</body>
</html>
And the Child Page:
<html>
<head>
<title>Child Page</title>
<script type="text/javascript">
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
</script>
</head>
<body>
<div id="daughter-div">
This is the Child Div!
</div>
</body>
</html>
Thank you once again to Mixel for his help and patience in finding a solution
That's because you reload hiddenframe in onload handler. Reloading triggers onload event, then onload handler reloads hiddenframe. And this happens again and again...
Edit:
May be I do not understand what you want to do in your code, but if you want to load iframe when parent window is loaded you need this:
window.onload = function () {
document.getElementById('hiddenframe').setAttribute('src', 'test.html');
}
And there is window.onload handler of test.html page:
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
Edit2:
That's html of main page:
<div id="parent-div"></div>
<iframe id="hiddenframe">
</iframe>
And that's test.html:
<div id="daughter-div">
Child div!
</div>