window.open doesn't work in http post angular - javascript

Here's my code:
$rootScope.http({
url: myUrl,
method: "POST",
data: "",
}).success(function (data) {
alert(data.uri); //for test, and I see correct uri shows up here.
window.open(data.uri, ''); return false; //window doesn't open.
});
The window.open doesn't work inside the .success, but it does work outside the http post method. Something is wrong when comes to callback function. I met very same issue in $.ajax and fixed it. But same solution doesn't work here for angular.

We faced the similar problem before and the reason is simple; in the most of the modern browsers, browsers will not allow the window.open() call which are not the direct result of user activity.
Here, your window.open() is being triggered in an asynchronous call which is not being called by a user action, for example: clicking on a link or a button.
You can fix this problem by disabling the popup blocker but we have to notify the user that their popup blocker is enabled. For that, you can do something like this:
$rootScope.http({
url: myUrl,
method: "POST",
data: "",
}).success(function (data) {
$rootScope.popupWindow = window.open(data.uri, '');
$timeout(function() {
// Check if popup blocker is enabled by verifying the height of the new poup
if (!$rootScope.popupWindow || $rootScope.popupWindow.outerHeight === 0) {
alert("Please disable the popup blocker");
}
}, 1000);
});
(Note: I've tested this is a browser, not sure in the mobile but this should work)

Related

Ajax call on onbeforeunload event doesn't work (Firefox only)

I need to make an Ajax call when a user leaves my page.
I don't need to wait for the end of the call, I just need to notify my server with a kindly "hey, user XXX is leaving the page", without notifying the client.
Here is what I've done so far :
window.onbeforeunload = function () {
$.ajax({
type: "POST",
url: myURL,
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ xxx: xxx, yyy: yyy })
});
}
This perfectly works with Chrome and Edge, but this event is not raised on Firefox.
What I've done so far :
I tried this SO answer, as the author claims it works and has a good score, but once again, my ajax call is not fired.
Add async: false without any success
Also tried to use beforeunload instead of onbeforeunload
Can anyone explain me how to fire my Ajax call when an user leaves a page, no matter he uses Chrome, Edge or Firefox ?
Thanks in advance ?

alternate method for window.open

