1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making AJAX Requests with jQuery

Discussion in 'jQuery' started by crazyryan, Mar 4, 2008.

0
  1. #1
    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
     
    crazyryan, Mar 4, 2008 IP
  2. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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:
     
    LogicFlux, Mar 4, 2008 IP
  3. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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:
     
    LogicFlux, Mar 5, 2008 IP
  4. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #4
    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?
     
    crazyryan, Mar 5, 2008 IP
  5. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #5 
    

<!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:
     
    LogicFlux, Mar 5, 2008 IP
  6. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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):
     
    LogicFlux, Mar 5, 2008 IP
  7. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #7
    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.
     
    crazyryan, Mar 6, 2008 IP
  8. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    LogicFlux, Mar 6, 2008 IP
    northpointaiki likes this.
  9. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #9
    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.
     
    crazyryan, Mar 6, 2008 IP