I'm trying to use ajax to search for entries in a database with a certain tag using a php processing page. I would like to have a select drop down box that gives a list of options and when selected, and the submit button is clicked, the tag is sent using GET to a php page which searches the database. The returned data is then sent back to the page and displayed in a <div>. I know this is pretty simple, but I'm a newbie at ajax (and javascript) and have had failed attempts at this numerous times. Thanks a lot for any help!
My ongoing projects...
www.naturesmagazine.com
www.energyreform.org *new domain*
www.photographyavenue.com
----
You may also remember me as imnewtophp...
Comments
www.computerforumz.com
It uses the prototype JS library and makes a form submit via AJAX rather than by normal methods, though it will fall back on a standard method should the user not have JavaScript enabled:
[html]
<form action="/dynamic_search" method="post" onsubmit="new Ajax.Updater('searchresult', '/dynamic_search', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
<input id="searchkey" name="searchkey" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
[/html]
That was built by Rails using Rails code rather than JavaScript, but I'll go over it anyway as it shouldn't be too hard to read...
Standard form element in HTML that will go to "dynamic_search" or wherever you point it if JS is turned off or not supported.
When the user submits the form via the submit button the JS is triggered.
The Ajax.Updater() is part of Prototype, and it does what it sounds like, it updates the page with AJAX techniques (sending a request and then using the DOM to make changes to the page).
The main things you need to think about here are the first argument, which is the I.D. of the element you're updating (in this case, it's a div for the search results, thus we called it 'searchresult') and the second argument, which is where the script is pointed, which can be the same place as the non-AJAX location, or somewhere else if you want it to look a little better (if you want a full page rather than just the results).
Then you just throw in your input fields and close the form.
Accessing the form data should be as easy as normal.
You could also use observers for this to cut out the submit button completely, though this might be a bit less efficient at times.
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
www.naturesmagazine.com
www.energyreform.org *new domain*
www.photographyavenue.com
----
You may also remember me as imnewtophp...
[html]<script src="/javascripts/prototype.js" type="text/javascript"></script>[/html]
Prototype is pretty much required for every other pretty AJAX thing out there such as Scriptaculous effects and Rico, so it's worth looking into.
Using Prototype and Scriptaculous can cut a fair bit of work out of doing things like drag and drop interfaces and Prototype is included with Scriptaculous, so you don't need to get it if you're using Scriptaculous.
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
www.computerforumz.com