How do I create an Ajax Listener, so content changes dynamic

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do I create an Ajax Listener, so content changes dynamic

Post by simonmlewis »

I have often tried to figure this out, but never cracked it.

Let's say I am on a product page, and we have a stock field in the database (db_stock).
So it shows on screen "Items in Stock: 5".

If one item sells, and the db_stock is changed to "4", how do I create a listener that looks at that field, and if it changes, it automatically changes on screen.

You see it on Facebook when someone sends you a message and it pops up in the top right corner. I guess it's done via a listening, but no idea how.

Is it straight forward, does it take one huge PHP file of code to run it??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: How do I create an Ajax Listener, so content changes dyn

Post by Christopher »

You can look into server push technologies, websockets, etc. Simpler might be to have you page poll on a javascript timer and fetch via Ajax the latest values.
(#10850)
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

You'll need to poll the server periodically and update the target as it changes. This would normally be done via some JS framework on the front-end, though you could also do it through jQuery using a continuous loop, I suppose. Unless people spend a long time looking at the product pages and the stock is flying off the shelves, it sounds like it may be more work than it's worth.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

Yes. I guess I am thinking more about other opportunities to use such a method.
Actually no, I wouldn't use it for stock, but that does help explain what I want to happen.

We had a scenario earlier in the year when someone added a Sample Request to a db cart, and I wanted it to happen via Ajax. That bit was easy. It was the "Items in Cart" at the top that I couldn't crack. So instead I made it work on a simple POST form.

The experience didn't end up being as good for the user, though it did work.

But you see what I mean? Maybe it's a method whereby, when an Ajax call happens, or a button on screen is trigger than runs ajax, the listener elsewhere on the page then updates it...??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

That's something entirely different and should be considerably simpler. Submit the POST request via AJAX, update the session, return the new count, update the cart display.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

Submit the POST
Easy.
request via AJAX
Yep - done.
update the session
What session? Do I put the value into a session rather than $row->cartamount ?
return the new count, update the cart display
How?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

I assumed you were storing the user's cart in session data. How exactly each step of the process will work depends on your existing code and how you've implemented things. The gist of it is that clicking 'add to cart' fires off an async request to some server-side function that 1. adds the item to the user's cart, 2. calculates and returns the number of items in said cart.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

No - it was stored in a database.
They could only request if they are logged in. So if they switch to mobile, their cart is viewable there too.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

The principle remains the same. Fire off AJAX request, update cart in DB, get count of items in cart from the DB, return that count. Since it's an AJAX request, you'll want to echo a response, possibly JSON encoded depending on the structure required.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

get count of items in cart from the DB, return that count. Since it's an AJAX request, you'll want to echo a response, possibly JSON encoded depending on the structure required.
This is the bit I'm stuck on.

How do I do that?
I can get a count obviously, but how do I do that, in the background, so that when Ajax has updated the DB, the page then shows the new value.. without the page turning over?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

It's just PHP. You don't need to do anything differently there, other than echo the result.

Code: Select all

SELECT COUNT(*) FROM cart WHERE user_id = 123
or whatever. Simple SQL query, fetch result, echo. This sends the count back to your original AJAX call, and you can then update the DOM.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

No I know how to do a query... but how does that updated on the page... without the page "refreshing"...??
What is it that's in the Ajax submission, that makes this query... "run" ??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

http://api.jquery.com/jQuery.ajax/

The item count you echo gets passed as input to the success callback. Use that to target the appropriate DOM element and update its contents.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I create an Ajax Listener, so content changes dyn

Post by Celauran »

Pseudo-code example of what it all might look like. I have omitted the PHP side as you said you have that sorted.

Code: Select all

$('.add_to_cart').click(function(event) {
    var obj = $(this);
    var item = obj.data('item');
    var qty = obj.val();
    $.ajax({
        url: '/some/path',
        method: 'POST',
        data: {
            item_id: item,
            quantity: qty
        },
        success: function(data) {
            $('.cart_selector_here').text(data.count);
        }
    });
});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I create an Ajax Listener, so content changes dyn

Post by simonmlewis »

I take it the "URL" part is the path to the PHP file that runs all the database query code?
What is the "item_id: item, quantity: qty"?
How is that taking information from the query, as I think I see that then going into the next success: part of the function.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply