We Keep Coding

Best Practice for closing browser window without waiting for ajax response

I want to open a window, make an ajax call and close the window.
I want to do it as fast as possible and i was wondering if i have to wait for the ajax response before closing the window?
Currently i'm doing it like this:
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
timeout: 30000,
always: function () {
closeWindow();
}
});
However, i was wondering if the ajax will reach the server 100% on all browsers if i will do it like this:
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
timeout: 30000,
always: function () {
}
});
closeWindow();
//THIS HAS CONFIRMED TO NOT WORK AND MISS OUT SOME REQUESTS
closeWindow() implementation is irrelevant.
The full usecase is as follows:
I send a user a link on Whatsapp/Telegram/Messenger
User clicks the link
Browser is open -> issue an ajax call -> closing the window.
EDIT
To clarify, i don't care what was the server response for the call. I just want to make sure that the browser issued the HTTP GET to the server and then close the window.
EDIT 2
AJAX is not a must, also, better to use vanilla JS

You can do it like you said, send the ajax request and close the window, since it's async methods, it will make the call, if you wanna be absolutely SURE, write a little PHP script that writes something in a file with a little sleep at the top to check that it made the call, but it will do it.
Edit : or use this method and close the browser in the done function, it will take 1ms or so

following function can close your tab after 1 sec, without waiting for the ajax response
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false,
});
setInterval(function(){
close();
}, 1000);

I believe that if you want to know when your request was launched you could use .ajaxStart as explained here.
$(document).ajaxStart(function() {
console.log('Ajax call started');
closeWindow();
});
Or you could try some raw js like the solution explained here.

I guess the answer was at the back of my head: use an Image object to send the request and close the window right after:
var img = new Image();
img.src = urlWithParamters;
img.onload = function () {
closeWindow();
};
img.onerror = function () {
closeWindow();
};
//safety:
setTimeout(closeWindow,5000);

Since you are using JQuery, you can use the "done" callback option, and set your function inside so the window will close if the request was successful.
$.ajax({
url: requestURL,
type: 'GET',
dataType: "json",
cache: false
}).done(function() {
closeWindow();
});
You can also use the "fail" callback option to manage potential errors.

To call a Javascript function when browser tab closed and not when refreshed/reloaded

I have a django project and the following function is my Javascript code. What I intend to do is, before the browser tab is closed I want to clear some database entries in the backend. The following code serves the purpose if before I close the tab I do not refresh the browser tab. But if I do refresh the browser tab before I close it, this function gets called and my database entries are cleaned cause of which nothing is displayed on my web page anymore.
window.onbeforeunload = closingCode;
function closingCode(){
var ip="{{ip}}";
clearDB(ip);
return null;
}
function clearDB(ip)
{
$.ajax({
url: '/clearDatabase/',
type: 'GET',
data: {'ip':ip},
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {
},
error: function (){
}
});
}
How can I call this function only when the tab is closed and not when the page is refreshed/reloaded?

window.open doesn't work in http post angular

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)

window.open with target '_blank' opens a new browser window

I am trying to open an link in new browser tab (not in new window).
When I place an link on page like
Click Here
when user click on link it will open google in new browser tab. That's fine
BUT
$.ajax({
type: "POST",
url: someURL,
data: {somedata},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
window.open('http://www.google.com', '_blank'); // it's always open in new browser window and I want a new tab
},
failure: function (response) {
alert(response);
return;
}
});
When I try this within an AJAX web method, it always opens it in new browser window; but I want to open it in new tab as it's working for above example.
I understand this is browser specific functionality but somehow I need to accomplish this.

try this
onclick="window.open('http://www.google.com', '_self');

well it is browser specific, i tested it on mozilla and is working fine, but on chrome it open in new browser window. You can suggest to chrome makers or call ajax synchronus.
use async:false will work.
NOTE: In IE, open new browser window is default behaviour. user need to set settings explicitly

You have to play a little trick here.
You have to create a hidden a link tag with target='_blank' and set the href of this link tag on ajax success and then trigger the click of this link tag for eg.
HTML code
hidden
Js code
$.ajax({
type: "POST",
url: someURL,
data: {somedata},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var hiddenLink = $("hidden_link");
hiddenLink.attr("href",response.href);
hiddenLink[0].click();
},
failure: function (response) {
alert(response);
return;
}
});
Here is the working fiddle for above code

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.