how use global variable in javascript for main and newwindow - javascript

I have two jsp(one is main page, another one is new window) and single javascript file.
MainPage and New Window have 'Test' , 'ClickedCount' buttons.
First, I click 3 times in MainPage 'Test' button . Then i open New Window.
Now , i click 2 times in newWindow 'Test' button.
So totally i clicked 5 times.
each time i click, i count the button click in javascript.
But mainwindow shows only 3 times, --> getTestButtonClickedCount()
And new window shows only 2 times . --> getTestButtonClickedCount()
Here i use same single javascript file (count.js)
So how to get total clickCount both window (mainWindow + NewWindow) 'Test' button.
MainWindow.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="count.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Test" onclick="countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="getTestButtonClickedCount();"/>
<a href="#" onclick = "window.open('NewWindow.jsp','newwindow',
'width=400,height=200')">Click to open New window</a>
</body>
</html>
NewWindow.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="count.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Test" onclick="countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="getTestButtonClickedCount();"/>
</body>
</html>
count.js
var clickCount = 0;
function countTestButtonClick()
{
clickCount++;
}
function getTestButtonClickedCount()
{
alert("Total Number of clicked : " + clickCount);
}
Help me about this.
Thanks for your effort.

Remove the JS from the newWindow and change to
<input type="button" value="Test" onclick="opener.countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="opener.getTestButtonClickedCount();"/>
Alternatively if one window does not open the other, use a cookie to store the clicks, reading it in and updating it and storing it each time

Related

Reload the current page using Jquery and php after a function has been called

