Javascript functions within Dojo script run without being called - javascript

I am feeling quite stupid about this, but I have a named function within my main Dojo require script that my intention was to run when called by a click event. However, the function runs on loading the page and does not run on the click event.
<script>
require(["esri/map", "dojo/domReady!"], function(Map){
var map = new Map("map");
testNode = document.getElementById("testNode");
testNode.onclick = test();
function test() {
alert("test");
}
}
</script>
<body>
<div id="testNode">Click Here To Test</div>
<div id="map></div>
</body>
As soon as the page loads the "test" alert pops up and nothing happens on the click event.

When you type
testNode.onclick = test();
You're calling the function test and passing the return value of the function to testNode.onclick. You should instead assign a reference of the function test to testNode.onclick:
testNode.onclick = test;

Related

window.location.href not working on my form

I create a web app that looks like this:
When i click the run model, i want that the form :"Dashbord", will open.
The JS code:
<script>
window.onload = function () {
function newDoc() {
window.location.href("#http://127.0.0.1:8100/#dashboard");
}
}
</script>
When The "Run Model" button onClick activate the function: newDoc().
The problem is: that in my URL path it is written: http://127.0.0.1:8100/#dashboard
but the 'Dashboard' form is not logged. it stays in the same page.
What should i do?
window.location.href is not a method, it's a property.
Try assigning it instead (also note, I removed the leading # character)...
window.location.href = "http://127.0.0.1:8100/#dashboard";
You also need to move your function outside of the window.onload event...
window.onload = function () {
}
function newDoc() {
window.location.href = "http://127.0.0.1:8100/#dashboard";
}
The onload event handler is generally only needed when you're dealing with specific elements on the page that won't be available until the page has finished loading.
By putting the newDoc within the onload event, you were effectively hiding it from being used directly by other events.

Modify Confluence's body element

Why won't this work in Confluence:
AJS.$("body").attr("onload", AJS.$("body").attr("onload") + " myFunction()");
I want to append my own function to the onload attribute of the body element but when I add this code to the Main Layout, Confluence just ignores it. When I try this code using the Chrome debugger, it works just fine.
Edit: I guess I should be a little more clear: The above code seems to work when the Confluence page is loaded the first time. But when the page enters into edit mode, the custom script isn't executed.
As a general rule, wait until the whole page has loaded. In some cases, in particular when plugins are manipulating the DOM, you may have to put in a delay of a second or two before your script runs.
Using JQuery:
{html}
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#comments-section").hide();
});
</script>
{html}
Using JavaScript:
{html}
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
var ele = document.getElementById("comments-section");
ele.style.display = "none";;
})
</script>
{html}
Well, it may depend on many things. For example whether myFunction is already available at the moment when the onload handler wants to execute it.
But why don't you use a more standard way of achieving this:
AJS.$(document).ready(myFunction);
or if you really want to react on the load event
AJS.$(document).load(myFunction);
Base on a discussion with an Atlassian developer, "The proper way to execute a function when the page is loaded is: AJS.$(function($){ ... your code ... });"
This does work for the initial page load but when the page goes into edit mode, this doesn't get executed. Several console.log outputs confirm this.

How to call a function in javascript without HTML?

