We Keep Coding

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)

IE Compatibility Issue Dynamic Loading Jquery Ajax

I am generating Dynamic Vertical Menu using Jquery Ajax.
The Code is working fine with Chrome, Firefox but it is not loading using IE. I am new to web development and Browser compatibility issues of IE.
The Demo Link is at pumpit.in
See the loader in the left menu. It is not appearing in IE. If you reload the Link, it may come.
The js code used is :
$.ajax({
type: "POST",
url: "Index.aspx/wmCommSubComm",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
beforeSend: function () {
// this is where we append a loading image
$('#container_leftns').html('<img src="/images/loading123.gif" alt="Loading..." />');
//return false;
},
success: function (msg) {
//retData = msg.d;
$('#container_leftns').html(msg.d);
return false;
},
error: function () {
// failed request; give feedback to user
//$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});
If anybody could guide me it would be very helpful.

After reading the result from your ajax call, you are returning some HTML5 elements such as "section". It works nicely in Firefox/Chrome and IE9. However, HTML5 tags are not supported for the version that less than IE9. They cannot recognize HTML5 tags. Please note that not all HTML5 are supported in IE9. Ref: HTML5 tags in IE9
For the version less then IE9, you can help them to recognize the HTML5 tags by including javascript fix html5shim / from github html5shiv.
-OR-
Change change the HTML5 tags to div instead.
Regarding to fix the loading image, I think we would do this work around.
HTML - Preload the loading image to the container and display it
<div id="container_leftns_loading" class="container_leftns">
<img src="http://pumpit.in/images/loading123.gif" alt="Loading..." />
</div>
<div id="container_leftns"></div>
JavaScript
$.ajax({
type: "POST",
url: "Index.aspx/wmCommSubComm",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
beforeSend: function () {
// use show instead and clear the leftns container
$('#container_leftns_loading').show();
$('#container_leftns').html('');
//return false;
},
success: function (msg) {
// hide the loading image when success
$('#container_leftns_loading').hide();
$('#container_leftns').html(msg.d);
return false;
},
error: function () {
// failed request; give feedback to user
//$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});

Open a new link in new tab in chrome

I am trying to open a link in a new tab on ajax success, but the link opens in a new window. How to forcefully open the link in a tab rather than in a new window in chrome with jquery or javascript.
Code:
$("#A1").click(function (event) {
$.ajax({
type: "POST",
url: "Home.aspx/btnTestProject",
data: "{'preview':'" + inventory + "' }",
contentType: "application/json; charset=utf-8",
datatype: "json",
cache: false,
success: function (response) {
window.open("TestnRun.aspx"); //opens in new window
}
});
window.open("TestnRun.aspx"); //opens in new tab
});

In general you cannot control it. As this is user preference to open link with target="_blank" in new window or tab.
When browsers starts supporting css-3 completely then you will be having an option in future:
http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target-new
You can use this:
#anchorId { target-new: tab ! important }

I saw the same thing.
And I've noted that (I'm using jquery.1.9.1):
if you call $.ajax in async, or % the browser (Chrome) open in NEW WINDOW, else if you run a JSON call SYNC the window will be open tabbed!
This open in a NEW WINDOW, pop-up:
$.ajax({ url: "/cliFindExist/",
async: true,
function(data){...
window.open("some.aspx","_blank")});
This open window TABBED
$.ajax({ url: "/cliFindExist/",
async: false, // <<<<<<<<<<<<< NOTE
function(data){...
window.open("some.aspx","_blank")});
JQuery may be change the way/context when it call the function? depending if it run a sync or an async call.

Use target "_blank" like this
My link
or with Javascript like this
<button onclick="window.open('http://www.google.it','_blank')">Button</button>

How can I determine the final link of url shortned link without loading within the page?

I have links of messages coming in, say in an email message body. The issue right now is I want to click on the content and be able to display the unwrapped link in the right message pane (I use jQuery).
I am using jQuery and figured that using AJAX to call another PHP script to send the requests to bit.ly, etc. would work. I am not 100% sure how to do this.
The main issue is that some of these links are 2-3 times shortened as Twitter has their own automatic shortner. Any help on this would be appreciated.
Thanks.

You could use a service called LongURL. The API call in jQuery would look something like this:
$.ajax({
url: 'http://api.longurl.org/v2/expand?format=json&url=http%3A%2F%2Fbit.ly%2Fv20RLs',
dataType: 'jsonp',
method: 'get',
success: function(response) {
alert(response['long-url']);
}
});
or
$.ajax({
url: 'http://api.longurl.org/v2/expand',
data: {
format: 'json',
url: 'http://bit.ly/v20RLs'
},
dataType: 'jsonp',
method: 'get',
success: function(response) {
alert(response['long-url']);
}
});