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

Question

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

what is the problem?? is it redirecting to form action(same page) without alerting?? — Bhadra
– Bhadra, Commented Nov 23, 2013 at 21:36
"It just doesn't work" in what way? The more specific and clear your question is, the more likely you are to get answers. — Adi Inbar
– Adi Inbar, Commented Nov 23, 2013 at 21:57

Bhadra · Accepted Answer · 2013-11-23 22:11:35Z

1

$(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

answered Nov 23, 2013 at 22:11

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

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

Comments

ProllyGeek · Accepted Answer · 2013-11-23 22:25:17Z

1

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

edited Nov 23, 2013 at 22:25

answered Nov 23, 2013 at 22:15

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

Comments

samvv · Accepted Answer · 2013-11-23 22:30:25Z

1

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.

answered Nov 23, 2013 at 22:30

samvv

2,1741 gold badge21 silver badges31 bronze badges

Comments

punk28r · Accepted Answer · 2014-07-15 10:55:16Z

0

You've a spelling mistake as well:

succes: function(data){

"success" is the word.

answered Jul 15, 2014 at 10:55

punk28r

1

Comments

parth patel · Accepted Answer · 2017-12-23 06:17:00Z

0

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.

edited Dec 23, 2017 at 6:17

parth patel

1417 bronze badges

answered Nov 23, 2013 at 22:13

Imran Khan

3583 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related