Return a variable from Php to JQuery Ajax

Question

What I'm Trying to Do
I want to send a user's name and score to my php page where it inserts the data into the database, then spits out an html string showing the top ten scores.

What's Actually Happening
I enter the user's name and score and click submit. The data is sent over to php which then stores it in the database. The php file then constructs the string correctly which I can see by visiting the php page directly. However, the string is not returned back to my JQuery.

$("#leaderboardForm > input[type=image]").click(function() {
    var theName = $("input#leaderboardName").val();
    var theScore = $("input#theScore").val();
    $.ajax({
      type: "POST",
      url: "../admin/submitleaderboard.php",
      data: { leaderboardName: theName, theScore: theScore },
      dataType: "html",
      success: function(leaderboard) {
        $("div#deadStats").html(leaderboard);
      },
      error: function() {
          alert("An error occured submitting your score.");
      }
    });
});

    $name = $_POST['leaderboardName'];
$score = $_POST['theScore'];

$sql="INSERT INTO leaderboard (leaderboard_date,leaderboard_name,leaderboard_score) VALUES (CURDATE(),'$name','$score')";
$result = mysql_query($sql);

$sql="SELECT * FROM leaderboard";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
    $leaderboard = $leaderboard . "<div style='width: 433px; padding: 8px; overflow: hidden; border: 1px solid #300; margin-bottom: 5px;'>";
    $leaderboard = $leaderboard . "<div style='width: 200px; height: 30px; float: left;'>";
    $leaderboard = $leaderboard . "<span style='color: #EFEFEF; font-weight: bold; font-size: 20px;'>" . $row['leaderboard_name'] . "</span></div>";
    $leaderboard = $leaderboard . "<div style='width: 200px; height: 30px; float: left;'>";
    $leaderboard = $leaderboard . "<span style='color: #A00; font-weight: bold; font-size: 20px;'>" . $row['leaderboard_score'] . "</span></div>";
    $leaderboard = $leaderboard . "</div>";
}
echo $leaderboard;
mysql_close();

in your $.ajax, dataType: "json", means you're going to return json data but your returned data doesn't seem like json — Ejaz
– Ejaz, Commented Apr 3, 2013 at 22:02

score 1 · Accepted Answer · 2013-04-03 22:11:28Z

1

Your $.ajax method expects json response. You're returning text/plain. change last php line into:

echo json_encode($leaderboard);

It will work like that but to be really correct, you should probably add:

header('Content-Type: application/json');

To the top of your PHP page before anything is outputted too.

Update

I see you're reading through database rows and echoing it in php. Then you want to append it onto your page.

The easiest way to do this is to just remove dataType: "html" part in your $.ajax call. (Don't do any of the things above update title, I assumed you were returning an array there).

edited Apr 3, 2013 at 22:11

answered Apr 3, 2013 at 22:01

user2742648

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

6 Comments

DoomageAplentty Over a year ago

I have made these updates to my code, tested it and still get the same result.

user2742648 Over a year ago

Read the update, don't do any of the stuff I told you above, do just what I said in update part.

user2742648 Over a year ago

Can't be. You must have a problem somewhere else then. Check if your div#deadStats is ok. Add alert(leaderboard) to your success event to check if it is being called and if data is passed.

DoomageAplentty Over a year ago

No luck with the alert box. The only box that appears is the error alert. I am still not receiving any response data though according to Firebug and developer tools.

user2742648 Over a year ago

So there is something wrong with your response. I see you use POST method, are you reading data sent by ajax using $_REQUEST['variable_name']? Check your file path too, is it "hitting" the file at all?

|

Pevara · Accepted Answer · 2013-04-03 22:02:19Z

0

You say you are expecting html as an answer, yet you declare the datatype of your ajax request to json:

dataType: "json"

Try removing it, or setting it to html.

answered Apr 3, 2013 at 22:02

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

6 Comments

DoomageAplentty Over a year ago

I was trying the html datatype before with no luck.

Pevara Over a year ago

did you inspect the ajax response (network tab in chrome developer tools)? What is the actual response? And did you try removing dataType all together, ajax should try to determine it automaticllly if the property is left out.

DoomageAplentty Over a year ago

The actual response reads "This request has no response data available."

Pevara Over a year ago

then it will be on the php side... try to do a print_r of the $row array and see if you get at least something in your response now...

DoomageAplentty Over a year ago

When I visit the php page directly, it prints the leaderboard string perfectly.

|

DoomageAplentty · Accepted Answer · 2013-04-04 01:44:52Z

0

I think I may have found the solution.

For some reason, if I am using an input>image or input>submit as the trigger for my Ajax, I get the error. If I use a div/span/textfield or any other element that does not typically submit a form, it works just fine.

Can anybody elaborate on this?

answered Apr 4, 2013 at 1:44

DoomageAplentty

2,7328 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

Return a variable from Php to JQuery Ajax

3 Answers 3

Update

6 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

6 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related