Can't call functions in parent from iframe - javascript

I'm trying to make a call to 2 functions setListener(); and addNewBox(); from within an iframe.
I've looked everywhere and tried everything and I can't get it to work.
I don't have access to the head of the parent because it is being constructed in chunks through php require.
This is a rough mockup of what the parent file looks like.
<head>
<?php require "head.html" ?>
</head>
<body>
<?php require "content.html" ?>
</body>
content.html mockup:
<!-- a bunch of boring divs -->
<iframe src="image_editor.html"></iframe>
<script> /* random ajax */ </script>
<script>
$(document).ready(function(e) {
//init
setListener();
addNewBox();
function setListener()
{
//MAGIC HAPPENS
}
function addNewBox()
{
//GREATER MAGIC HAPPENS
}
}
</script>
image_editor.html mockup:
<body>
<form id="image_form">
<input type="submit" value="Submit"/>
</form>
<script>
$(document).ready(function(e) {
$("#image_form").submit(function(e) {
//MAGIC HAPPENS HERE
//re-adds listeners
window.parent.addNewBox();
window.parent.setListener();
}
</script>
</body>
I have tried every solution I could find online, from using top, to re-declaring the functions in parent in public format (window.myFunction = function() { };).
I would appreciate any advice.
Thanks
UPDATE:
After some debugging it seems that the reason the calls aren't working is because execution stop one line before them. Somehow this line "$(".new", window.parent.document).remove();" breaks everything. I now have to figure that one out. I appreciate all your help.

This happens at least because setListener() and addNewBox() are not in the global scope of window.parent. To fix this you need to move them out of $(document).ready(function(e) {...}()).

This is because they are in $(document).ready(function(){});
You can fix it like this:
$(window.parent).bind(setListener);
$(window.parent).bind(addNewBox);
Hope it helps!

Related

Calling an alert function from a button but without using onclick

What im trying to do, is to call my function from whenever someone clicks on my button. However, i know that it can be done with
<button onclick="myFuntion()>
But i want to skip that step, i dont want a function in my button, i've heard that its bad programming.
However, heres how my file looks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>
<script>
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
</script>
</head>
<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>
</body>
</html>
So how come it doesnt pop-up with the box "Hello" whenever i push the button, what have I done wrong?
You have to call your testFunction after the HTML body is loaded so that it actually creates he binding.
That is, at the end of the file, you'd do something like:
...
<script>
testFunction()
</script>
</body>
...
If you run that binding code in your head script the button element won't exist yet — that is why this have to be at the end.
JavaScript libraries such as jQuery make this more elegant by providing an ready hook, where one puts code to be called once the page is fully loaded, without having to resort to code on the bottom of the page.
Complete example with script at end (confusingly, Stack Snippets don't show it to you in the order they actually are in the snippet; even though it doesn't look like it, the script is at the end here):
// Scoping function to avoid creating unnecessary globals
(function() {
// The click handler
function Hello() {
alert("Hello");
}
// Hooking it up -- you *can* do it like you did:
//document.getElementById("test").onclick = Hello;
// ...but the modern way is to use addEventListener,
// which allows for more than one handler:
document.getElementById("test").addEventListener(
"click", Hello, false
);
})();
<button type="button" id="test">Click me</button>
window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
Just run the line in your testFunction always. As seen here:
https://jsfiddle.net/arugco4b/

Javascript run() Function is Not Defined

I know there are a lot of questions like this, but none of them seemed to solve my problem. I have this piece of code that won't run because it says Uncaught ReferenceError: run is not defined. I have tried to move the function into the body of the HTML, but to no avail. My code:
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<button onclick="run()">Export to C++</button>
<script type="text/javascript">
function run() {
var code=new Array();
var input = document.getElementById("textbox").value;
//convert things that are not subroutines here
code.push(input);
code.push("}");
...
for (var i=0;i<code.length;i++)
{
document.write(code[i]+"<br>");
}
}
</script>
</html>
The ... is irrelevant code.
Why isn't this working? Any ideas on how to fix it?
Thanks
Seems it working fine for me, but as I can see the only reason for the problem is the following.
Your page is loading piece by piece from up to down, so all the scripts are going to be included and executed one by one, all the elements are going to be shown one by one as well.
That's not this case in fact, because you are using "on click" event and there are no init actions, so it should be working, but you can try to move your <script></script> at the top (before you assign event).
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<script type="text/javascript">
you script here
</script>
<button onclick="run()">Export to C++</button>
</html>
You may also replace the whole code inside of
<script></script>
by something like alert("Hello"); to check if it's working. Possible you have the issue with internal code.

reference to function before its defined

I have read that if you want to make it look like your site loads faster then you should put your javascript at the end of your html file like the following
<html>
<body>
</body>
<script>
//my awesome javascript functions go here because it lets things load faster
//than if it was at the top
</script>
</html>
The problem is when I create buttons or use onChange events that call these functions.
How am I meant to keep my JS at the bottom of the page and have the JS defined for when it reads that the js function will need to be called?
For example
<html>
<body>
<input type="text" onChange="myfunction()"/>
</body>
<script>
function myfunction(){}
</script>
</html>
I did the code in pseudo code-ishly so you wouldn't focus on any of my syntax errors, but more focus on how I am meant to go about this.
When creating the page, it creates the html properly, but gives me a console error saying "myfunction" is not defined.
If I move the script part above the body this works, but it is recommended to keep it last to increase speed in page load.
Just a note I am not using jquery.
I originally thought this was a duplicate (Javascript at the bottom, function call in the body?) but it doesn't seem to answer my problem.
------------------------update----------------------------
using event listeners
<html>
<body>
<input type="text" id="myawesometext"/>
</body>
<script>
function myfunction(){}
element = document.getElementById('myawesometext');
element.addEventListener("onChange", myfunction, false);
</script>
</html>

How to stop a JQuery.load'ed inner scripts

I'm developing a dynamic web page with nested pages. Inner pages have their own script to be live and modular.
The problem comes when i want to remove one of the inner pages. Infact the HTML code is removed but the inner script keeps running.
Is it possible to stop the script?
This is a brief view of my solution:
Note that in this sample the ID are all the same but in the real solution they are identified by unique ID using php GET["ID"] value.
outerPage.php
<HEAD>
<script>
var fRunUpdate = true;
$(document).ready(function() {
$("#inner1").load("inner.php");
$("#inner2").load("inner.php");
$("#inner3").load("inner.php");
}
</script>
</HEAD>
<BODY>
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
</BODY>
innerPage.php
<HEAD>
<script>
var fRunUpdate = true;
$(document).ready(function() {
function update(){
//do something
$("#contentToUpdate").html("content");
setTimeout(update,1000);
}
}
</script>
</HEAD>
<BODY>
<div id="contentToUpdate"></div>
</BODY>
You will have to use stoptimeout or clear interval
I just read out this link and get it
How to stop a setTimeout loop?
Take function in variable
foo = setTimeout(function, time);
and then just clear it out
clearTimeout(foo);
I hope this will help you

Add a class to first div using jQuery

How to add a class to first div using jQuery.
I Tried following code but doesn't work for me.
maybe I'm missing something.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
You are executing the code before the markup is ready. Wrap the code in
// document ready short-style
$(function() {
});
try
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Your code is correct, but it's executed before the DOM is ready, please move the <script></script> to the last line before </body>.
To add a class to the rest of the elements you can do this (from VisioN's comment)
$(".item:not(:first,:last)").addClass("differentClass");
$(".item :first").addClass('first');
u use this code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
your code should execute when the DOM is fully loaded. So use $(document).ready().
the script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.
Read more about $(document).ready().
check the code below. It will help you to get done what you want.
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
$(".item:first").addClass('first'); will work fine too.
Try the demo too.
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
Here is the jQuery code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards,
http://www.santoshkori.com
see jsfiddle here
$(document).ready(function() {
$('div:first').addClass('first');
});
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
$('.item:first').addClass('first');
$('.item:last').addClass('last');
Try this
JS CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
DEMO
Note
you need to use $(function() { ... }) to wrap whole jQuery code.

Categories

Resources