Solved

AJAX Add to Favorites without refreshing page.

Posted on 2009-04-05
8
2,737 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
Technology Partners: 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!

 
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

Industry Leaders: 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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

717 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