CODEWITHSUNDEEP
phpajaxjquery
L-Samuels
L-Samuels

Reputation: 2832

Bringing in multiple field values using $.ajax

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); 

?>

Upvotes: 1

Views: 532

Answers (2)

roirodriguez
roirodriguez

Reputation: 1740

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.

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

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?

Upvotes: 2

Related Questions