OnChange Event foriFrame on HTML with Onload Event - javascript

I have SAP system where I can integrate HTML page. This HTML page is launched on Button Click.
Button click changes the value of Iframe source every time.
As I understand the basic, I wrote the below code which is working fine on the first click. The HTML page gets loaded.
<!DOCTYPE html>
<html>
<body onLoad="myFunction()">
<iframe id="myFrame" src="http://www.w3schools.com/" height="1000" width="2000" frameborder="0"></iframe>
<script>
function myFunction() {
document.getElementById("myFrame").src = sap.byd.ui.mashup.context.inport.FirstName;
}
</script>
</body>
</html>
When I click second time the value for sap.byd.ui.mashup.context.inport.FirstName changes, but there is no change in the Iframe.
I saw there is something called onChange event, but I am not able to write use it correctly. Can anyone help me to do this?

An ugly solution would be to constantly check if the value of the FirstName, in order to check for changes.
<script>
var _firstname;
function myFunction() {
document.getElementById("myFrame").src = sap.byd.ui.mashup.context.inport.FirstName;
_firstname = sap.byd.ui.mashup.context.inport.FirstName;
}
setInterval(function() {
if (_firstname != sap.byd.ui.mashup.context.inport.FirstName)
myFunction();
}, 1000) //check every second to see if FirstName value changed
</script>
But I would definitely recommend calling myFunction() from wherever you change sap.byd.ui.mashup.context.inport.FirstName to avoid the use of setInterval. If you can change the value of a javascript object, you should be able to make a function call too. I suggest you research how to call a javascript function and just call myFunction() right after you change FirstName. Then you will not need the setInterval.

Related

Basic HTML JavaScript function not working as intended

