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

AJAX Add to Favorites without refreshing page.

Posted on 2009-04-05
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!
Question by:webseth
  • 4
  • 3

Expert Comment

ID: 24074203

Check this..

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

Author Comment

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 :)

Expert Comment

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.


Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.


Expert Comment

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:

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.


Author Comment

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!!!

Expert Comment

ID: 24080443

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.



Accepted Solution

striker46 earned 500 total points
ID: 24081544
There you go my friend:

And a small demo:

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.


Author Closing Comment

ID: 31566888

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
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…
The viewer will learn how to count occurrences of each item in an array.

809 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