Bringing in multiple field values using $.ajax

Question

Currently Im trying to build a poll using JQuery.

$('#next').click(function(){    

$.ajax({                       
    type:'POST',
    url: 'getNextPoll.php?pg=1',
    dataType: json,
    success: function() {
    $("#a .ui-btn-text").text(data.answera);
    $("#b .ui-btn-text").text(data.answerb);
    $("#c .ui-btn-text").text(data.answerc);
    $("#d .ui-btn-text").text(data.answerd);
        } // end of success callbac     
     });  
});

I have four buttons with id= a..d. What i was trying to do was bring in the four answer values and put each one in a button. For some reason though it only allows me to get one value $row[0] and nothing else? Can anyone tell me where am i doing wrong?

Thanks for your time.

EDIT: Here's php code

<?php 
     require_once('connection.php');
    require_once('constants.php');

    $pg = isset($_GET['pg']) ? $_GET['pg'] : 0;
    $nxtPage = $pg++;
    $offset = (1 * $pg) - 1;
    $result = mysql_query("SELECT * FROM Questions ORDER BY pk_Id DESC LIMIT 1" .  " OFFSET " . $offset) or die(mysql_error());

    $row = mysql_fetch_array($result, MYSQL_ASSOC); 

    echo json_encode($row); 

?>

I don't see the code trying to set any more value than #a's. Are you posting the full code which doesn't work? Also note that you're updating contents with a static text ($row[0]), not with the data returned by the ajax call. — roirodriguez
– roirodriguez, Commented May 10, 2011 at 19:29
Are you iterating? That may be your problem as i need to see the code to properly figure out the problem. — BRampersad
– BRampersad, Commented May 10, 2011 at 19:31
Please fix that revision/rollback mess we've created, now the php code uses GET method and js uses POST method... Leave the original question with the full code (php and js) — roirodriguez
– roirodriguez, Commented May 10, 2011 at 22:03

bpeterson76 · Accepted Answer · 2011-05-10 19:39:53Z

2

Here's a typical Ajax query for my app, it can illustrate some points:

$.ajax({
url: "link.php",                   
timeout: 30000,
data: 'user_id='+id,  //data in to php
dataType: 'json',     //data type being returned
error: function(XMLHttpRequest, textStatus, errorThrown)  {
    alert("An error has occurred making the request: " + errorThrown)
},
success: function(returndata){                                                      
    $('#row1').html(returndata.value1);
            $('#row2').html(returndata.value2);
}

});

So, to get proper return results in a manner you're using you need to not only send back the proper data (json, XML, etc) but also tell jQuery what it's getting. Only then will it know how to properly parse it out in the returndata callback.

One of the easiest ways to make this happen is to have your ajax page call another page that does --php stuff-- and returns an array. Then, just echo json_encode($array) on that page and nothing else. As long as you declare your datatype as Json, you'll have access to your data in the success function via returndata.datafieldname. If you had a field in your array called id, and your success function used the variable data to get the return results, you could access that data inside the success function via data.id.

In your specific example, it looks like you're trying to set values with PHP data that's not returned by Ajax. If that's the case, why not just do a $.post?

answered May 10, 2011 at 19:39

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

L-Samuels Over a year ago

sorry if anyone saw it, just realised i pasted some code in accidentally.

roirodriguez Over a year ago

I edited your question to include that code, and my answer is based on that code, so let me know if this is all wrong

L-Samuels Over a year ago

thanks @roirodriguez. I think you ve got it. gonna test it now.

L-Samuels Over a year ago

hey @roirodriguez codes been edited to show where code progess so far. Im new to web developement, in particular ajax/json so any explanations are very much appreciated.

roirodriguez · Accepted Answer · 2011-05-10 19:59:16Z

I think this would work (untested), according to bpeterson76 answer:

Your php:

<?php 
require_once('connection.php'); 
require_once('constants.php'); 

$pg = isset($_GET['pg']) ? $_GET['pg'] : 0; 
$nxtPage = $pg++; $offset = (1 * $pg) - 1; 
$result = mysql_query("SELECT * FROM Questions ORDER BY pk_Id DESC LIMIT 1" . " OFFSET " . $offset) or die(mysql_error()); 
$row = mysql_fetch_array($result, MYSQL_ASSOC); 

echo json_encode($row); 
?>

Then, your js:

$('#next').click(function(){    

     $.ajax({                       
     type:'GET',
     url: 'getNextPoll.php?pg=1',
     dataType: json
     success: function(data) {
     $("#a .ui-btn-text").text(data.answera);
     $("#b .ui-btn-text").text(data.answerb);
     $("#c .ui-btn-text").text(data.answerc);
     $("#d .ui-btn-text").text(data.answerd);
    } // end of success callback

This all assuming your relevant mysql fields are named answera, answerb, answerc and answerd.

Collectives™ on Stack Overflow

Bringing in multiple field values using $.ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related