Solved

AJAX Add to Favorites without refreshing page.

Posted on 2009-04-05
8
2,686 Views
Last Modified: 2013-12-12
A little AJAX help please! All of the PHP code is functional and ready to go. All I need is some supporting AJAX to fill in the gaps. Here's what I need help with:

Part 1:
On my page, a user has a group of results. In each result, there will be a "Add to Favorite" button. When the user selects the "Add to Favorite" button, I would like it call my php function addFaves($MLS_ACCT) that inserts all info into the mySQL db without refreshing the page.

Part 2:
On the same page, in the right hand corner, there is a "My Favorites" div. After Part 1 is complete, I would like to refresh the "My Favorites" div to include the new results. The php function called in this div is getFaves($USER_ID).

Any and all help would be great!!!!! Thanks!
0
Comment
Question by:webseth
[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
  • 4
  • 3
8 Comments
 
LVL 4

Expert Comment

by:mahadevan_v
ID: 24074203
http://www.w3schools.com/Ajax/ajax_example.asp

Check this..

set the innerHTML of the favourites div to the html returned from the server
0
 
LVL 1

Author Comment

by:webseth
ID: 24074254
AJAX is completely over my head at the moment. I'm good with PHP but Javascript and AJAX are not languages that I'm at all familiar with. I'll have to take a look to try and understand the link. Maybe I can figure it out :)
0
 
LVL 5

Expert Comment

by:striker46
ID: 24079260
Read here: http://www.aleixcortadellas.com/main/2009/02/19/364/

Basically you can adapt the example to achieve the goal mahadevan suggests (because the example does fairly the same, keep reading). You say you already got the PHP part done and working - perfect! This PHP page you would call - with AJAX - in the way which in the example is:

<a href="javascript: getPage('home.php?','content')">Home</a>

Then see the JS part of the example to understand how AJAX works and read the walkthrough.

"set the innerHTML of the favourites div to the html returned from the server "

This is what the example does: setting the innerHTML of a DIV to the html content returned from server. The only difference between the example and your situation is, you're not importing HTML content of a static page (like the example does) but returning a parsed PHP page. The process is the same, only the nature of the page loaded differs.

Not sure I've been clear enough, but if you still have doubts let me know.

Regards

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:striker46
ID: 24079345
Okay I re-read your post and I think I missed the point.

Part one:

Use AJAX POST. Example and working code here:
http://www.aleixcortadellas.com/main/2009/03/01/ajax-post/

Trigger the function with the Add fav button. This will perform the operations from the PHP code in the MySQL database in a seamless manner, without submitting the whole page. User can keep browsing, AJAX will perform the POST asynchronously.


Part two:

Read this example and tweak it so not to refresh automatically but to trigger the retrieval of MySQL data on a specific event (e.g. click, whatever).

The example: http://www.aleixcortadellas.com/main/2009/02/11/232/
How to tweak: http://www.aleixcortadellas.com/main/2009/02/11/232/#comment-167

This will retrieve and display MySQL results once the event fires the function.


Regards
0
 
LVL 1

Author Comment

by:webseth
ID: 24080375
I'm having a little trouble, plus my criteria has changed just a bit. New Rules:

1. There will be an "Add to Favorite" button, as well as a "Remove from list" button. Both actions will call a different remote file (one to add to a favorite, the other to remove that result permanently from the list).

2. The PHP code is still 100% complete, just need the AJAX help.

I tried striker46's TUT for adding, but I apparently suck at AJAX and am not getting it to work!!!
0
 
LVL 5

Expert Comment

by:striker46
ID: 24080443
Hello,

I am writing a new tutorial which will be available either today or tomorrow. It deals specifically on how to change innerHTML of a DIV with a button click, just what was suggested to you above. So stay tuned and you will have the sample code, perhaps it will be easier than modifying the example mentioned above on your own.

This same tutorial will show you how to pass variables with AJAX, to the PHP file. So as far as I can now think of it, it should suffice to meet your needs. I'll report back here when I have it done, let you know the exact link and provide further assistance if needed.

Regards


0
 
LVL 5

Accepted Solution

by:
striker46 earned 500 total points
ID: 24081544
There you go my friend:
http://www.aleixcortadellas.com/main/2009/04/06/581/

And a small demo:
http://www.aleixcortadellas.com/demos/ajaxmysql/

It works passing the MySQL and PHP vars thru GET.

I explained it as good as I could, and it is almost what you need for your example. The difference is, you might want to assign dynamically the MySQL variables in index.html JS functions; but with PHP knowledge this should be easy.

For further assistance, let me know.

Regards
0
 
LVL 1

Author Closing Comment

by:webseth
ID: 31566888
THANK YOU!
0

Featured Post

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

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

736 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