Manuel Amador (Rudd-O) wrote:

> Greg Beaver wrote:
>
>> Daevid Vincent wrote:
>>  
>>
>>> I need to dynamically update a select box with results from a SQL
>>> database using AJAX, but I can't find a single example of how to do
>>> this.
>>>
>>> Basically I have a text input field, and a select box. As someone
>>> types in the input field, I want the select box to fill in the
>>> results of matches.
>>>
>>> I can fill in a <DIV> (as per the ten million examples out there)
>>> and that's all fine and dandy, but way too simplistic for what I need.
>>>   
>>
>>
>> The best way to do this is indeed to put the entire select in a div, and
>> to replace the innerHTML of that div with the html for the select.
>>  
>>
> But that is not DOM.  Another way to do this is:

It's also not Java or Fortran, but as with these argument, that is
irrelevant information - it is valid javascript, and as we all know, the
"J" in ajax ain't DOM, it's javascript.

> - run your XMLHttpRequest
> - have your server-side AJAX target script spit a newline-separated
> text file, with IDs and names such as:
> 1 XYZ
> 2 JWV
> 3 Something
> - once the response is on the client, break the text file down with
> string manipulation functions/methods (split() comes to mind), perform
> a document.getElementByID("yourselect") and append
> document.createElement("option")'s to it, obviously setting the value
> properties on each element, and appending a
> document.createTextNode("your option text") into every option you create.

This is far too complicated.  You don't need 50 lines of code to convert
from server-side data to HTML when the browser does it for you (and far
more efficiently) with this code:

var someCallback = {
    ajaxfunc: function(res) {
       document.getElementById('blah').innerHTML = res;
    }
}

>
>> Always do as much processing as possible on the server side, or your
>> application will become interminably slow both to load and to run.
>>
>> In my testing, I've found that the latency over high speed internet of
>> passing the entire select is exactly the same as it is from my local
>> machine.  When I used to pass an array of data and repopulate using
>> javascript DOM, it was slow as molasses, and I would occasionally have
>> weird timeouts.
>>  
>>
> It shouldn't have been slow.  DOM manipulation is fast.  But you need
> to remember to instantiate new objects, add children objects first (in
> the example, the text nodes and options), and add the parent objects
> to your document then.  Otherwise, I can see how your application
> could get slow.

I hate to burst your bubble, but I am an experienced developer, and do
know how to use DOM.  My application used these exact techniques, and
was simply slower.  The internal rendering code for a browser is just
simply far faster than javascript DOM will ever be.

Another truth is self-evident: all browsers have uniformly implemented
the setting of innerHTML for far longer than the implementation of DOM
has been uniform, and your chances of encountering a bug in a particular
browser implementation are much slimmer.

>
>> Don't try to be smart when you can be simple :)
>>
> I'd advise against this, and I'd also advise you to look up a
> JavaScript-usable serialization microformat for data coming from the
> server (XML is kind of unwieldy for this).  Look for JSON on google. 

You advise against simplicity?

First off, any good programmer will tell you that simplicity is always
the first thing to look for in an application, as complex algorithms are
almost always best implemented with simple (and clever) code, but this
is a tirade for another time.  Second, what makes you think I don't
transfer the HTML using JSON?

I use http://pear.php.net/HTML_AJAX for the actual ajax details, and it
has several serialization options, JSON by default.

First off, let's examine why one would use ajax in the first place. 
It's not to be "correct" or rigorous - it is to streamline the user
experience.  Ajax of course introduces other concerns such as the danger
of overloading the server with more HTTP requests than traditional apps,
but this is easily fixed by ensuring that examples like the "type in
text box and populate select" have some appropriate limits on how often
it actually sends the requests for data.

If you still don't believe me, take a straw poll of the most proficient
programmers to see how they are using ajax in real-world time-critical
applications.

Greg

-- 
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

Reply via email to