I have a js function, when I give async as false it opens as new
window,
but when i give async as true its showing as pop up
I need to make the code as async as true, but it should open as new
window not as pop up
can you guys tell me how to Make a asynchronous request so that the
new window willnot load as a popup.
is there any alternate method for window.open
providing my code below
//
debugger;
Ext.Ajax.request({
async: false,
url: sports.util.Utils.getContextPath() + '/tabClicks.do',
Your code is a little bit weird so it's hard to make the adjustment properly but this is gist of it:
showNewWindow: function(menu) {
var me = this,
newWindowId = sports.util.Utils.randomString(12);
//
// Make a synchronous request so that the new window will
// not load as a popup.
//
debugger;
var popup = sports.util.Utils.openNewWindow('', 'menu', {}, null, null, newWindowId);
Ext.Ajax.request({
async: false,
url: sports.util.Utils.getContextPath() + '/tabClicks.do',
params: {
oldWindowId: sports.util.Utils.getWindowName(),
newWindowId: newWindowId
},
success: function() {
popup.location.href = "/desktop/main";
},
scope: me
});
},
Popup blockers try to tell when a window is being opened in direct response to a user action or spontaneously by the application. The way they probably do this is by checking whether the function that called window.open() was run in response to a user-triggered event like a mouse click.
When you perform a synchronous AJAX request, the function that was triggered by the mouse click is still running when the response arrives and the success function calls window.open. So it's considered to be a user-requested window, not a popup.
When you use asynchronous AJAX, the click handler is no longer running when the success function runs. The asynchronous call to window.open is considered spontaneous by the browser, so it blocks it.
I don't think there's any way around this, because anything you could do could also be used by everyone else to get around popup blockers, and they would be useless.
function openNewWin(name) {
$.ajax({
async: false,
type: 'POST',
url: 'your url',
success: function () {
window.open(name);
},
async: false
});
}

Javascript / Ajax Redirect Issues

Very new to code in general so apologies in advance if i dont explain myself properly,
But I have a form, that actions a piece of JavaScript on submit.
If the form validates successfully then it calls a php file for server side processing.
Once the server side processing is complete the php file returns some data (a url) which the user is then redirected to (client side)
This all works fine on desktop (chrome, IE, FF) and via modern mobile devices, however the redirect is not working on some devices (blackberry for one), and a i assume other older devices. Instead of the redirect URL going straight into the address bar, it is being placed after the url of the original page - as such causing the user to be redirected to a page that of course doesnt exist.
Below is the script that is called on submit. Again apologies if none of the above makes sense...I am very new to all this:
$(function () {
$('#wait').hide();
$('form#leads_form').on('submit', function (e) {
if (validateFrm()) {
$(":submit", this).attr("disabled", true);
$('#wait').show();
var jqxhr = $.ajax({
type: 'post',
timeout: 300000,
url: 'sell-save-leads.php',
cache: false,
data: $('form').serialize(),
success: function (data) {
//alert("Submit success: " + data);
window.top.location.href = data;
}
});
} else {
//alert("validation errors");
$('#wait').hide();
}
e.preventDefault();
});
});
If anyone is able to help or offer some advice that would be great.
As your form is located in an iFrame I suggest you to use this jQuery plugin to send messages from an iframe to its parent:
http://benalman.com/projects/jquery-postmessage-plugin/
With this you could send a message from inside your success function, containing the new url, and catch it in the parent window.
You can also use
window.top.location.assign(data);
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window.location

window.open(url) not opening new web page in the same tab

window.open("index.php"); does not open the new page in the same tab, it opens it in a new tab.
I tried window.open("index.php",'_self') as well which does not open the tab at all.
Here is my code :
$.ajax({
url: "login.php",
type: 'POST',
data : "username="+name+"&password="+pwd ,
datatype :"text",
async: false,
cache: true,
timeout: 30000,
error: function() {
return true;
},
success: function(msg) {
if(msg == "Validated")
{
alert(msg);
window.open("index.php");
}
if(msg=="Incorrect password")
{
alert(msg);
location.reload();
}
}
});
Instead of window.open you should use window.location = "http://...."
The window.open function opens a new window(or tab). The window.location changes the url the current tab.
window.location is the function/property you should look at.
window.open will open in new tab if action is synchronous and invoked by user. If you remove async: false from ajax options (and this method is invoked by user for example by clicking a button), then new window will open instead of new tab. For simple navigation set window.location.href
As far as I know, window.location doesn't do this. The right method to do this is:
document.location = 'url-you-want-to-open.ext';
Best thing is to either include the full path (if it's on a different domain) or the absolute path if it's on the same domain. Only use relative path if the destination document is in the same folder.
To add to this:
window = speaks to the browser and its tabs
document = speaks to the current document that's loaded in the browser / tab.

process a page on UnLoad?

I need for a php file to process when the user click a link/go back/exits a page. Its part of a saving user info process. if i do a jquery unload how would I fire the php file to load and process.
jQuery(window).bind("unload", function() {
// what should i add?
});
$(document).ready(function() {
$(':input',document.myForm).bind("change", function() {
setConfirmUnload(true);
}); // Prevent accidental navigation away
});
function setConfirmUnload(on) {
// To avoid IE7 and prior jQuery version issues
// we are directly using window.onbeforeunload event
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
if(Confirm('You have entered new data on this page. If you navigate away from this page without first saving your data, the changes will be lost.')) {
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
}
Make sure you have upgraded version of jQuery. jQuery version 1.3.2 had a bug:
Ticket #4418: beforeunload doenst work correctly
Or use native function:
window.onbeforeunload = function() {....}
I'm guessing a synchronous AJAX call might work.
$.ajax({
async: true,
url: '/foo/',
success: function(data) {
// Finished.
}
});
Of course, keep in mind there's no guarantee any of this will ever happen. My browser may crash. My computer may even power down. And of course I may disable JavaScript. So you'll definitely need a server-side way of handling this in case the convenient JavaScript technique doesn't actually work.
You should use the beforeunload event. You can fire a synchronised ajax request in there.
$(window).bind('beforeunload', function() {
$.ajax({
url: 'foo',
async: false,
// ...
});
});
Be aware that onbeforeunload is not supported by some older browsers. Even if this technique works, I'm not sure how long you can (should?) block this event. Would be a pretty bad user experience if that request would block a few seconds.
A good trade-off is probably to tell the user that something has changed what was not saved yet. Do this with a few boolean checks and finally return a string value in the onbeforeunload request. The browser will then gracefully ask the user if he really wants to leave your site, also showing the string you provided.

Categories