Firefox return false; (preventDefault();) and window.location.reload(); together

Question

I think it very stupid question, but after hours of google it - i have no idea or solution. Point is that i need reload page after handling "click" event on my web-site. In chrome\opera it's works without problems. But in firefox i have some bug. My JS code with comments:

$('#project_create').click(function() {
  var projectname = $("#project_name").val();
  var projectdescription = $("#project_description").val();
  $.post("projects/add_project.php", {
    project_name: projectname,
    project_description: projectdescription
  });
  $("#create_project_form").hide("slow");
  $("#project_list").show("slow");
  //return false; - if it uncomment, all work, but next page reloader doesn't work.
  window.location.reload(); //but if it's work, FireFox doesn't send $.post-query
});

I need to work booth methods, because after click - script put in $_SESSION['my_var'] some variable, and it variable is avaliable after reload page only. Maybe there are other ways to do it? As I understand the problem here in features with firefox and preventDefault();

Thanks!

score 1 · Answer 1 · answered Dec 14 '14 at 13:06

When you do a return, code after that line will not be reached anymore and is considered "dead code". One does not simply put code after a return.

Another is that there's and issue when using return false to prevent default default actions. It prevents delegation/bubbling. Event handlers hooked higher up in the DOM tree (especially ones hooked with on()) won't be executed. If delegation matters, don't use it.

If your goal is to prevent the default action of the link and do stuff in JS, use event.preventDefault instead. The event object is passed in as the first argument in the handler.

$('#project_create').click(function(event) {
  event.preventDefault();

  // rest of the code
});

rigth way, thanks. But some problem: if comment window.location.reload(); - all good, but i need to reload. when reload is working - $.post never executes (does not write to the database or other actions) — Sysanin, Dec 14 '14 at 13:08
thank you! Freez updates your solution with reloading! :) good) — Sysanin, Dec 14 '14 at 13:14

score 1 · Accepted Answer · answered Dec 14 '14 at 13:08

1

The issue is just you reload the page before performing the ajax request.

Try to reload page in the ajax success callback handler :

$.post("projects/add_project.php", {
   project_name: projectname,
   project_description: projectdescription
}, function(){
   window.location.reload();
});

And remove your old window.location.reload()

answered Dec 14 '14 at 13:08

Freez

7,208
2
19
29

Might want to emphasize that if the browser leaves the page, pending requests get cancelled, and may or may not be able to reach the server. :D – Joseph Dec 14 '14 at 13:13
why don't you put a return = false after window.location.reload(); – SuperUberDuper Jan 05 '16 at 15:14

Witiko · Answer 3 · 2014-12-14T13:45:09.777

0

In addition to what the other answers suggest, you can also execute the location.reload method asynchronously using setTimeout:

setTimeout(function() { location.reload(); }, 1);
return false;

EDIT: The entire idea of running an asynchonous AJAX request and reloading the page immediately afterwards is flawed, of course, since the AJAX request may not have been completed by the time you reload the page.

You should therefore use a callback, as suggested by the accepted answer. Alternatively, you could use a synchronous AJAX request, but that would freeze execution until the request has completed, which is generally not desirable.

edited Dec 14 '14 at 13:45

answered Dec 14 '14 at 13:11

Witiko

3,167
3
25
43

thanks! but delay is not right way, becase in different times we have different ping :( – Sysanin Dec 14 '14 at 13:14
It's better to use callback, in this case the use of an arbitrary setTimeout isn't stable. Anyway, 1 millisecond is too short :) – Freez Dec 14 '14 at 13:15
How is it not stable? All it does is execute the `location.reload` method out of order. There is virtually zero difference between this and the proposed `preventDefault()` solution except that the `preventDefault()` solution is less portable (see http://stackoverflow.com/a/4479267/657401). – Witiko Dec 14 '14 at 13:17
@Witiko Ok I probably misunderstood what's the interest of `setTimeout` in this situation, I still don't understand. sorry. – Freez Dec 14 '14 at 13:23
The code executes `location.reload()` one millisecond later (the one millisecond bit is on best-effort basis). This allows you to `return false` and still get the `location.reload()` to execute. But yep, the callback is the cleaner solution, I added this just for the sake of completeness. :-) – Witiko Dec 14 '14 at 13:26
@Witiko Ok, but it was not the point, `return false` after `location.reload` doesn't prevent page reloading anyway... – Freez Dec 14 '14 at 13:34
@Witiko I un-downvote you but my vote was not because it was a dirty way to do, but I thought you was proposing setTimeout for waiting ajax call to finish. – Freez Dec 14 '14 at 13:38
@Freez: Agreed. I thought he was performing a synchronous AJAX request (which is usually still a terrible thing to do). I updated my answer. – Witiko Dec 14 '14 at 13:42
Returning `false` from an event handler equals calling `e.preventDefault()`, where `e` is the event object passed to the handler. Only more portable, because IE<9 is unaware of `preventDefault`. – Witiko Jan 05 '16 at 20:57

Firefox return false; (preventDefault();) and window.location.reload(); together

3 Answers3