Solved

Ajax to spice up a PHP script

Posted on 2007-03-26
9
218 Views
Last Modified: 2013-12-13
I have a php script that displays a table of data pulled from a mySQL database.  I've never used Ajax before and have been wanting to give it a try.  I googled around for something similar to what I want to do but haven't found it.
I'd like to click on a "cell" and have it change to a textfield to edit the entry and then post that data either when you click away from the cell or hit enter or even a submit button.

Any ideas or links to similar progects would be helpful.  

This is basically the output from the table:
*************************************
 echo"<tr bgcolor=\"#66FFCC\">
            ";   echo" </td>
            <td>";  echo"{$row11['podate']}</td>
            <td>";  echo"{$row11['ponumber']}</td>
            <td>";  echo"{$row11['custponumber']}</td>
            <td>";  echo"{$row11['pocompany']}</td>
            <td>";  echo"{$row11['season']}</td>
            <td>";  echo"{$row11['startdate']}</td>
            <td>";  echo"{$row11['completedate']}</td>
            <td>";  echo"{$row11['styles']}</td>
            <td>";  echo"{$row11['totalunits']}</td>
            <td>";  echo"{$row11['totalsale']}</td>
                  
                  </tr>";
**************************************************
0
Comment
Question by:livegirllove
  • 5
  • 3
9 Comments
 
LVL 21

Expert Comment

by:theGhost_k8
ID: 18797754
this will teach you from he scratch:
http://www.webpasties.com/xmlHttpRequest/
0
 
LVL 5

Accepted Solution

by:
Gitcho earned 500 total points
ID: 18797765
Hi  livegirllove ... the code you're asking for can't be posted in full here, because it's too much !

There are two very good ajax frameworks that have inline editing extensions.

One is put out by dojo and is based on the protoype framework : http://dojotoolkit.com/ ... click the "see it in action" button at the top, then "general widgets" button on the left, then "InlineEditBox" about halfway down.

The other one is put out by yahoo and uses the yahoo user interface libraries (yui) which are very well documented. The example & code are here : http://developer.yahoo.com/yui/examples/datatable/inlineediting.html

If you haven't ever used ajax before, i recommend yui, only because there is far more documentation and code examples to get you started.
0
 
LVL 1

Author Comment

by:livegirllove
ID: 18797783
@gitcho
The Yahoo one was exactly what I was looking for.  
@theGhost
I did that tuorial and it was fine but I was looking for something specific.

Hmm now should I close the question or leave it open till I get the result I need...
0
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 
LVL 5

Expert Comment

by:Gitcho
ID: 18797788
another ready-made solution you might like (based on prototype) is by script.aculo.us ... they have some awesome web 2.0 ajax extensions.

http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
0
 
LVL 5

Expert Comment

by:Gitcho
ID: 18797796
If you can read spanish, i really like the implentation found here :

http://soleup.eup.uva.es/InlineEditor/

the code is good and i like his use of the icons, but it's in spanish ... sorry - heh heh ... maybe you can use http://translate.google.com to make more sense of it ..
0
 
LVL 1

Author Comment

by:livegirllove
ID: 18797945
that spanish one is nice!!  I may try to fight through a translator but it looks like the code snips are all there.  Ill see what I can cut and paste together.  Im going to try YUI first (since I'm uploading it)
0
 
LVL 1

Author Comment

by:livegirllove
ID: 18803272
Ok, I'm feeling extremely dense here.  
I'm using YUI.  I donwloaded the library and examples.
Their example for inline editing  is pulling it's data from a flat file.  I spent about 4 hours reading and trying things but I can't figure out how the query to get the full table data and then post back single fields works.
I think if I could see a code sample using YUI and php and a table in MySQL I could go from there.  I think I'm understanding the principle but I haven't seen the actually queries and how they are called.

for instance how could I duplicate http://developer.yahoo.com/yui/examples/datatable/inlineediting.html

assuming the data came from "tablea"
with coloms:sku,quantity,items,description


0
 
LVL 1

Author Comment

by:livegirllove
ID: 18803339
assuming the query to get the table data is
"SELECT sku,quantity,item,description FROM tablea WHERE blah=blah"

and the update db code snip is

$fieldname = $_GET(THEFIELDBEINGUPDATED)
$content = $_GET(THEDATATOUPDATE)
$sku = $GET_(THEPRIMARYKEYOFTABLE)
UPDATE tablea SET $fieldname = $content WHERE sku = $sku

And I'm only guessing at it being a $_GET.  Is that correct?  




0
 
LVL 1

Author Comment

by:livegirllove
ID: 18827854
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question