JPSpan – call your (remote) PHP methods from JavaScript

I finally managed to play around with JPSpan
written by Harry Fuecks. “JPSpan provides tools to ‘hook up’ PHP and
Javascript, for the purpose of fetching data from PHP into a web page
which has already loaded, without reloading the entire page.” This
basically means you can call “remote” PHP methods from within
JavaScripts and takes the LiveSeach
idea one step further. It’s very easy to use and you get for example the result of a DB query from
within JavaScript with a few lines of code.

I can imagine a lot of uses for this. An immediate one is for
more “intelligent” forms in the admin interface. For example for
automatic checking of correct URIs (which has to be checked against the
existing URIs in the DB and can’t be done with a simple Regex)

But my master plan is, to replace the whole submit/save/reload circle
with a more “natural” way. So if you click “submit”, the page isn’t
send, but just the data in the background. The page has not to be
reloaded and you just can work further on the same document. The same should go for loading
a new record entry, just choose it from an (automaticly retrieved)
pop-down field and the data is loaded from the network, without having
to reload the whole page.

Our current forms interface for DB entries in the admin of BxCMS is
ages old and needs a decent rewrite. Let’s see, if we can do something
really cool with JPSpan and hopefully patForms. The same goes for the
blog admin interface.

Unfortunately, JPSpan doesn’t currently run on Safari. I’ll have to
dig into the sources, or someone should just donate Harry a Mac ;)

Update: It works on Safari. Was a 4 letter hack on the server side (The solution should show up on the JPSpan maillist archive in a few minutes)

Update II: Of course, GMail was one of the first, which brought this
technique to widespread use and awareness. Urs sent me some links about
this topic:
John Udell
Mark Pilgrim
Bloglines Citations

Wäre aber auch endlich eine schöne Möglichkeit, eine Bildergalerie, die nicht auf Javascript basiert, in eine Seite zu integrieren (php-Möglichkeiten laden ja immer eine neue Seite)…

Die *nicht* auf JavaScript basiert? Naja, das wird wohl schwierig. JPSpan basiert natürlich schwer auf JS ;)

Manchmal überlese ich echt wichtige Sachen ;)

Good to hear it’s been easy so far – thanks for the write up.

“This basically means you can call “remote” PHP methods from within JavaScripts and takes the LiveSeach idea one step further”

There’s probably a REST vs. RPC discussion here. What’s nice about LiveSearch is there’s only a little DOM manipulation needed once you actually _have_ the data. By default (unless you’ve putting XML in a PHP string as part of ther response) JPSpan is just delivering raw data – probably more work displaying it to users.

Be interested to hear how it goes with the master plan – any detail / observations appreciated. Got into writing JPSpan for a web project (which is still far in the distance) which has to “complete” with a Windows GUI, in terms of user experience.

“Unfortunately, JPSpan doesn’t currently run on Safari. I’ll have to dig into the sources, or someone should just donate Harry a Mac ;)

Update: It works on Safari. Was a 4 letter hack on the server side”

Damn – there goes my MAC ;) Will be interested to know if this also fixes things for Konqueror, as they’re both based on KHTML / KJS. Sourceforge’s web servers are down right now (think they’re upgrading today) so I’ll have to wait.

Sorted. Many thanks for the patch. Went straight for another release – 0.4.1 – http://prdownloads.sourceforge.net/jpspan/jpspan-0.4.1.tar.gz

Thank you for the information Chregu, and for the script Harry. It is just what I was looking for, and I shall try it soon.

I will report my results ere long.

Happy Coding! :)

http://www.wizardgrove.com
PHP free RPG Hero Maker/ Game (in dev)

I’ve though about this client->server round trip too. It’s so slow, redundant, etc.

While working on a project porting an access database to PHP5/MySQL, the real challenge was not to code the logic and all, but the UI. You simply cannot tell the people who where used to the fun & joy of access interface, that all UI deficiencies are “a browser thing”.

We had to rethink how the people worked. With set up mettings with them together. Some of the interesting parts where: nearly zero load time from one database entry to the next -> of course! Financial application and no one is using a tab key to switch from one input field to the next -> they’re all using the numeric keypad enter -> of
course!

Luckily with todays browsers it’s possible of course, albeit something really a pain in the ass (you cannot call a browser function to switch focus to the next logical input element, you’ll have to do it yourself). But I’m drifting off :)

We’re currently planning on loading as many of the UI stuff as real HTML as needed and only do XmlRequest data exchange with the server. I’m looking positively forward this will speed up things. However in a development cycle as far as two months into a project it’s not easy to switch things from one day to another.

Quintessenz: I think this kind of “rich clients” (DOM bloated once) have a very good future (probably a better one than native XUL runners and alike).

About your save/submit/reload cycle idea – I’m doing on my aggregator (www.feedmarker.com). When you want to edit an item, you just click edit, javascript creates the edit fields, and JPSpan sends the data off to the database. The page never reloads, you just see a message telling you your changes were saved.
check it out: http://www.feedmarker.com.

Hi,

This doesn’t work in Opera (I use version 8) which has full support for XMLHttpRequest. There are several examples around the web that already work with Opera.

Cheers
Erick

JPSpan rocks. I recently implemented my cool little image search engine using it: http://www.mondomole.com

Ok, perhaps the net result wasn’t that interesting…

-Mark

This nice post. but now i cannot see the http://jpspan.sf.net/ to see the JPSPAN detail.