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. I saw http://docs.jquery.com/Ajax/jQuery.ajax#options I assume I'd need to use some of this: $.ajax({ type: "POST", url: "success.php", data: "id=41&success=yes", success: function(msg){ alert( "Data Saved: " + msg ); } }); However, I have no idea about the response and stuff
Here's a simple example. But I'm not going to do the whole thing for you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> jquery ajax test </title> <script type="text/javascript" src="jquery-1.2.3.js"></script> <script type="text/javascript"> // this function runs when the dom is ready $(function() { $('#trigger').click(function () { $.ajax( { type: "POST", url: "ajax.php", data: 'answer=yes', success: function(resultText) { $("#theResult").html(resultText); }, error: function(e) { // error with ajax request } }); }); }); </script> </head> <body> <div><a href="#" id="trigger">click here</a></div> <div id="theResult" style="width:50px; text-align:right; background-color:gray;">49</div> </body> </html> Code (markup): <?php if (strlen($_POST['answer'] ) ) { $response = getNewPercentage($_POST['answer']); } else { // error, parameter not passed } header('Content-type: text/plain'); echo $response; function getNewPercentage($answer) { // calculate new percentage with answer; // return 50 as a dummy percentage. return 50; } ?> PHP:
I can't edit my post so I'll have to post another here. I think sending the output inside the if block is better since it would require you to exit in the else block. I'm not sure why I did it that way except that it was late. <?php // FILE: ajax.php if (strlen($_POST['answer'] ) ) { $response = getNewPercentage($_POST['answer']); header('Content-type: text/plain'); echo $response; } else { // error, parameter not passed } function getNewPercentage($answer) { // calculate new percentage with answer; // return 50 as a dummy percentage. return 50; } ?> PHP:
Hey, thanks for that. Because I want to be able to say yes/no to several different items on the page, so I need to like, have the JS get the right ID that its rating. How can I do that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> jquery ajax test </title> <script type="text/javascript" src="jquery-1.2.3.js"></script> <script type="text/javascript"> // this function runs when the dom is ready $(function() { var ajaxInProgress; $('a').click(function (e) { var $target = $(e.target); if (ajaxInProgress) return; if (!$target.is('.ajaxPoll')) return; if ($target.is('.pollYes')) { var answer = 'yes'; } else if ($target.is('.pollNo')) { var answer = 'no'; } else { throw "Target must be of class pollYes or pollNo"; } var resultId = 'result' + $target.attr('id').match(/_[0-9]+$/); ajaxInProgress = true; $.ajax( { type: "POST", url: "ajax.php", data: 'answer=' + answer, success: function(resultText) { $('#'+resultId).html(resultText); ajaxInProgress = false; }, error: function(e) { // error with ajax request ajaxInProgress = false; } }); }); }); </script> </head> <body> <div><a href="#" id="trigger_1" class="ajaxPoll pollYes">click here</a></div> <div><a href="#" id="trigger_2" class="ajaxPoll pollNo">click here</a></div> <div id="result_1" style="width:50px; margin:50px; text-align:right; background-color:white;">49</div> <div id="result_2" style="width:50px; margin:50px; text-align:right; background-color:white;">39</div> </body> </html> Code (markup): <?php // FILE: ajax.php if (strlen($_POST['answer'] ) ) { $response = getNewPercentage($_POST['answer']); header('Content-type: text/plain'); echo $response; } else { // error, parameter not passed } function getNewPercentage($answer) { // calculate new percentage with answer; // return rand() just to show ajax request is working every time you click a trigger return rand(); } ?> PHP:
Small refinement. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> jquery ajax test </title> <script type="text/javascript" src="jquery-1.2.3.js"></script> <script type="text/javascript"> // this function runs when the dom is ready $(function() { var ajaxInProgress; $('.ajaxPollTrigger').click(function (e) { var $target = $(e.target); if (ajaxInProgress) return; if ($target.is('.pollYes')) { var answer = 'yes'; } else if ($target.is('.pollNo')) { var answer = 'no'; } else { throw "Target must be of class pollYes or pollNo"; } var resultId = 'result' + $target.attr('id').match(/_[0-9]+$/); ajaxInProgress = true; $.ajax( { type: "POST", url: "ajax.php", data: 'answer=' + answer, success: function(resultText) { $('#'+resultId).html(resultText); ajaxInProgress = false; }, error: function(e) { // error with ajax request ajaxInProgress = false; } }); }); }); </script> </head> <body> <div><a href="#" id="trigger_1" class="ajaxPollTrigger pollYes">click here</a></div> <div><a href="#" id="trigger_2" class="ajaxPollTrigger pollNo">click here</a></div> <div id="result_1" style="width:50px; margin:50px; text-align:right; background-color:white;">49</div> <div id="result_2" style="width:50px; margin:50px; text-align:right; background-color:white;">39</div> </body> </html> Code (markup):
Okay, can't get this to work and it's delaying my script so .. can anyone send me over some quotes for completing this task, I'm assuming they won't be too much.
I was trying to help you learn rather than completely duplicate the solution that you linked to. If you just want somebody to script the entire solution for you, then this is probably the right forum for that.
Yeah, sorry about that, I got annoyed because I couldn't get it to work. I just created a working script with the help of your example and someone elses example. Just got to edit a bit so it's perfect, but I also learn a bit about jquery in the process and once my project is complete I wanna go back and look at jquery and javascript more.