CODEWITHSUNDEEP
phpjqueryajax
DoomageAplentty
DoomageAplentty

Reputation: 2732

Return a variable from Php to JQuery Ajax

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

Upvotes: 0

Views: 243

Answers (3)

DoomageAplentty
DoomageAplentty

Reputation: 2732

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?

Upvotes: 0

user2742648
user2742648

Reputation:

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

Upvotes: 1

Pevara
Pevara

Reputation: 14308

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.

Upvotes: 0

Related Questions