Page 2 of 2
Re: Ajax Listener - how does it work?
Posted: Mon Oct 20, 2014 9:52 am
by simonmlewis
I have tried to put that listener code at the end of that PHP code. But I don't see how that tells the screen/page to show the current amount.
Re: Ajax Listener - how does it work?
Posted: Fri Nov 28, 2014 10:01 am
by simonmlewis
Any further info on this please?
I know there are ways to make content from a database that changes, 'change' on screen, so how do you do it?
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 3:34 am
by simonmlewis
Hi all.
So this subject had been raised again by someone I work with.
We add an item to a cart, which is a database table. But they can "Continue Shopping", which just closes the popup, but the "items in cart" doesn't change.
I still don't know how to make that automatically update via AJAX without a page turning over.
I've seen it does in many places. Like Facebook's (1) when you have a new notification in the top right. Or flickr, when you get a new email, a '1' in a red box popups up.
How is this achieved, bearing in mind it has to be checking a database to do it.
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 3:51 am
by simonmlewis
Celauran wrote:Contrived example, but assume shopping cart markup like this. Yes, yours is likely more detailed, has a trolley icon, etc. Doesn't matter.
Code: Select all
<div id="shopping_cart">
<span class="count">2</span>
</div>
You have your event listener attached to your "Add item to cart" buttons. Have the script that updates the DB also return the count of items in the user's cart. The success callback can then use that return value to update the markup above.
Code: Select all
$('.add_to_cart').click(function() {
// Collect data
$.ajax({
url: "some_file.php",
type: "POST",
data: whatever,
success: function(data, status, request) {
var cart_count = data;
$('#shopping_cart .count').html(cart_count);
}
});
});
Code: Select all
<script>
function precheck(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax_addtocart.php?q="+str,true);
xmlhttp.send();
}
success: function(data, status, request) {
var cart_count = data;
$('#shopping_cart .count').html(cart_count);
}
</script>
Code: Select all
<?php
<div id='shopping_cart'>
<span class='count'></span>
</div>
?>
I'm probably just being a bit dim here. I get what you are talking about. But I don't see where the code codes, nor actually how it's meant to do it. This doesn't work.
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 6:25 am
by Celauran
You're trying to assign the success parameter of the object you're passing to jQuery's .ajax method, except you aren't calling jQuery's .ajax method and are setting an object parameter outside of an object so that's not going to work. Are you using jQuery? You could get rid of that entire block of JS you've got there and pretty much drop in the code I provided, just replacing a few placeholders with actual data.
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 6:51 am
by simonmlewis
I cannot change the code of what works, since I have been paid to make that happen.
Can I alter your code to make it do as described?
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 8:11 am
by Celauran
Of course. I've already described what needs to happen; fire off a request, return the new item count, update the DOM accordingly.
Re: Ajax Listener - how does it work?
Posted: Mon Jan 26, 2015 8:38 am
by simonmlewis
Ok look, I'm dumb with this. As you say, of course it can be done with my existing code, but please... how?! You can see I have tried, but I am getting nowhere with it.