JavaScript function callable without onclick? - javascript

I am new in a project and we are using thymeleaf combined with JavaScript.
I wrote functions which delivers the background color depending on the availability of the choosen element. I have to copy more or less the functionality of "th:disable" for a div, since this functionality is not available for a div. Unfortunately, my functions are never called, I assume the reason is because I have no onClick event or something, I want to call the function it the "th:styleappend".
<div th:styleappend="|background-color: getBackgroundColor(${element})|">
<script type="text/javascript" th:src="#{/js/gridstack-logic.js}"></script>
<script th:inline="javascript">
function getBackgroundColor(element){
console.log("##############in getBackgroundColor");
if(kachel.bool1&& bool2){
return rgba(153,168,177,0.05);
}
return "${element.backgroundcolor}";
}
</script>
I tried several things but none of them was working

Please look at the "onLoad" events in the next page:
onLoad Event
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
And also for the changes made on the webpage you could assign onChange event, on eahc of the items that you are trying to verify if changes.

Related

How to select new loaded elements in jQuery without any event

I am working on a jQuery project which a part of page is loaded by choosing different options usign load() method.
I have this line in my application:
$('.pe').myFunction();
This code must be executed without any event. So I can not use any code like this:
$(document).on('click','.pe',function(){...});
It works well on all preloaded elements with pe class.But it does not work on new loaded contents which have same class.
Can you help me please?
The arguably correct way of doing it is using $(document).on('.pe','click',function(){...});; however, I did program a fair amount before I discovered that. So, I know there are a couple of work around. I'd use a class to mark an item as 'completed' after adding a click event.
If you have any 'hook' to know when the new html is added you can simply call a function that instead of using an interval.
Note regarding the question: you did say no events and this uses no events.
//Simulating ajax loading
setInterval(function () {
$(document.body).append('<button class="clickable">So clickable!</button><br />');
},1000);
//Your code
setInterval(function () {
$(".clickable:not(.completed)").click(function () {
console.log('works!');
}).addClass("completed");
},10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="clickable">So clickable!</button>
</div>
Finally I found the answer. I just put the same code inside the loaded page.
// New page which will be loaded with its all contents ...
<script>$('.pe').myFunction();</script>

Click button on load event

I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.

AJAX that calls a "parent" function

I've seen a few questions like the one I'll ask but nothing identical. I have two html files, main and today. What I want to do is load today.html via AJAX into a child div in main.html. Sometime after load, I would like to call a function that resides in main.html from today.html
Within Main I have this function:
function drawCircle (size){
alert('DRAWING');
}
This AJAX load:
$("#leftofad").ajax({
url: ":Today.html?r="+genRand(),
type: 'GET',
success: function(data) { },
error: function() { alert('Failed!'); },
});
And this div:
<div id="leftofad"></div>
In Today.html I have
<script type="text/javascript">
$(document).ready(function(){
drawCircle (100);
});
</script>
The load is going well but Today.html doesnt seem to recognize the drawCircle function. I've tried several precursors including this., window., and parent..
I understand that I can use the callback method of the AJAX loader in jQuery but I don't necessarily want to call drawCircle when the load is complete. I may want to wait a bit or do it as a result of an action from the user. Is it possible to reference these functions from an AJAX-loaded div? If not, can I use an alternative method like events and listeners to fire the drawCircle function?
Since you will be loading JS into your page, try calling the function directly?
(The ready function won't run as the main page is already loaded)
Main.html
<script type="text/javascript">
function drawCircle(size) { alert("DRAWING" + size); }
$(function() {
$("#leftofad").load("Today.html?r="+genRand(), function() {
alert('loaded successfully!');
});
});
</script>
<div id="leftofad"></div>
Today.html
<script type="text/javascript">
drawCircle(100);
</script>
If this doesn't work, I strongly suspect that JavaScript returned in an AJAX call is not executed.
In this case, refer to: How to execute javascript inside a script tag returned by an ajax response
$("#leftofad").ajax is not proper.
jQuery's $.ajax function does not use a selector.
What you can use is load:
$("#leftofad").load("Today.html?r="+genRand(), function(){
alert('loaded successfully!');
});
Everyone here has some good answers, but I believe there is a knowledge gap and we are missing some information. If I were you, I would add an alert to the script in the Today.html file right before the drawCirle. Then I would run this page using IE or Chrome dev tools or Firebug in Firefox. When the alert is displayed you can put a breakpoint in the javascript code. Then check your global scope to try and locate drawCirle...
Sorry this is not an exact answer, but with javascript files you need to use debugging tools for this.
while there isn't really a document.ready function for a div, there is a hack that works just as if so:
create your returning data as a full html page:
<html>
<head>
<script type='text/javascript'>
$(document).ready( function () {
do-this;
to-that;
....
});
</script>
</head>
<body>
<%
your possible vbscript
%>
the rest of stuff to be loaded into that div
</body>
</html>
Then, you can have as many cascading div loading from different page loading and .... rinse and repeat ... forever .... EXPERIMENT with different DOCTYPE to see the different results.
EDIT:
Then, of course, you load the original MAIN with
$('#thedivid').load('url-of-the-html-returning-page');
Which, in turn, can have the VERY SAME call in the returning page document.ready as, for example; $('#thedivid-inthereturningdata-html-page').load('url-of-the-html-of-the-child-process-for-whaterver); .... and so on.
Go ahead, PLAY AROUND and make wonderful ajax based applications ....

How can I generate a click on a certain part of the page when the page loads?

Basically I want a certain spot on my page to be clicked when the visitor loads the page. I want this one click to happen without the user even clicking. Is it possible?
<script type="text/javascript">
$(document).ready( function() {
// target represents the id of the element you are wanting to be clicked.
$('#target').click(function() {
// your click handler logic goes here
});
// click the element for the user...
$('#target').click();
});
</script>
<div id="target">This is the element on the page that will be clicked on pageload</div>
UPDATE: This is using JQuery, which is a JavaScript library. Here is a script tag you can use to import JQuery in your HEAD section, if you're not already using it:
<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
...
</head>
http://jquery.com/
Using a JavaScript library, such as JQuery, will ensure that this functionality works cross-browser.
If you want to achieve the same purpose without using a javascript library you can use the following code:
<script type="text/javascript">
window.onload=function(){ //when the window loads
var paragraph = document.getElementById("google"); //store the object into a
// variable
//set the functions that will fireup when click happens - not necessary -
//for example purposes
paragraph.onclick = function(){
this.style.background="red";
}
paragraph.onclick(); //simulate click
}
</script>
<p id="google">Google text</p>
demo here: http://jsfiddle.net/9azTR/2/
You can fire specified event on DOM ready. You can to that using jQuery...
$(document).ready(function(){
$('#clickme').bind('click', function() {
alert('Here goes code you would like to perform');
alert('And another pieco of code, if you wish');
});
$('#clickme').trigger('click');
});
Agreed with #Felix Kling. If you are trying to simulate a click from a user on an object you can just invoke the function.
But from the way the question was worded it sounds like you want to simulate a click on an ad to generate revenue on your site? If so the DOM will not allow you to access another containing frame (e.g. an iframe) - that's a security violation.
If you want to that you would have to somehow hijack the user's mouse though an ActiveX control or other malicious means, which of course is unscrupulous.

javascript doesn't execute on window.load

I have a javascript that executes within a element like : <a href="javascript:doSomething();"> but it doesn't execute on window.load , anyone knows why does that happen ?
With the example above doSomething() will only be called when the user clicks on the anchor. If you want it to execute on window.load you need to put the code in the head. i.e.
<script type="text/javascript">
window.onload = doSomething;
</script>
Also, if you're going to be using the onload event a lot I would personally recommend getting jQuery and using it's 'on DOM ready' event. This way your javascript will appear seamless to the end-user and won't have a flickering effect.
Have you tried writing <body onload="doSomething();">?
Assuming you did all the other suggestions, there is always a chance that someone later in the code (after your either <body onload=... or window.onload = ...) did exactly the same, and has overriden you.
If it happens to be the case (low chance) the solution to support both of your onload hooks, is window.attachEvent("onload", doSomething)
If I understand your problem correctly, you want to set an attribute in an element, calculating it dynamically via javascript, so that when the page is loaded your link points to the return value of "doSomething()".
For that you can use javascript's DOM manipulation utility functions.
In your case something like:
<a id="myLink">my anchor</a>
...
<script type="text/javascript">
getElementById('myLink').href = doSomething();
</script>

Categories