How do I create an Ajax Listener, so content changes dynamic
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
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??
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.
All the best from the United Kingdom.
- 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
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)
Re: How do I create an Ajax Listener, so content changes dyn
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
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...??
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.
All the best from the United Kingdom.
Re: How do I create an Ajax Listener, so content changes dyn
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
Easy.Submit the POST
Yep - done.request via AJAX
What session? Do I put the value into a session rather than $row->cartamount ?update the session
How?return the new count, update the cart display
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do I create an Ajax Listener, so content changes dyn
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
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.
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.
All the best from the United Kingdom.
Re: How do I create an Ajax Listener, so content changes dyn
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
This is the bit I'm stuck on.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.
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.
All the best from the United Kingdom.
Re: How do I create an Ajax Listener, so content changes dyn
It's just PHP. You don't need to do anything differently there, other than echo the result.
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.
Code: Select all
SELECT COUNT(*) FROM cart WHERE user_id = 123-
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
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" ??
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.
All the best from the United Kingdom.
Re: How do I create an Ajax Listener, so content changes dyn
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.
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.
Re: How do I create an Ajax Listener, so content changes dyn
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
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.
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.
All the best from the United Kingdom.