Develop Reference

React window.addeventlistener doesn't work

I am trying to add spotify authentication to the single page application.
Here is my button click handler event.
var CLIENT_ID = '****';
var REDIRECT_URI = window.location.href;
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'user-read-email',
'user-read-birthdate',
'user-read-private',
'user-library-modify',
'user-library-read',
'user-follow-read',
'user-follow-modify',
'streaming',
'playlist-modify-private',
'playlist-modify-public',
'playlist-read-collaborative',
'playlist-read-private'
]);
var width = 450,
height = 730,
left = (window.screen.width / 2) - (width / 2),
top = (window.screen.height / 2) - (height / 2);
window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
console.log("window is open");
});
When authentication is performed should will work window.addEventListener('message')
Here is event listener:
componentDidMount() {
window.addEventListener('message', (event) => {
***console.log("Spotify Window sent event data.");
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
console.log(hash.access_token);
}
}); }
But it doesn't work. Where is the problem in here? The section marked with *** doesn't even work.
By the way I used this documentation: http://jsfiddle.net/JMPerez/62wafrm7/

It could be possible that, because Spotify is redirecting back to your page, the event is being fired before the component is mounted, which would mean the window isn't listening for it.
I would consider moving your window.addEventListener() code into your index.js file outside of any components.

Popup not closing from parent when modal box is called

I am having a problem with closing a pop window. My problem is unique in kind if I click Logout from the parent, it closes all the windows, but when I log out from a child, then I am logging out from Parent, so it does not close the other child windows that are open.
When I am logging out from a child and then I am logging out from a parent, I checked in console and it is not going inside the if block.
The only variation between when I am logging out from a child and parent window is if I logout from parent it will close all the window and redirect parent and if I logout from child first it will create modal dialog box on parent with message session time out.
When I am logging out from child I am getting an Invalid Session Id passed from server and then I am invoking function
showModalBoxForInvalidSessionInfo
In this when I am checking in console I am not get the awin and bwin variable value. They are setting to undefined. But if I call onLogout function directly it will get the actual value.
I am not able to understand what is the difference here why the value is not getting inside even when I am declaring it as a gloabal variable.
I am pasting my JS file for the refrence
var userName;
var sessionId;
var userName;
var userId;
var awin;
var bwin;
$(document).ready(
function() {
userName = getURLParameters('userName');
sessionID = getURLParameters('requestID');
userId = getURLParameters('userId');
var welcomeMsg = document.getElementById('welcomeMsg');
var text = document.createTextNode('Welcome ' + userName );
var img = document.createElement('img');
img.style.height = '16px';
img.style.width = '16px';
img.src = 'images/arrow.png';
welcomeMsg.appendChild(text);
welcomeMsg.appendChild(img);
//style="width:16px; height:16px;"
console.log("Ready");
var fullAuthUrl = authorizationUrl
+ "?requestType=getRoles&username=" + userId
+ "&requestID=" + sessionID;
console.log(fullAuthUrl);
jQuery.support.cors = true;
$.ajaxSetup({
cache : false
});
$.ajax({
url : fullAuthUrl,
dataType : 'text',
crossOrigin : true,
cache : false,
type : 'GET',
success : function(response) {
//console.log("Success");
var responseBodyFull = response.replace(/^\s+|\s+$/g, '');
//responseBodyFull = response;
if (responseBodyFull == "Invalid Session Id passed") {
console.log("Invalid Session");
showModalBoxForInvalidSessionInfo();
}
console.log(responseBodyFull);
enableOrDisableLinks(responseBodyFull);
}
});
});
function b() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
bwin = window.open(bUrl + userName + "&requestID=" + sessionId
+ "&userId=" + userId,'_blank',strWinProp);
}
function a() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
awin = window.open(aUrl + userName + "&requestID=" + sessionId + "&userId="
+ userId,'_blank',strWinProp);
}
function showModalBoxForInvalidSessionInfo(){
$("#modelView").dialog({
autoOpen : false,
modal : true,
buttons : [ {
text : "OK",
icons : {
primary : "ui-icon-heart"
},
click : function() {
$(this).dialog("close");
}
}]
});
$("#modelView" ).dialog("open");
$("#modelView").text("Session Timed Out");
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); // For the browsers IE6, IE5
} else {
alert("Error due to old verion of browser upgrade your browser");
}
}
function onLogout(){
if (awin && !awin.closed) {
awin.close();
}
if (bwin && !bwin.closed) {
bwin.close();
}
window.location = loginPageUrl;
}
HTML file is very simple having two buttons calling function a and function b and a menu from where function onLogout is called.
Somebody please help me on this.

