Ajax Request Help

[crazyryan]

Hey

Could anyone guide me in the right direction on this:

I want something like: http://www.retailmenot.com/view/amazon.com

The part, 'Did this coupon work for you'

I want that, so when yes or no is clicked, the new percentage is brought back.

Someone said I need to do:
Onclick on worked button, send url to php script via ajax that adds +1 to the database and then use mysql and stuff on the php script to return the value of percentage.

However, I'm kinda new to this stuff so .. Can anyone do the javascript bit and I'll do the PHP page?

Thanks, help much appreicated.

[paul_wilkins]

if the javascript bit is done first, it will be more difficult to to the php part and the javascript will most likely require retro-fitting to make it work in with the php solution again.

The best policy here is to get the php working first, then come back to javascript to provide an improved user experience.

[crazyryan]

Okay, my PHP would be like this ...

<?php
include("includes/config.php");

if(isset($_GET['id']) && isset($_GET['success'])) {
    if(!ctype_digit($_GET['id']) {
        die('id isnt numeric');
    } else {
        if($_GET['success'] != "yes" || $_GET['success'] != "no") {
            die('success isnt yes or no');
        } else {
            mysql_query("INSERT INTO `success` (success_id, success_yn) values ('" . $_GET['id'] . "' , '" . $_GET['success'] . "')");
        }
    }
}
?>

[jimfraser]

php script to return the value of percentage

Your php isnt doing that currently.

Here's one way.
HTML fragment

<div id="coupon_1">
	Did it work for you? 
	<button onclick="doAjaxUpdate(this);return false;">Yes</button>
	<button onclick="doAjaxUpdate(this);return false;">No</button>
	<br />
	Stats:<span>0&#37; success rate</span>
</div>

prototype javascript function

function doAjaxUpdate(btn) {
	var couponId = btn.parentNode.id;
	var success = btn.value.toLowerCase();
	var updateSpan = btn.parentNode.getElementsByTagName("span")[0];
	
	new Ajax.Request("updateSuccessPercentage.php", {
		method: "get",
		parameters: "id=" + encodeURIComponent(couponId) + "&success=" & encodeURIComponent(success);
		onSuccess: function(transport) {
			successPercentage = transport.responseText;
			updateSpan.innerHTML = successPercentage + "% success rate";
		},
		onFailure: function (transport) {
			alert("There was a server error handling the ajax request");
		}
	});
}

[crazyryan]

Thank you for that jim, I've updated my PHP as it had quite a few errors:

<?php
include("includes/config.php");

if(isset($_GET['id']) && isset($_GET['success'])) {
    if(!ctype_digit($_GET['id'])) {
        die('id isnt numeric');
    } else {
        if($_GET['success'] != "yes" && $_GET['success'] != "no") {
            die('success isnt yes or no');
        } else {
            mysql_query("INSERT INTO `success` (success_couponid, success_yn) values ('" . $_GET['id'] . "' , '" . $_GET['success'] . "')") or die(mysql_error());
        }
    }
}
?>

Should that javascript be placed in the head tags? It currently is however when clicking yes or no, nothing is inserted into the database.

Also, how would I need to show the success percentage in the PHP file and how would I get it into my original document?

[jimfraser]

Sorry, the ajax function I used requires prototype.js (http://prototypejs.org). There are ways to do it without prototype also but I don't have anything prebuilt handy. That could be why it's not working.

If you look in my doAjaxUpdate function it locates the <span> to be updated and then in the onSuccess callback it populates it with the percentage received.

For your php, do the insert, calculate the new percentage and simply echo it out.