I want to show a simple popup using alert() , however, only after the page is reloaded fully.
Right now, the popup, is displayed and disappears after a second or even less because the code is executed at the same time.
My code in the ajax success:
success : function( response ) {
location.reload();
alert(response);
}
How to make the code to be executed one after another and not at the same time?
If you reload the page, basically the JavaScript will essentially "reset", so nothing after the reload() call will continue to run. You may need to consider placing a variable in localStorage, and doing your alert on document.ready.
Here would be an example. Let's say that you want to refresh the page after the user clicked a particular button.
$(".myButton").on("click", function(){
localStorage.setItem("buttonClicked", true);
location.reload();
});
$(document).ready(function(){
// This function will run on every page reload, but the alert will only
// happen on if the buttonClicked variable in localStorage == true
if(localStorage.getItem("buttonClicked");
alert("you clicked the button!")
}
});
Related
I have a button that includes a location.href = "home.php" This redirects to the home page fine, however if this button is pressed i need a function to run from the JavaScript. I don't want to do a document load in JavaScript as this should only appear when a certain button takes you home. I need to POST value and say if(isset($_POST['value'])) I just cant get this to work.
$(function () {
$('#receiptButton').click(function () {
location.href = "home.php";
show_receipts();
});
});
i need the show_receipts(); to run once home.php is loaded. I believe using ajax is the correct way, but i cant redirect to the page and run the function.
I´m using AJAX to execute some server-side actions and refresh a table inside the page without reloading the page itself. All works fine at first view. But I wrote a function in PHP to send an email and execute it via AJAX. When I´m starting this action for a second time old responses gets triggered.
What exactly happens:
I´m clicking a Button to execute the "Sendmail-Action"
a Modal asks me if I want to execute the action and I´m clicking yes
a PHP-Script gets executed and sends the email
the Modal gets closed after the PHP-Script finishes (~2s)
the table (with emails and so on) gets refreshed and the status updated
What happens next:
I´m clicking a Button to execute the "Sendmail-Action" for the same
or another entry in my table
a Modal asks me if I want to execute the action and I´m clicking yes
the Event triggers twice / 4xAjax-Request instead of 2 (I can see it in my Chrome-Console)
the Modal closes and 2 Mails sended
What I´ve tried to get rid of this behaviour:
checked my JS with JSHint
checked my PHP-Code (no errors in apache error.log)
redesigned the PHP-Script (Sendmail), now the AJAX executes a function
tried different browsers
deactivated AJAX-Caching
completely deactivated Caching with Apache (correct Headers)
deactivated Session-Caching in my php.ini (I don´t use sessions)
unset all variables in PHP
cleared the cache for all of my browsers
checked all headers
searched several hours for solutions
More information about my setup:
jQuery 2.1.4
php 5.4
Apache 2.2
I can´t find a solution to my problem and maybe this is caused because I´m adding the content dynamically to the table. I had the same problem in the past and I´m thinking the Modal (which is also dynamic) triggers the click on the "Yes-Button" twice.
You can put your ajax click handler outside of that function:
$(document).on('click', '.email-resend, .email-send, .show-doc, .show-acc, .more-acc, .no, .yes, .termin', function(){
$.fn.doAction(classname, comEntry);
});
As you mentioned that you have placed this in the function. Instead you should put this outside of it:
$(document).on('click', '.bt-ok', function(){
$.ajax({
....
});
});
Edit by #pandora: Or just use a second function (in my case) like this:
$(document).on('click', '.bt-ok', function(){
$.fn.sendRequest($('#modal').attr('data-1'), $('#modal').attr('data-2'));
});
Then I can call the function like this and execute the AJAX:
$.fn.sendRequest = function(data1, data2) {
$.ajax({
url: 'target.php',
cache: false,
data: { gimme1 : data1, gimme2 : data2 },
success: function(response) {
// Show Error
if(response.length > 0){
alert(response);
}
// Reload Content
$.fn.Reload('','');
// Close Modal
$('#modal').css({'display' : 'none'});
}
});
};
I'm trying to add a simple popup window to my Django app. How it works is when I press the Yes button, it sends a request to my Django views. However, I want it to automatically close after I press Yes. Unfortunately, the problem with putting it directly in my "click" function is that it closes the window altogether without sending a request to my Django views.
That is why I wanted to add a variable "clicked". After the button is clicked, I want it to change the variable value to "true" so that I can run an if statement ultimately to close the window. For some reason, the popup window automatically closes when I try to open it. My guess is that the if statement is not working properly? Thank you for your help!
$(document).ready(function(){
var clicked=false;
var deleteid;
$('#yes').click(function(){
deleteid = $(this).attr("data-deleteid");
$.get ('../../delete_function/', {delete_id:deleteid}, function(data){});
clicked = true;
});
if (clicked = true){
window.close();
}
});
Close the window in the callback function of $.get.
$.get ('../../delete_function/', {delete_id:deleteid}, function(){
window.close();
});
Your if (clicked == true) is only running when the page is loaded, because it's not inside any event handler. At that point, the button obviously hasn't been clicked yet, so it doesn't do anything.
If you call window.close() directly from the click handler, it will close the window before the AJAX call has a chance to run. When you close a window, all script it was running, including any AJAX operations that were queued, are killed.
I am looking to check if a page has been refreshed or closed with jQuery or javascript.
What I have currently is I have some database values that I want to delete if the user either navigates away or refreshes the page.
I am using AJAX calls to delete the values.
Right now, I have the following code:
The handler:
window.beforeunload = cleanUp;
The cleanUp() method:
function cleanUp() {
// Check to see if it's an actual page change.
if(myActualLeave) {
$.ajax({
type: "POST",
url: "/api/cleanup",
data: { id: myLocalId },
success: function (data) {
console.log(myLocalId + " got removed from the database.");
}
});
}
// Reset the flag, so it can be checked again.
myActualLeave = true;
}
Where myActualLeave is a flag that I set to false when AJAX calls are made, so they don't trigger the beforeunload handler.
The problem I am running into is that when I click a link on my page, so for instance a link to Google, the window.beforeunload doesn't trigger. I may have a misunderstanding of this, but I have tried using jQuery's $(window).unload(...); and the onbeforeunload trigger as well.
What should I use to call javascript when:
the user refreshes the page,
when the user navigates away from the page, or
when the user closes the page?
Edit: It came up in a comment that I could use a click() jQuery handler to detect navigating away. I should have made it more specific that I don't mean when the user clicks a link only then I want it to proc. I want it to trigger when they change pages in any way. So if the address bar gets typed in, for instance.
You should try "onbeforeunload" :
window.onbeforeunload
But i think you can't put "active" (ajax call) code in this callback function. All you can do is defining a confirm modal window that will be displayed to the user before leaving like :
Are you sure you want to leave because...
So you should do as #Leeish said : put a code in the .on('click') of the link so it can launch the ajax call before sending to another page.
But for the "refresh" or "close" scenario, you can consider marking your database row as "draft" (or whatever) and if not saved when on the next page, delete the draft line.
I'm having major difficulties getting IE to run jscript code synchronously. Other browsers have no problems. Here's an example of the code:
function renew_order() {
$.ajaxSetup({async:false});
// These 3 lines are to disable 2 buttons and show a progress indicator. This never happens,
// which is the main problem.
$('#cancel_order_button').attr("disabled", "disabled");
$('#renew_order_button').attr("disabled", "disabled");
$('#renew_order_load').show();
// Make some Ajax call to do some processing
$.getJSON(url, function(json) {
$.each (json, function (type, name) {
new_order_id = json.OrderId;
});
});
// Close the modal box this is diaplyed on and display some results on the web page
$.modal.close();
display_new_order(order_list);
}
Basically, the code runs, the modal box is closed, and the results are displayed. But the buttons on the modal box never show as disabled while the process is running. This only seems to be a problem with IE.
Try using the prop function instead.
$(".example").prop("disabled", true);
And if that doesn't work do
document.getElementById("example").disabled = true
I don't think this has anything to do with synchronicity, since the buttons should be disabled before the ajax call is even made. Check for javascript errors in the console window -- my guess is you're running into something there.