AngularJS 1.2.13
var httpdelete = $http.delete("/api/categories/" + id);
httpdelete.success(function(data){
alert("Success");
});
httpdelete.error(function(data, status, header, config){
alert("Error!");
});
I do an asynchronous $http.delete request
The success callback function is executed and the alert box "success" appears.
I hit the browser refresh button
The $http.delete line is not executed (debugged with break points). Instead the error callback function is immedialy executed. The alert box "error" appears. No request made it to the server after clicking on the browser's refresh button
I was expecting the entire page to reload when I hit the browser's refresh button.
Instead, AngularJS seems to attempt to resend my last delete query without having to execute $http.delete and goes straight to the error callback.
How can I restore the natural behaviour of the browser's refresh button? I want it to reload the entire page and not attempt to resend the last asynchronous http request.
Open the network tab of the chrome dev tools. Load your page and hit F5. If you don't see a get to your index.html (or whatever your base url is), it's because angular handled it. If you do see the get, the you have rebooted the app for real.
Once you know which one it is, you can investigate further. Setting a breakpoint in the httpdelete callback and inspecting the callstack might also help.
Okay so here is what happened, my backend Nodejs+Express+MongoDB delete action was not returning anything to the client (browser). I didn't think it was necessary to return any information after deleting the document from mongodb.
The side effect of that is as I described in the original post. After deleting the document on the server, if a user refreshes the page using the browser refresh button then the page is not refreshed. Instead the $http.delete request is resent to the server and on top of it the error callback is executed.
After modifying my server side action and make it return a json document such as { success: true, message: "" } after a delete request, the browser's refresh button behaves as it should have which is to reload the entire single application page index.html.
Related
I am trying to make a button cancel a document request from the server while it is loading, I've tried window.stop() on Chrome but it does not prevent the page from reloading. I've also tried those lines but they get me back a blank page, which is not what I want, I need just to stop the request, as if pressing the Esc key.
document.write('<script type="text/undefined">'); or
document.write('<!--');
When I click the button and immediately press the Esc key I get the result wanted
edit: coming back to this question after some time, what I meant was actually:
"How do I prevent a request from loading the response sent by the server in user side"
We really need to see the code you are using to initiate the "document request from the server".
Here is a cool way to cancel if you are doing this type of request.
What about using abortable-fetch.
Nice demo here.
The solution to my problem was redirecting to:
http_response_code(204);
So the page stayed as it was before making the new request and but I was still able to use it normally. Thanks to those who answered anyways, the abortable fetch was also an solution.
I have the following js function that sends a post request back to the main index page. This script is working in Chrome but is not sending any parameters in firefox while still posting back to the page. I am verifying this via the network tab after inspecting the page in firefox.
function addDrive(ans){
$.post("index.php", {add_drive: ans });
location.reload();
}
This function is called via a onClick on a button I have placed on my page:
<button onClick="addDrive('y')">Add Drive</button>
I have used similar functions in the past that have worked for both firefox and chrome and I just cant figure out why this does not work in firefox.
My suggestion would be doing something like this :
function addDrive(ans) {
$.post("index.php", {add_drive: ans}).then(function() {
location.reload();
});
}
This would ensure that you reload the page only after successfully finishing the post request. You could also provide a success handler instead if you prefer that instead of using this promises API. You could also do the same in an always handler to ensure it reloads the page even if the request fails but that would be subjective to your requirements.
However, I would argue that this doesn't look like good practice at all, if you have to reload the page you could just have a form and post that instead of trying to post using the jquery handler. You could do something like form.submit() in javascript and that would submit the form and it would submit the data in the form by a post request as long as the method on the form is set to 'POST', that way you don't have to reload the page manually and you can do that from the server end.
Try to reload your page after successful post:
$.post("index.php", {add_drive: ans}).done(function( data ) {
location.reload();
});
So basically I want to be able to tell the difference between when an ajax call failed naturally (eg 404, server down, etc etc) and when it has been canceled by the browser, eg when a user closes a tab or hits f5.
I listen for failed ajax attempts and display an error dialogue, describing the error when ajax fails. However when someone presses f5 (especially noticeable in firefox), the error callback of not yet complete ajax calls occur, then displays errors and while the page loads the user is stuck looking at the error dialogue until the whole page is torn down by the browser (which is not nice to look at, when in reality it doesn't matter that the ajax call failed because the whole web app is being reloaded).
I have examined the xmlHttp request object, and nothing stands out to me as a way to tell the two situations apart. I have also tried adding a delay, but this hasn't really worked so well either. So I am just wondering if it is possible, and if so how?
I found a work-around. If you set a window.onbeforeunload handler, that will get called before the ajax error. So, if you set a flag that the document is unloading, you can check that flag before showing your ajax error and skip the error if the document is in the process of unloading.
Works for me with jQuery 1.11 in Firefox, Chrome and IE.
You can see it work here: http://jsfiddle.net/jfriend00/G3wat/
var unloading = false;
$(window).on("beforeunload", function() {
unloading = true;
});
Then, in your ajax calls:
error: function(jqXHR, status, err) {
if (!unloading) {
alert("Error status " + status);
}
And, as you found, it appears that jQuery 2.x does this for you.
[Function Summary]
The screen is redisplayed by Callback function of JavaScript when click the LIKE button.
[Symptom]
Acess sites displayed the Like button using the HTTPS protocol.
Click The Like button, then Comment column displays at div tag and processing stops.
We expected below results.
When the Like button is clicked,
the information are asynchronously transmitted to Facebook site and Callback functions of JavaScript are called
and then each processing are executed.
Callback function : FB.Event.subscribe('edge.create', function(response) { -- each processing --})
[Question]
Error Message "407 Proxy Authentication Required" displays when we access following page.
https://s-static.ak.facebook.com/connect/xd_arbiter.php
(xd_arbiter.php)
I consider this error caused by follwing reasons.
- The information is not returned from 'xd_arbiter.php.'
- Proxy-Authorization is not granted.
Please let me know workaround for avoiding this error.
[Environment]
Protocol:https
Browser:ForeFox15.0.1
Application Server:WebSphere Application Server 7.0.0.11
OS:Windows2003 Server
The jQuery load function is nice but how do you handle session timeouts?
I used it to add new content into a div but if my session times out, the login screen appears in that div instead of in the complete page.
Is there any way to handle this?
I am using it in JSP pages.
Should I replace it all by jsp:include pages and refresh the page every time I need to adjust the page or is there a way to do this with the jQuery load function and handle session timeouts properly?
I have tried validating the session before the call, but since there isn't any call to the server, the session still seems valid until the load request finds out it has expired.
So session is not null in the current page, but when the load is executed to retreive the other page, it will get the login page instead.
I suppose your login page is a redirect. Then you can use the complete callback (third parameter, see doc) to check the response.
I encountered the same problem, and resolved it. So I am going to share my own answer.
At first I wanted to check if the response code is 301, but you cannot catch 301 redirect in the complete callback. It just throws 200, which is the result of redirection.
So I, instead, read the xhr.responseText and check if it starts with "<html>". Because if it is, it means that the response contains redirected login page instead of the modal contents.
$(".modal-wrapper").load("/modal" + e, function(response, status, xhr){
if (xhr.responseText.trim().startsWith("<html>")) {
console.log("redirect to login page");
window.location.href = "/";
}
});
Actually, instead of window.location.href = "/";, what I wanted to do is, document.write(xhr.responseText); so that the unnecessary request could not be made. But I counldn't achieve this due to some UI problems ;P