Solved

Need to run ajax when closing a browser tab in juery

Posted on 2016-07-25
1
51 Views
Last Modified: 2016-07-26
We have tried to insert the record using ajax when if user closing the browser tab. But the code i used didn't working. Please check below.
$(window).unload(function() 

	 var currentTime = new Date();
                var DurationInSeconds = (currentTime - PhotoLoadTime) / 1000;
                $.ajax({
                	 async: false,
                    url: "/property/SavePhotoDuration?propertyid=" + propertyid + "&imageid=" + imageid + "&seconds=" + DurationInSeconds
                }).done(function (rsp1) { });

    });

Open in new window


And here the full code for your reference,
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
var PhotoLoadTime = null;
var lastimageid;
var DurationInSeconds;

function setThumbnails() {
    
    var propertyid = unescape(getUrlParameter('propertyid'));
    $.ajax({
        url: "/home/GetPropertyData?propertyid=" + propertyid
    }).done(function (rsp) {
        var propertyData = JSON.parse(rsp);

        for (var i = 0; i < propertyData.length; i++) {
            var imageSrc = "" + propertyData[i]['imageThumb'];
            var fullImage = "" + propertyData[i]['image'];
            var address = "" + propertyData[i]['Address'];
            var description = "" + propertyData[i]['description'];
            var imageid = "" + propertyData[i]['imageid'];
            var TextColor = "" + propertyData[i]['TextColor'];
            $("#tn-list").append('<div data-color="' + TextColor + '" data-imageid="' + imageid + '" id="' + "image-" + i + '" data-image="' + fullImage + '" data-address="' + address + '" data-description="' + description + '" class="thumb"><img src=' + imageSrc + ' title="' + description + '"  /></div>');
            lastimageid = propertyData[0]['imageid'];
        }

        $(".thumb").click(function () {
            var imageid = lastimageid;
            lastimageid = $(this).data("imageid");
            if (PhotoLoadTime != null) {
                var currentTime = new Date();
                var DurationInSeconds = (currentTime - PhotoLoadTime) / 1000;
                $.ajax({
                    url: "/property/SavePhotoDuration?propertyid=" + propertyid + "&imageid=" + imageid + "&seconds=" + DurationInSeconds
                }).done(function (rsp1) { });
            }
            PhotoLoadTime = new Date();
           
            var image = $(this).data("image");
            var address = $(this).data("address");
            var description = $(this).data("description");
            var TextColor = $(this).data("color");
           
            document.getElementById('innerIframe').src = document.getElementById('innerIframe').src + "&imgSelected=" + image + "&address=" + address + "&TextColor=" + TextColor + "&description=" + description;
        });
        setIframe();



        $("#image-0").click();
    });

   
}

$(document).ready(function () {
    setThumbnails();

$(window).unload(function() 

	 var currentTime = new Date();
                var DurationInSeconds = (currentTime - PhotoLoadTime) / 1000;
                $.ajax({
                	 async: false,
                    url: "/property/SavePhotoDuration?propertyid=" + propertyid + "&imageid=" + imageid + "&seconds=" + DurationInSeconds
                }).done(function (rsp1) { });

    });


 
});

function setIframe() {
    
    var iframeUrl = parent.document.getElementById('panorama').src.replace("pannellum.htm", "pannellumInner.htm");
    document.getElementById('innerIframe').src = iframeUrl;

}

Open in new window

0
Comment
Question by:karthik80c
1 Comment
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41728835
This works for me
$(function() {
  $(window).on('beforeunload', function() {
    $.ajax({
      async: false,
      type: 'POST',
      url: 't1447.php',
      data: $('#dataform').serialize()
    });
  });
});

Open in new window

Working sample here
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question