2

SETUP - Large search with many criteria as a POST via a html submit button, it can take several seconds before the first byte is sent by the server / results page starts loading.

http://api.jquery.com/unload/ is now deprecated (as of version 1.8), and I'm searching for the CORRECT way to do the following...

When someone clicks the search button, I give the user a little feedback by setting the button text to "Searching...", then allow the submit to continue (return true):

    $('#dosearch').click(function() { 
        $(this).html('<i class="icon-spinner icon-spin"></i> Searching...');
        return true; 
    });

During unload I'm currently doing this:

   $(window).unload(function() {
        $('#dosearch').html('<i class="icon-search"></i> Search');
    });

I tried binding to beforeunload, but that fires as soon as the submit happens (bad), not as soon as the browser begins rendering the new page (good).

The problem is if they click search and then click the BACK button on their browser. If they do that, then the Searching... text is still shown.

What is the correct / proper way to do what I'm attempting here?

NOTE: (The reason for the I tag is that I'm using font awesome).

Scott R. Frost
  • 2,026
  • 1
  • 22
  • 25
  • are you sending data via ajax? or refreshing the page? – Spokey Apr 15 '13 at 16:10
  • What is the aim of this? If you load a spinner when you submit, then the user is informed. If you ajax your form to the server, you do not need to bind load at all – mplungjan Apr 15 '13 at 17:09
  • I set the spinner on a form submit because the page that the form is submitted to can take a few second to reply (it's a large database search). It actually goes to a whole new page. It's not an ajax method. – Scott R. Frost Jun 04 '13 at 12:41

2 Answers2

1

Binding an empty event handler to unload seems to work, but it's kind of a hack.

    $('#dosearch').click(function() { 
        $(this).html('<i class="icon-spinner icon-spin"></i> Searching...');
        return true; 
    });

    $(window).on("load", function(){ 
        $('#dosearch').html('<i class="icon-search"></i> Search'); 
    });

    $(window).on("unload", function(){ 
        // Leave this blank handler here or onload won't fire on IE or FF when you click back button 
    });

See this question for explanation.

Community
  • 1
  • 1
Scott R. Frost
  • 2,026
  • 1
  • 22
  • 25
0

If the user goes back in history, it means it renders the page new or not? So you could, whenever the page is loaded, reset the value to what you want to.

Could that be something?

David Fariña
  • 1,536
  • 1
  • 18
  • 28
  • $(window).load is also deprecated: http://stackoverflow.com/questions/12746566/what-is-window-load-alternative $(function () ... does NOT fire again on back button. EDIT - $(window).on("load", function(){ ... } does NOT fire again on back button. Not sure how else to wire a load event up! – Scott R. Frost Apr 15 '13 at 16:27