This is something that I've been looking for for a while. When I'm debugging my ajax applications I have to keep reloading the whole page, even if the only changes I made were on the server.
For example, in my current application, there is Tinymce being loaded, jQuery UI, I have to click one dialog, to click another to click another. What I would love is the ability in something like Firebug to right click the request and select 'resend' especially when the only change I made is on the server e.g. print_r( $_POST );
The closest I've gotten to this ability is in Firebug on the Net tab, right click the request and click 'open in new tab', which is nearly there - but not quite
You need to replay the HTTP request, thats something firebug isn't meant to do. You need fiddler to get the work done. Fidder2 even has a Firefox addon. You can replay your request using fiddler.
Related
I am trying to add a onbeforeunload to my code so it fires a message that is sent to a server. I am encountering the following issue:
On page refresh, the message is sent to the server when using Firefox. It does not send a message to the server when I refresh the page on Google Chrome.
When clicking on links on my site to navigate to different sites, the server gets a message only when using Chrome. Firefox does not send a message when clicking on external links.
I also know that onbeforeunload is supposed to work when the window is closed, you enter a different website and navigate to that. There are some additional cases which also trigger the function. My site does not work with any of these along with the errors mentioned above.
If there a fix to this? If so, what can I do? I have looked around to fixes but I only get fixes where it prompts the user on whether they want to leave the page or not, I do not want that.
Additionally, I tried adding the function call to onclick on my external links but that is not being triggered on Firefox. I am guessing this is due to the amount of time onbeforeunload has before it is cancelled. If so, there a way around this?
Lastly, if this is not possible with onbeforeunload, what are my other options without prompting the user if they want to leave or not.
Thanks in advance!
EDIT: Here is some code that can be used:
https://jsfiddle.net/985drboy/
Make sure, that your code sending the message to the server is blocking and not async. If onbeforeunload returns before your message is sent, you get undefined behavior e.g. your message might not be sent if the page is unloads before the sending was complete. The browser continues unloading as soon as unbeforeunload returns.
I am using Django v1.10 for an application where in need to send an API call just before browser close through crude javascript (don't want to use any library for sake) preferably. I've read about window.unload and window.onbeforeunload. The first one didn't seem to work at all. The second can work but it also gets executed when there is reload or redirection to another page (it works as it should but that is what I don't want). I've tried using SESSION_EXPIRE_AT_BROWSER_CLOSE of Django which works only when a user has totally exit out of the browser (no browser process running). I've also seen answers on the web where people have suggested to open another window/tab of the browser through JS as the tab closes.
So in precise words, I want to make an API call just before browser tab close (not in any other situation).
Please help!
I am currently trying to manually develop an unsaved changes warning in our JSF-based Webapplication. Sadly our customer does not like the styling of the default warning displayed via an alert() after using the onbeforeunload event and requires us to develop a similar mechanism on our own.
I was thinking of using the way described here to prevent the onbeforeunload event from displaying the alert() and simply showing my own modal panel. I just can't figure out how to make the "Yes" (yes, I want to leave this page and lose all unsaved changes) button work. The button should basically resend the request which lead to the onbeforeunload event which could have been a HTTP Request as well as an Ajax Request. How would one do that via JS?
Thank you :)
Cheers
//edit: It needs to work in IE9 as well as Chrome 38
This is not a Meta question.
I am trying to technically understand what principle is hidden behind the following behaviour. It's very easy to reproduce:
Vote up/down anything on this page1,
Click on any other link on this page,
Come back by pressing the back button.
Your upvote is not there anymore as well as any AJAX activities having appeared on the page.
Why is that? Why is the browser acting like so? How could StackOverflow prevent that?
1 If you are not connected, just wait for someone else's activity on the page (new comment, answer, vote) before moving page.
It’s the browser’s cache that is at play here.
Since you’re asked how SO could “prevent” this, it could be done by advising the browser to check for whether the document has changed every time. But SO not doing so, for performance reasons. So the HTML document is seen as “still valid” for a certain amount of time, during which the browser takes it straight from its cache, without making a round-trip to the server.
If you look at the HTTP response headers in your browser’s developer tools for the request your browser made for this page, you will see something like this,
Cache-Control: public, no-cache="Set-Cookie", max-age=60
– so this HTML document is to be considered valid for 60 seconds. If you navigate away from it and back in your browser, or close the tab and reopen it from history, within that 60 seconds, the browser is supposed to take the cached version of it and display it, without checking again with the server whether or not something has changed. And since your vote did not manipulate this original HTML document (only the DOM was updated with your vote), you still get the previous vote count shown.
But if you press [F5] in your browser, the cache will be circumvented – it will request the document from SO again, and then you see your vote, because this time the updated numbers are part of the updated HTML document that SO serves you.
If you want to delve more into HTTP caching, some resources of the top of Google that seem worth a look:
Caching Tutorial for Web Authors and Webmasters
A Beginner's Guide to HTTP Cache Headers
You are not "unvoting", you just are not seeing your vote because your browser is caching the ajax request.
If your press F12 on Chrome, click on Settings icon and then "Disable cache (while DevTools is open)", when you press back the browser will resend the request.
To prevent that you must specify on your code that you never want that specific request to be cached.
You may want to check the following post:
Prevent browser caching of jQuery AJAX call result
-
Ps. You must stay with the Console (F12) opened while doing the test.
My situation is as follows: I have some Javascript code that I did not write myself, but I that I would like to get acquainted with (actually, I want to debug it). In particular, I am interested in what AJAX requests this code makes, and when.
This Javascript code I'm looking at is quite complex and lengthy and chaotic. So basically, just reading the source code or grepping the source code for this or that function call is not a good option. What I would like is some Firefox or Chromium plugin (whichever works) that does the following:
While loading the page and executing the Javascript, I would like it to catch any AJAX request that is made and tell me about it (most importantly, what URL is being called, though knowing what POST parameters etc. are travelling along that request would be useful as well). It would be awesome if it actually stopped before each execution of an AJAX request, told me about it, and asked me if it should proceed. But I would also be happy even if it did nothing else but simply print each URL that the Javascript sends an AJAX request to into a console or something.
Any suggestions?
You can do this in Chrome without needing any plugins, or in Firefox with the Firebug plugin:
side-note: when I say "XHR" I mean "XML / HTTP requests", which is what ajax requests fall under.
In Chrome
Just open your Dev Tools (F12), and go to the Network tab (second tab in Chrome 32). From the moment you open the tab on, all requests are logged there. Click the third icon at the top of the Network tab (says "filter" when hovering over it) and then select the "XHR" filter, which will limit it to just XHR.
You can also right click in your Console tab and select the "Log XMLHttpRequests" option, which will then log all XHR in your console too.
In Firefox
Open your Firebug, and open your Net tab (second last tab), and click "Enable" in it (default is disabled). From the moment you enable the tab on, all requests are logged there. At the top bar within that tab, you can click the button that says "XHR" to limit it to XHR only.
You will also by default see all XHR in your console in Firebug.