This is the function
function seeHTML(elem){
var htmlTxt=document.getElementsByTagName('html')[0].innerHTML.toString();
elem.value=htmlTxt;
}
to call i use HTML
<input type="button" value="See HTML" onclick="seeHTML(txt)">
how to call it from another function as document.write
document.write(seeHTML(txt));
-- im a javascript begginer
however i tried document.write but it prints the function data itself, it doesnt use the function, how to ask it to use it then print the return (result)
function foo(element) {
seeHTML(element);
}
function seeHTML(element) {
}
foo(document.getElementsById('element'));
in JavaScript code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", call_your_function_here);
</script>
Here we created an event listener it means when the document is fully loaded the function() will be called, using the same way you can add any event listener to any DOM object, ex. you have a button with id="test", var btest = document.getElementById('test'); then
btest.addEventListener('click', function() { //execute code if btest object was clicked });
Bottom line you should call your function when the document is fully loaded hence replace the call_your_function_here() with your function name and if you wanted to reference the same button your function was embedded in use this syntax to reference the button DOM object:
var buttonObj = document.getElementById(buttonID);
then supply buttonObj to your function's argument.

JavaScript scope error, variables undefined

Please look at this code:
<script>
var mygrid;
function lock(){
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function doInitGrid(){
mygrid = new SomeClass;
}
</script>
</head>
<body onload="doInitGrid()" dir=rtl>
<div id="mygrid_container" style="width:905px;height:550px;"></div>
<script>lock();</script>
<button onclick="addRow()">Add Row</button>
<button onclick="removeRow()">Remove Row</button>
<button onclick="lock()">lock Row</button>
</body>
Why when I run lock function (Without the button), my var is undefined, and when I click on the button everything is ok?
This is a timing issue, not a scope issue.
You call doInitGrid() only onload so it won't assign a value to mygrid until after the document has finished loading.
When you call lock() inline, you do so as the document loads.
Presumably you have waited until the document has finished loading before clicking on the button.
If by "my var is undefined" you mean that the variable mygrid is undefined, that's because you initialise it inside the function doInitGrid() which is not called until onload of the page. The onload event happens after the whole page has finished loading. Other inline script runs when the browser encounters it as it parses the document.
I am not sure when you have called the lock function without clicking button. But it appears that that the doInitGrid function was not executed when you have executed the lock function. The below code may work
function lock(){
if(!mygrid){
doInitGrid();
}
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
You are calling load() before the document gets loaded completely. So your variable is not assigned as doInitgrid is not yet called.(it gets called only after document is fully loaded)
You are instantiating mygrid inside the function doInitGrid() which is called only on onload. But your script statement <script>lock();</script> executes before the page is loaded as it is part of the page HTML. When this script block executes, the value of mygrid is undefined which is the default value set by JS for all variables declared without an initial value.
If you want to call lock() when the page loads up, call it on onload after the call to doInitGrid() like this:
<body onload="doInitGrid(); lock();" dir=rtl>
Quentin has answered your question, But I'd like to add that it would be better to clean up your code a bit. Something like this.
<script>
function lock(mygrid){ //pass in the grid var
for (var i=1; i<15; i++)
{
var cur_row=i + "";
mygrid.lockRow(cur_row,true);
mygrid.setRowColor(i,"#E5E5E5");
}
}
function getInitGrid(){
//some initialization code here maybe. Otherwise just take this out
return new SomeClass;//return an instance
}
var mygrid = getInitGrid();
//and then pass in the mygrid variable wherever you call lock
lock(mygrid);
</script>

How to pass argument if event handler is assigned in initialization function?

It is always good to separate presentation layer and behaviour between HTML and Javascript based on head first book.
They tell me not to do:
<textarea onclick="showAlert()"></textarea>
But instead, do below:
The example below separate the behaviour from HTML code (structure).
<html>
<head>
<script type="text/javascript">
window.onload = init;
function init() {
$('txt_area').onclick = showAlert;
}
function showAlert(say) {
alert(say);
}
</script>
</head>
<body>
<textarea id="txt_area"></textarea>
</body>
</html>
This allows HTML (structure) to look clean and "behaviour" part is initialized in init() function when page loads. I understand that so far.
But then I wonder how am I supposed to pass an argument to showAlert() function???
Below does not work, it will call the showAlert() as soon as the page loads and this is not what I want to because it needs to be fired onclick.
function init() {
$('txt_area').onclick = showAlert("hello");
}
Is it possible to pass arguments to showAlert() function but still separate the behaviour and structure?
UPDATE
Forgot to mention.. I'm using prototype.
Wrap your code in a function.
$('txt_area').onclick = function() {
showAlert("hello");
};

Categories

Resources