AJAX Display Images - php

Question

I have a page that shows whether a user has paid or not. If they haven't paid I need to show them an image of a big red X and display a payment button, and if they have paid display a big green check. I know how to do the code for the php script, lets call it pay.php, but I need to iron out the logic for the main page's ajax. So I'm thinking something like this:
<div id="payment">
<div id="image"></div>
<div id="pay_text></div>
</div>
<script>
$(document).ready(function(e) {
if(<?php echo $is_logged_in; ?>) {
$('#payment').load(function() {
$.ajax({
data: $this.serialize(), // get the form data
type: "POST", // GET or POST
url: "Scripts/pay.php", // the file to call
complete: function(data) {
if(data=="Yes") {
$('#image') //do some jquery to make the correct image display here
$('#pay_text').text("Yah you paid");
} else {
$('#image') //do some jquery to make the correct image display here
$('#pay_text').text("Sorry you didn't pay");
}
}
});
}
}
});
</script>
So basically the script would echo back yes or no. And I only want to evaluate this load after the user has logged in (i need to see if that specific user paid). So is my logic write or am I way off?

Answer 1

You probably should'nt use load that way, and there really is no need for it.
Your PHP variable $is_logged_in would of course have to be true before the ajax function will run, and returning true or false is usually the way to go with code, not returning yes or no, and if data is either true or false you can stick it right in the if statement, no fuzz!
As for sending form data with the ajax function, what form? And what is $this?
You'll have to figure out if the user paid or not on the serverside, and you don't really need any data from the client to do that, all you need to do is check your database or whatever it is you're using to see if that user paid, and return true or false.
<script type="text/javascript">
$(document).ready(function() {
if(<?php echo $is_logged_in; ?>) {
$.ajax({
type: "POST",
url: "scripts/pay.php"
}).done(function(data) {
if (data) {
$('#image').css('background', 'url(/yes.png)');
$('#pay_text').text("Yah you paid");
}else{
$('#image').css('background', 'url(/no.png)');
$('#pay_text').text("Sorry you didn't pay");
}
});
}
});
</script>​​​​​​​​​