CODEWITHSUNDEEP
phpjquerymysqlajaxcordova
Daan
Daan

Reputation: 71

Combining Ajax, Jquery, mysql, php in Phonegap project doesn't work

I tried to send data to my database using the following code but it just doesn't work. Code is written after this example (http://samcroft.co.uk/2012/posting-data-from-a-phonegap-app-to-a-server-using-jquery/)

If anybody has an idea what's wrong... I appreciate any help.

HTML form 

<form>
    <fieldset data-role="controlgroup">
        <legend>Pick your team:</legend>
        <input type="radio" name="team_name" id="red" value="on" checked="checked">
        <label for="red">Team Red</label>
        <input type="radio" name="team_name" id="blue" value="off">
        <label for="blue">Team Blue</label>       
    </fieldset>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Choose your number:</legend>
        <input type="radio" name="player_number" id="1" value="on" checked="checked">
        <label for="1">1</label>
        <input type="radio" name="player_number" id="2" value="off">
        <label for="2">2</label>
        <input type="radio" name="player_number" id="3" value="off">
        <label for="3">3</label>
        <input type="radio" name="player_number" id="4" value="off">
        <label for="4">4</label>
        <input type="radio" name="player_number" id="5" value="off">
        <label for="5">5</label>
        <input type="radio" name="player_number" id="6" value="off">
        <label for="6">6</label>
        <input type="radio" name="player_number" id="7" value="off">
        <label for="7">7</label>
        <input type="radio" name="player_number" id="8" value="off">
        <label for="8">8</label>
        <input type="radio" name="player_number" id="9" value="off">
        <label for="9">9</label>
        <input type="radio" name="player_number" id="10" value="off">
        <label for="10">10</label>
    </fieldset>
    <label for="player_name">Your name:</label>
    <input type="text" name="player_name" id="player_name" value="">         
    <input type="submit" value="Submit">
</form>

Jquery / Ajax code

$('form').submit(function(){
    var postData = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: postData,
        url: 'http://www.kauwenberg.com/Commander/core/handleplayer_2.php', // 2 !!
        succes: function(data){
            console.log(data);
            alert(data);
            },
        error: function(){
            console.log(data);
            alert(data);
            }
    });

    return false;
});

PHP code on http://www.kauwenberg.com/Commander/core/handleplayer_2.php

<?php
$server = "localhost";
$username = "MA_SECRET";
$password = "MA_SECRET";
$database = "MA_SECRET";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());

mysql_select_db($database, $con);

$team_name = mysql_real_escape_string($_POST["team_name"]);
$player_number = mysql_real_escape_string($_POST["player_number"]);
$player_name = mysql_real_escape_string($_POST["player_name"]);

$sql = "INSERT INTO players (team_name, player_number, player_name) ";
$sql .= "VALUES ($team_name, $player_number, $player_name)";

if (!mysql_query($sql, $con)) {
  die('Error: ' . mysql_error());
} else {
  echo "Comment added";
}

mysql_close($con);
?>

Upvotes: 2

Views: 8741

Answers (5)

Imran Khan
Imran Khan

Reputation: 358

Hi change your submit button to <input type="button" value="Submit" id="submit_button" /> and then change your jQuery event to the following:

$('#submit_button').bind('click',function(e){

    e.preventDefault();
    var postData = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: postData,
        url: 'http://www.kauwenberg.com/Commander/core/handleplayer_2.php', // 2 !!
        success: function(data){
            console.log(data);
            alert(data);
        },
        error: function(){
            console.log(data);
            alert(data);
        }
    });
    return false; 
});

It will alert the response back from the server will be displayed in alert dialog.

Upvotes: 0

punk28r
punk28r

Reputation: 1

You've a spelling mistake as well:

succes: function(data){

"success" is the word.

Upvotes: 0

samvv
samvv

Reputation: 2134

Beware: you aren't quoting your $team_name, $player_number and $player_name in your SQL code which can be very dangerous. The fact that you use mysql_real_escape_string doesn't matter if your values in your query aren't properly quoted out; they will still get parsed as normal SQL.

$sql .= "VALUES ('$team_name', '$player_number', '$player_name')";

It might not be the reason why it is currently not working, but it will definitely get back to you when you start working on other things.

Also, check if your AJAX requests reach the server. Your requests might get blocked by the phone's security policy if they cross multiple domains.

Upvotes: 1

ProllyGeek
ProllyGeek

Reputation: 15856

you may check the last question on this page

http://phonegap.com/about/faq/

and i would recommend using JSON instead.

check this link http://catchmayuri.blogspot.com/2012/01/working-with-json-phonegap-application.html

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

$(document).on('submit','form',function(e){
    e.preventDefault();
    var postData = $(this).serialize();
    $.post('http://www.kauwenberg.com/Commander/core/handleplayer_2.php',postData,
    function(data){ 
        alert(data);
    });    
    return false;
});

try this

Upvotes: 1

Related Questions