Call ajax on browser close, not url change - php

I want to insert logout time stamp when user does not manually logout from application i.e., if user closes browser without logging out from the system, the system should log out on browser close event or any other solution to do the same using jquery, ajax, and php is welcomed. I tried following code:
<script type="text/javascript">
window.onbeforeunload = function() {
$.ajax
({
url: 'logout.php',
data: "",
type: 'post',
success: function()
{
.....
}
});
}
</script>
But window.onbeforeunload function() is logging me out everytime the url changes in webkit browsers like chrome, as it's characteristics. I need some cross browser solution. I saw various que-ans on stackoverflow itself regarding this issue but i couldn't find any solution which helped me in my case.
And i also need to mention that in logout.php i use the code for session termination and insert query in database as well for logged-out timestamp.

I would like to suggest following code for ajax call on browser close.
<script type="text/javascript">
window.onbeforeunload = function() {
var ticketId = $('#ticketId').val();
$.ajax({
url: '/ticket-window-close/'+ticketId,
type: 'GET',
async: false,
timeout: 10000
});
};
</script>

Related

script inside bootstrap modal

Something weird - I have the script inside the bootstrap modal.
sometimes the script is loaded and works and sometimes it doesn't.
here is a URL for example:
https://ns6.clubweb.co.il/~israelig/sites/followmyroutes/test_sec.php
Click on the button and see the modal, then close the modal and open it again. After the couple of times, the scripts inside the modal stops working (scripts like form validation [when you submit it], image browser)
How can I fix it so all the script will work every time?
The way you populate the html is right or not suggested to be advised by coders. Check again from where you got the documentation.
your existing code from backend call
$(document).on('ready', function() {
$("#input-8").fileinput({
});
});
Try changing like
$(document).on('ready', function() {
setImageUploader();
});
function setImageUploader(){
$(document).find("#input-8").fileinput({
});
}
And also
$.ajax({
cache: false,
type: 'GET',
url: 'itinPage-secManage.view.php',
data: info,
success: function(data) {
$modal.find('.modal-body').html(data);
setTimeout(function(){ //added this line.
setImageUploader()
})
}
});
i think the problem in the syncronisation of the request, you can use Ajax reque
It looks like your common libraries like jquery bootstrap-datepicker, fileinput theme etc are being get every time the modal is launched.
This may cause a sort of namespace corruption or some weird side effect of the kind you seem to see.
You could put all the common libraries outside of the modal to prevent this from happening.
the problem in the ajax request, I means you maste waite while the request it's done.
var request = $.ajax({
cache: false,
type: 'GET',
url: 'itinPage-secManage.view.php',
data: info
});
request.done(function(data) {
$modal.find('.modal-body').html(data);
});

ajax append causes javascript to be executed multiple times

