We Keep Coding

Manipulate image source based on variable

I'm trying to get this to work:
I've got string variable in a file called test.js. Depending on some values the file is created by a php script and it says something like: var test = 'up' or: var test = 'down'.
Now, I would like display a certain image on my website depending on the value of var test. So in my html code I add this to the header:
<script type="text/javascript" src="test.js"></script>
Then in the body I write:
<script type="text/javascript">
function Test(){
if (test == 'up'){
document.getElementById("test").src = '/img/arrows/arrow_up.png';
}
else if (test == 'down'){
document.getElementById("test").src = '/img/arrows/arrow_down.png';
}
else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
</script>
And I add in the image with:
<img id="test" src="" class="test">
However, nothing is displayed on the page. Can someone help me out?

You have to call Test() somewhere, the code below executes it, when the page is fully loaded, so the other .js file has executed(test has been set) and the <img> is on the page.
var test = 'down';
function Test() {
if (test == 'up') {
document.getElementById("test").src = '/img/arrows/arrow_up.png';
} else if (test == 'down') {
document.getElementById("test").src = '/img/arrows/arrow_down.png';
} else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
window.onload = function() {
Test()
};
<img id="test" src="" class="test">

First of all, try to put manually a src to see if the src is correct :
<img id="test" src="/img/arrows/arrow_up.png" class="test">
If it works, you should call your Test() function somewhere :
window.onload = function() {
Test();
};
To make simplier, you can use JQuery (not obligatory) :
You should add jquery reference to your html page (depending on your scripts folder, the link can change) :
<script src="~/Scripts/jquery-3.2.1.js"></script>
And you can change your Test() methode on this :
function Test(){
debugger;
if (test == 'up'){
$("#test").attr("src", '/img/arrows/arrow_up.png');
}
else if (test == 'down'){
$("#test").attr("src", '/img/arrows/arrow_down.png');
}
else {
$("#test").attr("src", '/img/arrows/arrow_neutral.png');
}
}
Finally, to check if your test parameter is correct, you can put a debugger in order to debug your code in any browser.
If you open the developper tools of your browser, (by pressing on F12 on the browser) you can debug your code. The code will hit the debugger keyword.

show one popup window at a time

how to show only one popup at a time?
i have created one page called parent.html. On parent page, i have two links one is register and another is login.
if i click register then register page open as child window
but
if i click login then already opened child box(register) should close and login child window should open or all previously opened child box should disappear.
my code is as below
<input type="button" value="login" onclick="ShowPopup('login.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
<input type="button" value="register" onclick="ShowPopup('register.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
i replaced "popup" with "self". now only one child window open at a time instead of multi and working perfect.
but when i close child window, parent page is not refreshing.
child window code as below
<form id="form1" runat="server">
<input type="button" value="Refresh Parent" onclick="RefreshParent()" />
<script type="text/javascript">
function RefreshParent() {
if (window.opener != null && !window.opener.closed) {
window.opener.location.reload();
}
}
window.onbeforeunload = RefreshParent;
</script>
</form>
please help me out

First thing , there is no need to define variable & function again .. and now coming to solution as --
<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,
menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
In Your Child Page ,Head Section (To refresh parent window on close)
<script>
window.onunload = refreshParent;
function refreshParent() {
if(window.opener)
window.opener.location.reload(true);
}
</script>
By default, the reload() method reloads the page from the cache, but you can force it to reload the page from the server by passing parameter to true.
-- OR --
You can also some code in parent while you open a child window and look up for its child window if its close refresh itself..
<script type="text/javascript">
var popup;
var lookupTimer=null;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,
statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
lookupTimer = setInterval(function(){ loolUpChild(); }, 1000);
}
function loolUpChild()
{
if((popup.closed))
{
window.location.reload(true);
clearInterval(lookupTimer);
}
}
</script>

create a global variable and maintain your flag if previous popup is open then close first and open new
Like
if(popup){
popup.close();
popup=false;
}
after that open new
window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup = true;

Calling functions from different javascript files causing "undefined is not a function"

I'm trying to make some small changes to an existing vb.net website that was written by someone who no longer works for the company, but every time a javascript function is called from a script file other than the one it's defined in, I see "Uncaught Reference Error: undefined is not a function" in Chrome's console.
Some of the scripts are being loaded in the master file:
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="Scripts/JSExtensions.js"></script>
<script type='text/javascript' src="Scripts/GlobalUtilityFunctions.js"></script>
<script language="javascript" type="text/javascript">
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() {
}
</script>
And the rest are loaded in the page itself:
<script type='text/javascript' src="Scripts/GridCalcFunctions.js"></script>
<script type='text/javascript' src="Scripts/InputEventHandlers.js"></script>
<script type='text/javascript' src="Scripts/FocusHandlers.js"></script>
<script type='text/javascript' src="Scripts/ProjectPageFunctions.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
$(window).unload(function () {
SaveOnExit();
});
function setPIDNumberLabel(ctlID, strVal) {
var val = strVal;
var ctl = top.$get(ctlID);
if (ctl != null) {
ctl.innerHTML = val;
}
}
</script>
GlobalUtilitesFunctions has no trouble accessing JSExtensions on other pages, but does here even though both are loaded in the master. I thought that must mean that the problem is caused by one of the files loaded on this page, but commenting them all out doesn't fix the issue.
As a specific example, GlobalUtilitiesFunctions contains this:
function GetAttributeSelector(attName, attValue, attOperator,attNot) {
attOperator = String.deNullValue(attOperator, "=");
[more code]
}
And I get an error that String.deNullValue is undefined, but over in JSExtenstions is:
String.iifValueIsNullOrEmpty = function (val, trueVal,falseVal) {
falseVal = String.getArgValue(falseVal, val);
if (String.isNullOrEmpty(val)) {
return trueVal;
}
else {
return falseVal;
}
}
String.deNullValue = function (val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}
I've also tried running the site on a server (instead of inside Visual Studio) without solving the problem. Does anyone have an idea what might be causing this?

Here you can see this:
"A variable declared (using var) within a JavaScript function becomes LOCAL to the function.
The variable gets a local scope: It can only be accessed from within that function."
try to define functions like
function deNullValue(val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}

Run javascript function only for one time (first page load)

I'd like to run this javascript function only for one time (first page load). Is it possible? Thank you
<div id="pag">
<script type="text/javascript">
var framekiller = true;
window.onbeforeunload = function () {
if (framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
</div>

You should use global variables in javascript.
<script type="text/javascript">
window.framekiller = true;
window.onbeforeunload = function () {
if (window.framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
And put somewhere else, another javascript snipper, who turn this variable into false, and do other things.. eg opens a new link?
To turn it back to false, use:
window.framekiller = false;

How to use an external javascript file in asp.net

I wrote a script to hide and show a loader for my asp.net web application. The script works great when placed inline. I tried to extract the script to an external file and received the following error:
Error: The value of the property 'Pausing' is null or undefined, not a Function object
I tried to look up the error, but I was unable to find a solution to the problem. I am new to asp.net so it may be that I'm not sure how to search for the right question.
My inline code that works is:
<script type="text/javascript">
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') ||
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
</script>
The event call is attached to an asp:button control below:
<asp:Button ID="btnGetReport" runat="server" OnClick="btnGetReport_Click" OnClientClick="Pausing();" />
I removed the inline script and replaced with this...
<script type="text/javascript" src="../../Scripts/Loader.js"></script>
Added script to external file:
window.onload = initAll;
function initAll() {
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') || // asp page has no validator
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
}
Then I receive the previously mentioned error.
Any help would be greatly appreciated!

Always use ResolveUrl to call your script files like this
Lets assume your script is in Script folder of your root path with a file Name as MyScriptFile.js
<script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/MyScriptFile.js") %>"></script>
EDIT : you can use ResolveUrl or ResolveClientUrl based on your needs
ResolveUrl creates the URL relative to the root where as
ResolveClientUrl creates the URL relative to the current page.

Based on your question : How to use an external javascript file in asp.net
<script type="text/javascript" src="http://www.xyz.com/test.js"></script>