Live Request: XMLHttpRequest and You
First let’s start off with the gist of what you can do with this script:
You can have an input field on a web page that will, as you type into it, take the content of the field, pass it to a server side script and be returned to be placed inside a div that you specify.
Using this you can create a live searching feature or, what I will be doing with it, an authentic Textile preview feature.
First things first. I can not give Bitflux’s chregu enough credit for the inspiration for this. That code is the basis of liveRequest and as such falls under its license (which is basically do whatever, give credit, retain the same license.)
So, go to the link above, read about how this started, and then come back here.
Now, head off to Apple to skim their guide to XMLHttpRequest.
You may also want to read up on the JavaScript Textile Preview I helped improve.
h3. Give me the actual examples now!
Now, the live search feature with that snazzy XMLHttpRequest got me thinking, “what else could i bring back from the server?”
How about actual parsed Textile code without a page reload ;-)
You can thus see a working proof: Live Textile Preview in action
To create this, I almost completely rewrote a large chunk of the liveSearch.js provided me. In addition to cutting it down to just the request and return portions, I modularized it so that I can take the code from textile previews to live search results with just 4 lines of code.
If this has piqued your interest, both live-search and real-live-textile are free to download.
very nice… ;)
Thanks! :D I see you got your’s working too.
I’ve only begun… this technology is very interesting. thanks again ;)
That’s funny! I had the “same idea”:http://dealmeida.net/en/Programming/Internet/almost_live_textile_previews.html almost at the same time. The only difference is that I’m using PyTextile as the backend.
Well done!
There aren’t any installation docs, and I’m sorry to say, I don’t really have time to write them up. :-/
In addition, I am not sure how to tie this into MT since I don’t (and haven’t ever) used it. Also, wouldn’t it be a bit odd to add Textile parsing to MT (since textile is originally a part of Textpattern) – but I suppose that would be ok.
Best of luck though :)
hey, cool!
is there an installation instruction doc somewhere? any help would be appreciated! thanks.
:)
forgot to mention…i am using MovableType.
current status – prgrming newbie
this is absolutely fantastic! i guess newbies like this kind of stuff too :P i’ve got the js file but want to know what to put up on the server to make it run… a few lines, pointers, anything to start me in the right direction… pllleeeeeeassssssse!
OMG this is great, I have some useful ideas on what to do, but public revelation of what I see this doing will have to wait. I am just looking at it atm, between other things I am doing, and showing a version of your demo to people (only change atm is making the html render onblur).
Hi, magnificent work. It could be even more useful, if you could use the liveRequest.js on more input-fields on one page. At the moment – as far as I can see – it is only possible to use it on one field. Are you thinking about implemnting that?
what kind of voodoo do you need to add to the stylesheet/DTD to get this thingy to work in Firefox? Any ideas?
I can’t say – both the live preview for comments, and the live search feature of this site work just fine in FireFox(0.9).
What’s the problem with it?
Is there a chance of you adding support for HTML previewing, now that you’re at it? So that it has Textile _and_ HTML at the same time?
Yeah, doing a live HTML preview is actually quite easy compared to the textile function :D
Hey, someone should interface Livesearch to the google api tools and get a google livesearch!
I’m trying to find a php script to use to connect to my mysql db. Is there one available so I don’t have to write my own? Lot’s of people talk about the livesearch capability, but no one seems to be linking to code I can easily implement. Im using movabletype 3.11.
TIA
This is great stuff.
This may sound crazy, but I was just thinking if this could be used for something like an online chat system or discussion board. Compared to the current online chat systems that reload a page at regular intervals, this could be a neat solution to do things.
Maybe Anonymous means someone should interface this with “Google”:http://www.google.com/ so it looks something like “this”:http://www.google.com/webhp?complete=1&hl=en
Ray, that would only be possible if they opend the API to be able to do that. In addition, the server speed will greately effect the ability to provide something like that, and not all of us have the farms that Google does.
This is the closest I have been able to get with a “Live Google”:http://hq.servequake.com/google/search.php
You might want to tell browsers to turn off autofill on your search form. It prevents LiveSearch from working.
Just 2¢, you should probably set the request method of the Live Request to post instead of get. I know this comment setup doesn’t lend itself to longwinded comments, but I have seen comments elsewhere longer than the 512 bytes recommended as the “turning point” between get and post in the apple article.
Thanks, this is awesome. It works great.
Oh, now that is nice…
bad link
http://creatimation.net/extra/live-request/real-live-textile-preview.html
Fixed!
good work!
very nice!!
Looks great! Anyone got it running on MT?
cool
Nice work, though it doesn’t like use of a #, it stops parsing as soon as it finds one – which is extremely annoying.
and to top that off, when I may solved that bit I find that their appears to be a maximum number of characters…
Anyone else had this problem, or is that just that these things don’t like me :-)
in opera 8.5 bag?
You know who needs this? *Backpack.*
Awesome stuff.
It’s great
great !
Cool Stuff.