overwrite window.open properties in opened window

I have a parent page which has a link which opens a new pop-up window with-out scroll.
the code is being used in parent windiow is:
ebayShowPopupWindow(this.href, '', 472, 320, 'no', 'no', 'no', 'no', 'no');
And method implmentation is:
function showPopupWindow(url, name, width, height, toolbar, location, status, scrollbars, resizable, menubar, left, top, customprops) {
var props = "";
if (width) props += ",width=" + width;
if (height) props += ",height=" + height;
if (toolbar) props += ",toolbar=" + toolbar;
if (location) props += ",location=" + location;
if (status) props += ",status=" + status;
if (scrollbars) props += ",scrollbars=" + scrollbars;
if (resizable) props += ",resizable=" + resizable;
if (menubar) props += ",menubar=" + menubar;
if (left) props += ",screenX=" + left + ",left=" + left;
if (top) props += ",screenY=" + top + ",top=" + top;
if (customprops) props += "," + customprops;
if (props != "") props = props.substring(1);
var w = window.open(url, name, props);
if (!is.opera && w && !w.closed) w.focus();
return w;
}
Now my question is: Can we overwrite window scroll property in the child window's page-load?
Reason for this: We have a page link being used by different teams and they restrict the scroll in the pop-window which hides some part of the page.
I was trying to some thing like this that did not work:
$(document).ready(function() {
var b = $.browser;
window.scrollbars = 'yes';
window.scrollbars.visible= true;
});

open window on click of button as modal dialog using javascript

I have to open a window when a button is clicked, as a modal dialog using JavaScript.
I have used window.open, but it shows me two instances, the parent page and the pop-up page.
When the pop-up page is open, then do not allow the user to click on the parent page.
function openWindow() {
var w = 950;
var h = 350;
var t = 0;
var l = 0;
var scrollbars = 1;
var modal = 'yes';
var reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
reportWindow.focus();
}

Your code line,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
is missing an '=' symbol after modal. It should be,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal=' + modal);
To open window as dialog box,
<html>
<body>
<script language="JavaScript">
function openWindow() {
if (window.showModalDialog) {
window.showModalDialog("http://example.com","name",
"dialogWidth:255px;dialogHeight:250px");
} else {
window.open('http://example.com','name',
'height=255,width=250,toolbar=no,directories=no,status=no, linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
}
</script>
<button onclick="openWindow();">Open window</button>
</body>
</html>
If the above code is not working, please use jQuery modal dialog. You can load any urls to dialog using an iframe.

"window.open" will not work. This command always just opens a popup wich is not "always" on top of its parent.
2 Options:
If you just want to let the user enter a search string you could use
prompt("Please enter a search string:", "");
If you have a complexe search form, you have to create a modal dialog for your own.
There are frameworks which provide this functionality (google for "jQuery") or you create it for your own. Should not be hard, tell me if you need some help!

ASP.NET Javascript: window.open won't work twice

I have an aspx page with a button. When the user clicks that button, the following javascript opens a new browser window (in this case, 'Reasons.aspx'). Works great. Here's the function for that part:
function ShowPanel(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url + '?LetterNumber=1&ReasonType=3', 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
Now here's where it gets funky. When this window pops up, there are some controls. One of which is a button, which triggers almost identical code to popup a third window (in this case, ReasonCodes.aspx). Only it won't work. Here's the code for that:
function fGetReasons(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url, 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
I've set breakpoints on the javascript. It does execute. Here's what's weird -- The above javascript executes, only I don't get a new window with ReasonCodes.aspx. However, I set a breakpoint in the page_load of ReasonCodes.aspx and all of it executes. So the javascript executes, the code-behind page_load of the third page executes, but I don't get a third page.
Instead, the second window (Reasons.aspx) refreshes. It's like my third window is somehow 'hidden'.
Can anybody tell me what's going on, or what am I missing?
Thanks,
Jason
PS -- I know 3 windows sounds like a lot, and it's not by choice. There's a business need here (this is a local intranet application) and I have to abide by the specs. Thanks.

The 2nd parameter to window.open is the name of the window. You are using the same name in both calls so it is attempting to use the same window. Change the name of the 2nd call and you should be fine.

Or use '_blank' name to open each time in new window!