I'm getting a "function not defined" Javascript error with the following code, which uses jQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
function log_in() {
document.write('Logging in ... ');
$.post('process_ajax.php', { 'action' : 'log in' }, function(data) {
document.write(data);
create_new_story();
});
}
function create_new_story() {
document.write('Creating new story ... ');
$.post('process_ajax.php', { 'action' : 'create story' }, function(data) {
document.write(data);
});
}
</script>
</head>
<body onload="log_in()">
Processing...<br>
</body>
</html>
Here's the PHP script it's calling (for testing purposes):
<?
die("Page opened.<br>");
?>
The first function called -- log_in() -- works fine, but I get this error:
"Error: create_new_story is not defined"
And that function never gets executed.
I'm sure I'm missing something simple. Can I get a new pair of eyes to find it?
You can only call document.write while the page is still loading.
You cannot call it later, or it will blow away the existing page.
Instead, you should use jQuery's .append method.
When you call document.write() after the DOM is ready then it actually replaces the entire page with the argument to document.write().
See DEMO.
Related
I'm making a page that receive string parameter from server when it is rendered. the parameter is shown correctly at body. but it shows "Uncaught ReferenceError: newestname is not defined" at jacascript function in part. but in part, the parameter is processed correctly and show it's data.
I think I'm missing quite basic thing to code. But I couldn't find while browsing internet for almost 4 hour. Please help me.
My js file in serverside give parameter like this.
res.render('index', { title: 'Express', newestname:newestname });
newestname is string value.
and at ejs file, it is processed at two part.
<head>
<script type='text/javascript'>
$(function() {
$('#report').load(newestname);
});
</script>
</head>
<body>
<div>
<%= newestname %>
</div>
<body>
the parameter using bodypart works correctly. But parameter at head doesn't work. the error message is like below.
Uncaught ReferenceError: newestname is not defined
I've tried using $(document).ready(function() {} but it shows same error.
How can I make parameter at header works?
You have to define the 'newestname' or you can directly pass '<%= newestname %>' to load function.
Try this.
<head>
<script type='text/javascript'>
let newestname= "<%= newestname %>";
$(function() {
$('#report').load(newestname);
});
</script>
</head>
I know this topic has been covered many times here but no matter which approach I take I either get a error such as "Unable to get property 'setContent' of undefined or null reference" or the line executes but nothing happens.
Here's what I know.
tinymce initializes and is a valid object.
The html variable has the propper HTML which it get from a parent window.
jQuery is loaded and functional.
In addition to the code below I have also tried.
tinyMCE.activeEditor.setContent(html);
tinymce.editors[0].setContent(html);
$('textarea#XRMeditor').val(html); * Before initialization
I have tried all methods before and after tinymce intializes (just in case).
<!DOCTYPE html>
<html>
<head>
<script src="sage_jquery.min.js" type="text/javascript"></script>
<script src="tinymce_/tinymce.min.js" type="text/javascript"></script>
<script>
var html = window.parent.document.getElementById("descriptionIFrame").contentDocument.getElementsByTagName('body')[0].innerHTML;
debugger;
//$('textarea#XRMeditor').val(html);
tinymce.init({
selector: 'textarea#XRMeditor'
});
tinymce.get('XRMeditor').setContent(html);
</script>
</head>
<body>
<textarea id="XRMeditor">Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
I suspect this issue is that you are trying to talk to TinyMCE before its initialized on the page.
Your get() call is in the head of your page and I would doubt that when the browser processes your script that TinyMCE has initialized. You can use an "init" handler to delay when this call happens:
tinyMCE.init({
//your regular init parameters here...
setup: function(editor) {
editor.on('init', function() {
//load your content here!
tinymce.activeEditor.setContent(html);
//or
tinymce.editors[0].setContent(html);
});
}
});
my html:
<html>
<head>
<script src="dojo/dojo.js"></script>
<script src="app/my.js"></script>
<script>
handleResult(<%server response data%>);
</script>
</head>
<body>
<div id="data"></div>
</body>
</html>
my js:
require(["dojo/_base/Array"],function(Array){
handleResult = function(data){
Array.forEach(data,function(item,index){
//Process the data
});
}
});
When the page loads call handleResult, I get an error:
Uncaught ReferenceError: test is not defined
But I can get this function in firebug
window.handleResult
please help me .thank.
Do NOT use onclick, please.
require(["dojo/on", "dojo/dom"],function(dom) {
var button = dom.byId("demo"));
on(button, "click", function(evnt) {
console.log(evnt);
})
});
The require function is asynchronous. You cannot define a global variable from inside a require callback and then try to immediately access it. You should also never define globals to begin with, this is one of the basic tenets of AMD. Your application architecture is wrong and will never work. You need to use an AJAX call to request the “server response data” once the application is loaded on the client, and not try to do what you are doing.
I'm trying to use head.js. Getting some weird action. Below works but if I comment out "alert('hi')" in the script in the BODY, then the head.js doesn't seem to work.
So I tried commenting out all the head.js stuff and used a standard tag for each JS library. And it works as expected. But when using Head.js, it fails if the "alert('hi')" is commented out. Obviously, for production, I want to remove this alert but then I get this error message: "ReferenceError: $ is not defined" ... ??? But if I uncomment out the alert, then it all works and pulls data from the DB ???
Any thoughts?
<head>
<title></title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js">
</script>
<script type="text/javascript">
head.js(
/* root level */
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
"/assets/scripts/external/_references.js",
"../../assets/scripts/external/jquery.unobtrusive-ajax.min.js",
"../../assets/scripts/external/jquery.validate-vsdoc.js",
"../../assets/scripts/external/jquery.validate.min.js",
"../../assets/scripts/external/jquery.validate.unobtrusive.min.js",
"../../assets/scripts/external/knockout-2.3.0.js",
"../../assets/scripts/external/modernizr-2.6.2.js",
"/assets/css/Index.css",
"assets/css/OrangeCounty.css"
);
</script>
</head>
<body>
<div id="list"></div>
<script>
alert('hi');
$.getJSON("http://localhost/webapi/api/ccc", function (result) {
$.each(result, function (i, field) {
$("div").append(field.Code + " " + field.Country1 + "<br/>");
});
});
</script>
</body>
The alert() stalls the script execution enough for jQuery to actually load. Head.js loads the scripts in parallel and doesn't block, so you have to use it with a callback:
head.js(..., function() {
// Your code
});
Or put that code into a separate script file and put it after jQuery in your head.js call.
i've seen the other posts in regard to this, but the following method is not working for some reason.
onclick="parent.testing();"
now for the full story. i have an index.html that houses all the JS files. also within the index, i have an empty 'div' tag. with jQuery, i'm appending a page1.html file to the empty 'div'. so the index kinda looks like this:
<html>
<head>
<script files>
<script>
ready { function testing(){do stuff;} }
</script>
</head>
<body>
<div><iframe src="page1.html" (added via jQuery)></div>
</body>
</html>
now in the page1.html file, i'm trying to call a function when a link is clicked. but i'm receiving the following error:
Uncaught TypeError: Cannot call method 'testing' of undefined
i've also tried the following but they didn't work:
onclick="window.testing();"
onclick="window.frames[0].testing();"
Your parent page script isn't valid JavaScript, but assuming ready { ... }:
<script>
ready { function testing(){do stuff;} }
</script>
...is a simplification supposed to represent a document ready handler you are declaring testing() as a local function within that ready handler so it can only be accessed from within that ready handler. You need to make testing() global in the parent page:
<script>
$(document).ready({ /* your on ready stuff here */ });
function testing(){ /* do stuff; */ }
</script>
...and then you should be able to call it from the iframe using parent.testing().
If I understand your question, your problem it's your function is not called, right? So maybe a solution is to put this in your "page1.html"
<script type="text/javascript" src="your_js_file"></script>