I've created a dynamic table in PHP, where every image in a row has a specific url in the ID.
For example:
When a user clicks on this image, it executes an action. This works fine.
Afterwards, in the second ajax, it's supposed to reload the colorbox with the previous url. This also works, however, the javascript seems to be loaded again (with the new values though)?
$('#cboxLoadedContent img[alt="markmessage"]').live('click', function(){
var returnurl = "<?php echo $_SESSION['returnpage']; ?>";
var markurl = $(this).attr('id');
alert(markurl);
// Do the action
$.ajax({
method:'GET',
url: markurl,
cache:false
});
// Reload colorbox again with previous contenturl.
$.ajax({
type: 'GET',
url: returnurl,
dataType: 'html',
cache: true,
beforeSend: function() {
$('#cboxLoadedContent').empty();
$('#cboxLoadingGraphic').show();
},
complete: function() {
$('#cboxLoadingGraphic').hide();
},
success: function(data) {
$('#cboxLoadedContent').empty();
$('#cboxLoadedContent').append(data);
}
});
});
</script>
Is there any way to PREVENT the javascript from being re-appended to the colorbox? I've tried a few methods (like removing it with DOM), but nothing seems to work...
The javascript may NOT be disabled, it's supposed to process a new url afterwards...
Try to replace live to one in first line:
$('#cboxLoadedContent img[alt="markmessage"]').one('click', function(){
Try the simple click event binding. Here you only bind it to the selected elements, not to new appended elements. If you want the event to be fired only once, use one.
I'm not sure which version of jQuery you are using, but live() is deprecated as of 1.7, you might want to try using on().

Send AJAX request by clicking a link without redirecting user

I have a web application which features a bunch of different items, which are generated from a MySQL table. As users scroll through it, I want them to be able to click a link next to the item which will insert the request into a MySQL database. Normally, I’d do this by creating a PHP page (which I will do anyways) that grabs the item name & user id from the URI using the $_GET method & inserts it into the table. However, in this case, I don’t want the users to be redirected away from wherever they are. I just want the link to send off the request, and maybe display a small message after it is successful.
I figured jQuery/AJAX would be best for this, but as I’m not too familiar with it, I’m not sure what to do. Any tips are appreciated!
You have to do something like
$('.classofyourlink').click(function(e){
e.preventDefault();//in this way you have no redirect
$.post(...);//Make the ajax call
});
in this way the user makes an ajax call by clicking a link without redirecting. Here are the docs for $.post
EDIT - to pass the value to jQuery in your case you should do something like
$('.order_this').click(function(e){
e.preventDefault();//in this way you have no redirect
var valueToPass = $(this).text();
var url = "url/to/post/";
$.post(url, { data: valueToPass }, function(data){...} );//Make the ajax call
});
HTML
<a id="aDelete" href="mypage.php">Delete</a>
Script
$(function(){
$("#aDelete").click(function(){
$.post("ajaxserverpage.php?data1=your_data_to_pass&data2=second_value",function(data){
//do something with the response which is available in the "data" variable
});
});
return false;
});
See http://api.jquery.com/jQuery.ajax/
$('#my-link').click(function(){
$.ajax({
url: "mypage.php",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
return false;
});
$('.classOfYourLinkToBecliked').click(function(){
$.ajax({
type:'GET',
'url':'yoururl',
data: {yourdata},
processData: false,
contentType: false,
cache: false,
dataType: 'json',
success: function(response){
alert(response);
}
});
});

First ajax call doesn't work

I'm trying ajax for the first time but it doesn't work.
This is "some.php" which handles the ajax call:
<?php
echo "success";
?>
And this is the javascript that calls it:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
var msg;
$.ajax({
type: "POST",
url: "some.php",
data: ({ })
success: function(msg){
alert( msg );
}
});
</script>
Can you see where the problem is?
I should state I'm working under wordpress and both files reside in \wp-content\themes\twentyten (maybe the url in the ajax call is wrong?)
First of all remove the data:({}) which is pointless. you are also missing a , behind your data statement. this is most likely the issue.
if both the files is in the same directory, then the url should be correct.
However, i urge you to use a tool like FireBug in order to debug your problem further
You should run your script when the page has loaded (more precisely, when the DOM is ready). jQuery offers an event for that.
Your code could then look something like this:
$(document).ready(function(){
$.ajax({
type: "POST",
url: "some.php",
data: ({ })
success: function(msg){
alert( msg );
}
}
});
Two things to do:
register a .fail callback. The code as it is will just call the alert() if it succeeds, otherwise, errors are not raised. See http://api.jquery.com/jQuery.ajax.
check the web server log to see if some.php is exec'd and if so, what errors may be occurring on the server.

jquery ajax post - not working first time page loads

I have some ajax/jquery code in one of my pages and the problem I'm having is that it doesn't work the first time the page is loaded. If I refresh the page it works no prob. It does work in firefox first time. All the variables that I'm using are ok as I've alerted them out. I don't get a success or error message. It justr doesn't appear to do anything?
Any ideas?
$('.window .request').click(function (e) {
var itm = document.getElementById('txtItm').value;
var qty = document.getElementById('txtQty').value;
var msg = document.getElementById('txtMessage').value;
var op_id = document.getElementById('txtOp_id').value;
$.ajax({
type: "POST",
url: "do_request.php?msg="+msg+"&itm="+itm+"&qty="+qty+"&op_id="+op_id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
document.getElementById('div_main').style.display='none';
document.getElementById('div_success').style.display='block';
var row_id = document.getElementById('txtRow').value;
document.getElementById('row'+row_id).style.backgroundColor='#b4e8aa';
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error submitting request.');
}
});
});
It's hard to determine what the problem might be given the information and it sounds like you've not fully tested the page in a consistent manner. It seems likely there is another element on the page affecting the click event, as opposed to the handler logic itself, but there's no way to tell. Make sure you are binding to the click event after the page is ready:
$(document).ready(function(){
$("#uniquedomid").bind('click',function(){
// click handler logic
});
});
Also, as you're new to JQuery, one thing you're going to want to start looking at are all the various ways in which JQuery can improve your life. It does almost everything. But for starters, you're going to want to start using:
$("#uniquedomid")
Instead of
document.getElementById("uniquedomid")
And
$("#uniquedomid").val();
Instead of
document.getElementById("uniquedomid").value

Categories