Ajax search workaround when JavaScript is disabled

Question

I have a search page on my site. The search pulls from a couple (eventually a few) API from external sources. Sometimes a search can take up to 5 seconds. Because of this, I would like to load my search page at least with a loading gif, and let AJAX begin to pull the data, showing a bit at a time. (similar to http://gamespot.com although this is a bad example since the search doesn't work with JS disabled)

Of course I have to consider the users who have turned Javascript off, so for them I'd just let PHP do the search and they'll have to bear with the wait.

What is the best way to implement this? If I use <noscript>, then all users still have to wait for the 5 second PHP portion to load anyways.

Would I just have the search form send the user to different pages depending on their JS status?

Answer 1

Perhaps have the noscript part define an iframe that loads the results from the long-duration PHP query?

Would I just have the search form send the user to different pages depending on their JS status?

If you have the users coming to your page, and then sending the form, that's absolutely the best way to go. E.g.:

HTML:

<form id='theForm' action='long_search.php'>
....

JavaScript:

hookEvent(document.getElementById('theForm'), 'submit', function(event) {
    event.preventDefault();
    loadAjaxSearchResults();
    return false;
});

...where hookEvent is a function that uses addEventListener or attachEvent (on IE).

---

Off-topic: The hookEvent thing, like a lot of this stuff, is easier if you use a library like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:

$("#theForm").submit(function() {
    $("#resultsTarget").load("ajaxsearch.php", $(this).serialize());
    return false;
});

Answer 2

Without JavaScript, you will need to post the data to the server and perform a full postback (refresh) on the page. Just like the good ol' days. ;)

Answer 3

no you apply your js code (autocomplete if i understoof right?) up to an input field. Think of Javascript like an extender. If js is disabled, no autocomplete is extended on the input field. You may put some text, where you say, dude, turn on js otherwise this will be a long search. And if js is on, hide the text

Answer 4

Progressive enhancement:

Build it so the PHP version works, first and foremost. This is accessible to all. Then, add javascript so that, if available, it performs ajax requests behind the scenes to grab the content and update the current page.

See this book as a simple, great read on the subject: Bullet Proof Ajax