I am using JQuery's autocomplete plugin, but it is not fast and also it's not that relevant to my site. I want an autocomplete like the www.hotels.com. How can I achieve this type of autocomplete? Are there plugins for it?
Hotels.com uses a custom JSON request/response. If you open up firebug you'll see the outgoing call:
Search for "London"
This call is fired immediately on keyup, and returns JSON data:
Response from Hotels.com
There's nothing particularly fancy going on otherwise, just a high powered server with an accurate database search. There's no autocomplete happening in Javascript though.
Thus, you rather want a dropdown filter instead of dropdown autocomplete? E.g. when you type "foo" you would like to get "foobar", "afooba" and "bazfoo" listed instead of only the starting-matches like "foobar" and "foobaz"?
If so, then I can suggest the Quickselect using Quicksilver algo or Flexselect using Liquidmetal algo. For what's worth, I've played with both about a year ago and decided to continue with the last one, because it was better customizeable to get it compatible with the other jQuery plugins (e.g. Validator and qTip).
What is it about www.hotels.com that you like? What data do you want to project into the autocomplete? Where would this data come from? You need to answer these questions before thinking about implementation details.
Good things costs money. In this particular benchmark exercise you're doing, if you look close enough, you'll be able to see that hotels.com uses the Yahoo JS framework and different custom functions...
80% of the work in autocompletion is done in the backend. THe backend needs to be really really quick to return query responses. I doubt if jquery is your problem. Use firebug's 'net' panel to understand how much round trip time is, and what the server latency is. Solve that problem. The rest is easy.
FWIW, I have had very good luck using GWT's suggestbox going directly into a oracle database (I dispensed with most of the web tier other than a very thin passthrough to get the responsiveness I was looking for). Response back to the user in approx 50ms
Related
Currently I have made a system where many screens are just lists, which update every N seconds depending on how many results per page the user has selected.
This is just a simple ajax call in a setTimeout loop. The main disadvantage I see with this approach I have used is that it is super inefficient in that it creates a lot of unnecessary network traffic and database calls.
The reason for this is that the data on the screen may change at any time, but the user needs to be aware if something new does come into the list so they can react to it as quickly as possible.
I was thinking of creating a Twitter style list where all you get is little notification at the top, which is just a COUNT of all the new items that you haven't seen. The user would then click on them to have the list refresh with the new items included.
The problem I have with this is that it is not truly a real-time list.
I have just started learning about Socket.io and NodeJS but I think it might take me some time to learn what I need to implement a real-time list that is efficient.
What are your thoughts?
Take the time to learn Node.js and Socket.io. If you are looking for realtime between the browser and the server you can't really beat that combo. Socket.io is very efficient and will choose the best option the browser supports (polling, websockets, etc).
The documentation for Socket.io is a little thin on good examples, but you can try their examples or the HowToNode article.
You'll most likely want to put Express in there as well, it's a fantastic module.
Good luck.
OK, so I bought a 46" screen for the office yesterday, and with the imminent risk of being accused for setting up an "elaborate World Cup procrastination scheme", I'd better show my colleagues what it's meant for ;)
Looking at my simple sketch, and at these great projects from which I was inspired, I would like to get some input on the following:
Pseudocode for the skeleton: As some methods should be called every 24 hours ("Today's date in the heading"), others at 60 second intervals ("Twitter results"), what would be a good approach using JavaScript (jQuery) and PHP?
EDIT: Alsciende: I can agree that #1 and #8 are too vague. Therefore I remove #8 and try to clarify #1: With "Pseudocode for the skeleton", I basically mean could this be done entirely using JavaScript timers and how would you set up the various timers?
Library for Google Analytics: Which libraries support the Google Analytics API and can produce neat charts. Preferably HTML5, JavaScript-based like Protovis.
Library for Twitter: Which libraries would you recommend for fetching twitter search results and latest tweets from profiles.
Libraries for Typography/CSS/HTML5: Trying to learn some HTML5 etc. in the process, please advice on any other typography/css libraries that could be of relevance.
Scraping/Parsing? I'll give you a concrete example: Trying to fetch today's menu from this restaurant's website, how would you go about? (it's in Swedish - but you get the point - sorry ;) )
Real-time stats? I'm using the WassUp-plugin for WordPress to track real-time visitors on our website. Other logging software (AWStats etc.) is probably also installed on the webserver. Any ideas on how to extract information from these and present in real-time on the dashboard?
Browser choice? Which Browser and OS would you pick? Stable, Full-screen, HTML5.
alt text http://www.freeimagehosting.net/uploads/cb7af2ef28.png
I've built a dashboard similar to what you're talking about for our office. I spent about a day working on it, the possibilities are really (pretty much) endless. Basically, all the computational stuff I handle via PHP and do interval AJAX calls to the appropriate PHP script, which returns JSON data to present.
#2:
For graphs, I use/recommend flot (http://code.google.com/p/flot/). The documentation isn't really that great, but once you figure out how things generally work - it's a great library, and it generates graphs using HTML5 Canvas tag.
I've not integrated external libraries with Google Analytics before, but I assume you could pull data from analytics and format it for flot to build appropriate graphs for. This might be the hard-way around, but I'm more familiar with flot than most other graphing libraries (and it doesn't suck, as much as a lot of others do) so for me, this would be the easiest way to get it done.
#3:
For twitter, it's pretty easy to pull data from their search API using JSON-P. Basically what this does, is dynamically adds a <script> tag to your DOM, which GET parameters that twitter interprets, then calls a predefined javascript method (which you pass via the URI) with a json-encoded hash of the results.
#5:
Scraping and parsing individual sites is going to be a painstaking process. Every site is going to have it's own "pattern" (or non-pattern) for publishing their daily menu or specials. I'd build a "menu" script which knew how to call a few functions, and write a function / class for scraping each restaurant's site which you're interested in showing the menu for in PHP (or whatever other language you're comfortable with). It can reply with json, which is (imo) the easiest way to manipulate/process data in Javascript.
#6:
Real time stats are pretty much the same as #5. I'd build a couple classes that knew how to fetch the statistics from whatever data sources I was interested in pulling from, and present the data in json to javascript, via an ajax call.
#1: Writing javascript code to load data on a timer is really simple, look into the setInterval, clearInterval, setTimeout, and clearTimeout methods. They all take a function name (or closure) and a timeout to wait before calling that function (in ms). You could easily call a master timer function every 60 seconds which would basically be a "scheduler" or a "cron" style function, which would just look for the stuff that needed to run "right now" and execute those functions from the scheduler.
Hopefully this gives you some ideas on where to go, and how to go about getting there.
For the Rails Rumble we developed Boarrd that is exactly what you would like to develop!
We were impressed by Panic too :)
In our team page on RailsRumble you'll find details about the tools used. I know that is not in PHP but maybe you'll try our tool and decide for better development environment ;)
I want to develop an application that does a bunch of cool stuff. The first thing that I need in it is to get information about the page a person is browsing.
With that said, I need for example to know how long a user stayed in a page and where was the scrollbar. While getting that data, It's all saved to a database.
The thing is, I prefer doing that in Flash [although I have no experience in it] over Ajax since I want to hide the code - which as far as I know not possible in Javascript/Ajax.
So, can I do all that in Flash? - Read the content of the page, get the status of the scroll bar..
Plus, I then need to go threw the gathered information that is saved in the database. Since there could be many calculations i thought C++ .Net is better than PHP [which I know better].
Is that all possible or am I just crazy? :)
Thanks ahead.
Server side
I think it doesn't matter whether you'll use PHP/C++/Java/Ruby/Python/whatever... each of these is fast enough to do complex calculations, especially if we talk about pure math.
So if PHP is what you know the best, then it's obvious to use it.
Client side
Flash is pretty cool for animations and others visual effects, but for things like scroll position, time spend on website JavaScript is just better. It doesn't require third-parties plugins, it's integrated with DOM. Personally I just thing JavaScript is the most proper tool for this task.
I vote for JavaScript, you can do in JS all that you mention, using the DOM, and it has not a proprietary license.
Although you cannot compile JS code, obfuscation tools offers a decent level of protection. Closure is worth of mention too, YUY minifier etc.
Also check this ready made JS heatmap.
I advise against using C++ for server side programming. You'll be better off with Ruby/PHP etc.
I am quite new to web development and have a task to develop a web application that will basically show the user 5-15 pull down lists on one page, where each selection will limit the choices in all other lists. The user should be able to start with any one of the lists (so no set selection order) and when the user have selected something in each list or all parameters are otherwise locked by previous choices the user has to press the GO button and some calculations will take place, presenting a database selection. Basically it is a muliple parameter product selector application.
The relations between the lists are not simple, and could need calculated fields etc, and one list could affect the content of several others. The database behind will be MYSQL, probably a single large table, with perhaps 30 fields and 500-5000 rows. I will be using PHP, JavaScript and perhaps AJAX unless you have a strong reason not to.
I have done some research and found three ways to do this:
Send all data to the browser and handle the filtering etc client side with Javascript.
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
Use AJAX to change all list content dynamically without reloading the whole form.
Since I am so new to this I have a hard time telling which way to go, what pitfalls there are etc...
I have some conserns:
A. Slow initial loading. Worst for #1?
B. Slow dynamic response. Worst for #2?
C. Complicated programming. Worst for #3?
D. Compatibility issues for different browsers and plattforms. Have no idea of which method is most likely to create problems...better if I use some Framework?
E. Could I even try to make something at least part-working for people with javascript turned off? (like selecting each list on a new page and having to press GO button each time)? (I think I can tell my users they must have Javascript on so no big issue....) Perhaps #2 is best here?
F. I think the specification of "free selection order" means I have to download most of the database initially, so perhaps I should try to avoid that option.....if I keep it I might as well use method #1, or???
G. It would be best to do as much as possible of the selction/filtering in SQL to allow future extensions by building custom SQL code, so that gives a big minus to #1...
H. Other pitfalls etc???
I have found tutorials etc for all three methods, but if you can point to good resources like this I would appreciate it, especially so I dont base my code on examples that are not smart/good/compatible....
1:
http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
http://javascript.about.com/library/bl3drop.htm
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20523133.html
2:
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list3.php
3:
http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html
http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu
http://www.noboxmedia.com/massive-ajax-countryarea-drop-down-list/
http://freeajaxscripts.net/tutorials/Tutorials/ajax/view/Create_AJAX_Dynamic_Drop_Down_List_using_PHP_-_xajax.html
3+jQuery:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
Now to the question: Could anyone experienced in all these methods help me out a bit, with the evaluation of methods 1-3 above so I can choose one and get started on the right track? Also, will I be helped by learning/unsing a framework like jQuery+jSON for this?
Rgds
PM
I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.
Send all data to the browser and handle the filtering etc client side
with Javascript.
You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).
Send parameters back to the server after each selection and reload the
whole form after each selection.
Probably a littebit Javascript and
most code in PHP.
I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..
Use AJAX to change all list content
dynamically without reloading the
whole form.
By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)
My personal recommendation is to go with AJAX.
Raw SQL or not is really a question of what backend you are using.
You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.
The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.
It's no easy task to make it fully customizable.
The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.
jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.
i have a page on which i have some rating function like people who like the post can rate up or who don't can rate down.
on that link im calling a php file with some parameters passed in the anchor tag. Then in that php file im saving that rating with +1 or -1 (whichever is the case) in the database and after doing that im redirecting to that first page from where we have rated.
Now this whole function is reloading my whole page which i dont want.Is there any way with which i can do this rating without reloading the page,i want that when a person clicks on rate then just after click the rating should be shown according to what the user just did(+ or -) and that too without reloading the whole page.Is there any way to do that in php???????
Yes, it's called "Ajax". However, you don't do this on the server-side with PHP, you do it on the client-side with JavaScript. There are plenty of tutorials around, I suggest you take a look.
Note that there are many JavaScript libraries out there to make this extremely easy. I'd recommend taking a look at jQuery because I've personally found it to be the easiest to learn and use.
It seems a few answers have already been posted recommending different libraries. If you would like the avoid the (admittedly minimal) overhead of an included library, the following tutorial shows how to use a simple XMLHttpRequest object.
http://www.xul.fr/en-xml-ajax.html
The "xhr.responseText" is what you would receive back from the php processing (which would typically be done in a small, single-purpose script seperate from the primary page).
You can do this using Javascript or AJAX. There are plenty of free scripts online that can help you to do this without building the whole thing from scratch.
This page (http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=364) has a good list of different star rating scripts you can choose from. You can Google for more.
Here's another relevant tutorial I came across when answering some other question:
http://docs.jquery.com/Tutorials:Getting%5FStarted%5Fwith%5FjQuery#Rate%5Fme:%5FUsing%5FAjax