I am trying to reload the current page of this php through Jquery after the user has pressed the button. The function isset($_POST['submitGenZip']) gets called after the button is pressed but the Jquery is not able to run its function of reloading the page. The function isset($_POST['submitGenZip']) is only used to download a file (that is what the php does). It does not redirect to any page.
FirstPage.php
<?php
if(isset($_POST['submitGen']))
{
header('Location:Generate.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zip Files</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
...
...
...
<tr>
<form action="" method="post" role="form">
<td>
<input type="submit" name="submitGen" class="btn btn-primary" value = "GenerateZ" style="float: right;">
</td>
</form>
</tr>
...
...
</body>
</html>
<script>
$(document).ready(function(){
$("#submitGen").click(function(){
alert("ReloadThisPage");
});
});
</script>
You can load your page or any other using multiple methods.
You do not have to use PHP to reload your current page or location. You can just do it jQuery OR JS instead.
Using location.reload()
You can use location.reload(); to reload your page on click event
Read more about location.reload here
Using window.open()
You can also use window.open('Generate.php') this will help if you want to open the URL in the new window.
Using window.location
You can also use window.location = 'Generate.php' this will help if you want to open the URL in the same window.
Run snippet below to see it working.
$(document).ready(function() {
$("#submitGen").click(function() {
alert('Page will reload now')
location.reload();
});
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zip Files</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> ... ... ...
<tr>
<form action="" method="post" role="form">
<td>
<input type="submit" name="submitGen" id="submitGen" class="btn btn-primary" value="GenerateZ" style="float: right;">
</td>
</form>
</tr>
... ...
</body>
</html>
You can use HTML onclick Event Attribute
<input type="submit" onclick="location.reload()" name="submitGen" class="btn btn-primary" value = "GenerateZ" style="float: right;">
The user "AlwaysHelping" has helped me tackle the problem. However I would like to post an alternate solution. That is when the user downloads the file from the server, the request sent is sometimes slower than expected, the Jquery function runs during the same instance and the file is never downloaded. So I have kept a delay of 5 seconds in Jquery before refreshing the page.
<script>
$(document).ready(function() {
$("#submitGen").click(function() {
window.setTimeout(function () {
location.href = "FirstPage.php";
}, 5000);
});
});
</script>

How to open new page in new tab and redirect current page

New tab works good, but for some reasons current page haven't redirect (window.location from changeLocation() doesn't work)
function changeLocation() call success everytime when I click button, but location doesn't change.
Basically it seems like window.location doesn't work because of form submit (although I use target="_blank"). But if I add return false after window.location to function, I'm not able to submit form after changing location (because I'm already on another page) and also submit before changing location impossible.
Is this possible to make it works somehow? Thanks.
function changeLocation (){
window.location = "http://bing.com";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
This code works for firefox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "http://bing.com";
}
</script>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
google.com is being loaded in the new tab and the current tab us being loaded with bing.com
To solve it, you need to add setTimeout to function like this.
function changeLocation (){
setTimeout(function(){
window.location = "http://bing.com";
},200);
}
No ideas why, but it works perfect.
Dim returnUrl = Request.UrlReferrer.ToString()
Response.Write("<script> setTimeout(function(){window.location = """ + returnUrl + """;},200);window.open (""" + loginurl + """,'_blank');</script>")

How can I add one to a variable at the push of a button in javascript?

Im trying to add one to a variable on the push of a button in javascript. Here's what I have:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){add++}
document.write(add);
</script>
<br/>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
Well most likely the variable add is being incremented by 1 when you push the button. However that code isn't really doing what you want.
This is probably more like what you're after:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){
add++;
document.getElementById('numberField').innerHTML = add;
}
</script>
<span id="numberField"></span>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
When you do document.write(add) it's replacing everything in the body with the value of add.
We moved the "writing the value" piece of code into the function that is called when you press the button. This is so we redraw the number after it has been incremented.
By updating the contents of an html tag instead of the entire page, we don't loose the button. The html tag has the id numberField, and can be accessed with document.getElementById('numberField');.

Calling Parent Page JavaScript Function In An Iframe

I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow

how to count opened newwindows?

I want to count the number of opened new windows.
But, when i close the opened newWindow ,then reduce the window count.
My new window have closelink also.
May be i choose either closelink or browser close window.
Update
If i have open 2 new window, then i calculate currently opened window.
But, if any window i close using ( close link, or browser closewindow), now only one new window is opened.
Here i don't know, how to show the opened window count is 1.
Totally 4 files are : MainPage.jsp , newwindow1.jsp , newwindow2.jsp and windowcount.js
MainPage.jsp
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<a4j:loadScript src = "windowcount.js" />
</head>
<body>
<h:outputLink value="#" onclick="window.open('newwindow1.jsp','firstwindow','width=600,height=600');addWindowCount();">
<h:outputText value="new Window1"/>
</h:outputLink>
<h:outputLink value="#" onclick="window.open('newwindow2.jsp','secondWindow','width=600,height=600');addWindowCount();">
<h:outputText value="New window 2"/>
</h:outputLink>
<a4j:commandButton value="Get Window Count" onclick="getNewWindowCount();"/>
</body>
</html>
newwindow1.jsp
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Window</title>
</head>
<body>
<a4j:commandLink id="firstWindowCloseLinkId"
value="Close Window"
onclick="javascript:window.close()"/>
</body>
</html>
newwindow2.jsp
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Second Window</title>
</head>
<body>
<a4j:commandLink id="secondWindowCloseLinkId"
value="Close Window"
onclick="javascript:window.close()"/>
</body>
</html>
windowcount.js
var countNewWindow = 0;
function addWindowCount()
{
countNewWindow++;
}
function getNewWindowCount()
{
alert("Current opened NewWindow : " + countNewWindow);
}
Help me about this.
Thanks for your effort.
You can't.
JavaScript doesn't have access to other open windows, unless they were opened using window.open().
Just i add one more button and javscript. But i can't get the openedPopup window count.
MainPage.jsp
<a4j:commandButton value="PopupCount" onclick="countOpenPopups();"/>
And javaScript is :
function countOpenPopups()
{
var iCount = 0;
for (var i = 0; i < eWebEditPro.popups.length; i++)
{
if (eWebEditPro.popups[i].isOpen())
{
iCount++;
}
}
alert("iCount : " +iCount);
}
I refer this.
http://dev.ektron.com/kb_article.aspx?id=568
I think this script related to eWebEditPro.
Is possible to implement to normal browser link(FireFox,IE etc...)

Categories