Solved

Ajax to spice up a PHP script

Posted on 2007-03-26
9
220 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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.

733 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