Ajax Listener - how does it work?

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:

Re: Ajax Listener - how does it work?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Ajax Listener - how does it work?

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Ajax Listener - how does it work?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Ajax Listener - how does it work?

Post 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.
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: Ajax Listener - how does it work?

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Ajax Listener - how does it work?

Post 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?
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: Ajax Listener - how does it work?

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Ajax Listener - how does it work?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply