AJAX Add to Favorites without refreshing page.

Posted on 2009-04-05
Medium Priority
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
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

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.


WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.


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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses four methods for overlaying images in a container on a web page
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 look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

762 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