I'm wandering if anyone can help. Im doing some rather basic JS for a project but I'm an idiot and not sure how to do this element.
I've used an opensource word highlighting program i've found online which works when i input a string to be highlighted, but when i input "input_id.value" which is a working (tested) value of an input box, The highlighter doesnt work. I thought it could be that it's not updating i.e it only runs once so it will try to highlight no value as nothing has been inputted.
This is the code snippet:
<script type="text/javascript" src="../Resources/hilitor.js"></script>
<script type="text/javascript">
var input = document.getElementById("input_id").value;
// global variable
var myHilitor;
document.addEventListener("DOMContentLoaded", function() {
myHilitor = new Hilitor();
myHilitor.apply("fox");
}, false);
</script>
This works correctly and higlights "fox" as shown in this image.
However when i change
myHilitor.apply("fox");
to
myHilitor.apply(input_id.value);
nothing is highlighted at all. I tried putting the whole thing into a function like an idiot but that also doesnt work
<script type="text/javascript" src="../Resources/hilitor.js"></script>
<script type="text/javascript">
function searchFunction(){
var input = document.getElementById("input_id").value;
// global variable
var myHilitor;
document.addEventListener("DOMContentLoaded", function() {
myHilitor = new Hilitor();
myHilitor.apply("fox");
}, false);
}
</script>
The function is called by
<button onclick="searchFunction()" class="button"></button>
I'm truly dumbfounded, any help would be very appreciated. Thankyou :)
Thanks all for the helpful contributions, Problem is solved I'm waiting to be able to accept answer
document.addEventListener("DOMContentLoaded", function() { causes a function to run when the DOMContentLoaded event happens (which is about when </html> is parsed as the document loads).
You haven't shown how searchFunction is called, but odds are that it is when a button is clicked.
That will happen after the DOMContentLoaded event has occurred so the condition for the function running never happens.
Don't include that condition.
Your variable is called var input but you're using input_id here myHilitor.apply(input_id.value) ;
You have declared var input = document.getElementById("input_id").value;.
But while calling myHilitor.apply(input_id.value); you are passing input_id.value. You should pass just input.
Like myHilitor.apply(input);

JavaScript function callable without onclick?

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.

click on an image link when a web page is opened using javascript

I'm new in Javascript and this is my code
<!DOCTYPE html>
<html>
<body>
<img src="http://www.example.com/1/img" border="0" />
<script>
function () {
document.getElementById('test').click();
};
function();
</script>
</body>
</html>
I was trying to open that link when the web page is loaded but I make some errors. Any help?
The way you define and invoke function is not correct. This is invalid syntax construction as function declaration (statement staring with function keyword) requires a name to be valid javascript code.
So you either give function a name an invoke it:
function somename() {
document.getElementById('test').click();
};
somename();
.. or use IIFE (immediately-invoked function expression):
(function() {
document.getElementById('test').click();
})();
However, in your case you don't really need as you don't use it for what it's really useful, i.e. creating new scope. Simple line
document.getElementById('test').click();
would be just enough.
You don't need the example function... remove onclick="example(this)...". Since you are clicking via javascript, the normal function of the click is to go to the link specified in the href attribute anyway.
If you just want to open a new link on page load, you can also remove all the body and just use the following:
<body>
<script>
window.location.assign = "http://example.com";
</script>
</body>
Do it like this:
<!DOCTYPE html>
<html>
<body>
asdf
<script>
document.getElementById('test').onclick();
function yourfunction(){
alert("clicked");
}
</script>
</body>
</html>
What we do here is assigning the function "yourfunction()" to "onclick" of your anchor (the element). Due to the fact that your code is automatically executed when you reload the page (note that we've just posted a line of code into the script tag) you can trigger the onclick event just by using ".onclick()".
However, you're executing "yourfunction()" every time you reload the page and as you click your anchor.
The function itself is pretty boring. It just makes an alert (small window with a message and ok button) which says "clicked".
Further reading:
How can I trigger a JavaScript event click
https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onclick
https://developer.mozilla.org/de/docs/Web/API/Window/alert
Some further advice. I think you are trying to achieve a "redirection" to another site as soon as you got to a domain. You probably want to do stuff like redirecting a typo ("gogole.com") to your "real" domain (google.com). This shouldn't be done with Javascript! You have to configure your webserver to do so (it's pretty easy). See this for example.
However, ther is also another approach to achieve this:
<meta http-equiv="refresh" content="0; url=http://www.example.com/">
Put this line of code into the of your document.

.aspx page JS will fire Onload scripts before controls seem to be rendered for some reason

I have code which will fire on load, and fetch the object based on the ID. It returns null.
<script type = "text/javascript">
$(function(){
var TV = $find("FieldTreeViewer");
});
</script>
<body>
<telerik:RadTreeView OnClientNodeExpanded="nodePopulating" OnClientNodeClicked="checkLeaf" runat="server" ID = "FieldTreeViewer">
</telerik:RadTreeView>
</body>
It seems that onload will return null, but if i go into the console and reenter the var TV statement, it will assign it. I figure that the Control was NOT rendered yet. How would I go about making it so that the page renders BEFORE firing the function?
I am aware of asp having onLoad, onInit, etc, but this is purely markup, there is no magic behind the scenes.
I just thought that markup would render, and then when the page finishes loading, i could call a function to reference the control by ID.
Try executing your code on window.load instead, as so:
$(window).load(function ()
{
var TV = $find("FieldTreeViewer");
});

JavaScript variable scopes

I found a bunch of other questions about this topic, but for some reason they did not solve my "problem".
I have this little script I made of pure interest - and it works just fine, but something is bothering me. The script clears a text field onFocus and types "Write here" if nothing is entered onBlur. The script is as follows:
<html>
<head>
<title>JavaScript</title>
<!--Scripts-->
<script type="text/javascript">
<!--
function noValue() {
var _value = document.getElementById('input').value;
if (_value == "Write here") {
document.getElementById('input').value='';
}
}
function changeValue() {
var _value = document.getElementById('input').value;
if (_value == "") {
document.getElementById('input').value='Write here';
}
}
function dontLeave() {
var c_box = confirm("Do you want to leave?");
if (c_box == true) {
die;
}
else {
history.back;
}
}
//-->
</script>
</head>
<body onUnload="dontLeave()">
<form>
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()">
</form>
</body>
</html>
As you can see the variable _value is used twice - in "noValue()" and "changeValue()". This is what I want to change.
I thought that you could access a global variable from inside a function by not declaring it inside the function fx:
var i = 1;
function foo(){
i++;
return;
}
and the output would be 2 if you call the function. But when I declare and initialize the variable outside the function, the variable does not work from inside the functions - how come?? Have I misunderstood something here? :)
I also have another question:
As you can see I added a confirm box when you leave the page (I know this is annoying, I do not intend to use it, this is just an experiment) but I don't know how to not leave the page if the client presses "Cancel". How do I do so? :)
EDIT The first part of my problem is now solved - thanks!
But theres still the last part about the annoying confirm-box; does any of you know how to stop the client from leaving, so to speak?
To answer your first question, your problem with initializing _value is probably one of timing. By placing _value outside of a function, that line of javascript will be executed immediately. Since the javascript is in the head section, it will be executed before the input element has been loaded into the document. You can put that one line of javascript at the end of the document, after the input element has been loaded, such as this:
<body onUnload="dontLeave()">
<form>
<input id="input" type="text" value="Write here" onFocus="noValue()" onBlur="changeValue()">
</form>
<script type="text/javascript">
var _value = document.getElementById('input').value;
</script>
</body>
Now the javascript variable "_value" will be set properly and available to all of your javascript functions "globally".
Well, you can declare it outside the functions, but you need to update the value upon each function call (that is, each event). If you don't, then how will your event handlers know what it is?
If you put this line...
var _value = document.getElementById('input').value;
... outside of the functions, it will be in scope within the functions. I think the problem you're having though is that placing it there will cause it to be executed before the DOM is ready, and hence your 'input' element doesn't exist yet. Try either waiting for a dom load event, or place that script at the very bottom of the page (just inside the </body> tag).

Categories