Some problems about using ajax to submit form data into MySQL then change page in phonegap

Question

I am developing a phonegap app, and I am trying to submit my sign up form and send the data into MySQL through ajax, then after submit I wanna pop up a page to inform the user whether it is successes. I can send the data and get a popup page but it seems like I have something wrong to get the dialogY page which will show on the below.

This is my html

    <html> 
    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height
    <link some css here….>
<script src="js/jquery-1.10.2.js" ></script>
<script src="js/jquery.mobile-1.4.0.js" ></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="js/signup.js"></script>
     <script>

    function onBodyLoad(){
    document.addEventListener("deviceready",onDeviceReady,false);
    }

    </script>
    <title>DTSB System</title>
</head>

continue

<body onload="onBodyLoad()">
    <div data-role="page" id="signinpage" >
    <div data-role="header" data-theme="b">
    <h1>Sign in</h1>
    </div>
    <div data-role="content" data-theme="a">
    <form name="signinform" id="signinform" align="center" method="post" action="home.html" data-ajax="false">
        <div data-role="fieldcontain">
        <input type="text" name="fusername1" id="fusername1" placeholder="Username" class="required">
        </div>
        <div data-role="fieldcontain">
        <input type="password" name="fpasswd1" id="fpasswd1" placeholder="Password" class="required">
        </div>
        <input type="submit" name="signinsubmit" data-inline="true" data-icon="arrow-u-r" data-transition="flip" value="Sign in">
        <a href="#signuppage" data-role="button" data-inline="true" data-icon="edit" data-transition="slidedown">Sign up</a>
    </form>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed">
    <h1>IZUMEI</h1>
    </div>
</div>

<div data-role="page" id="signuppage" data-theme="a">
    <div data-role="header" data-theme="b">
    <h1>Sign up</h1>
    </div>
    <div data-role="content" >
    <form name="signupform" id="signupform" align="center">
        <div data-role="fieldcontain">
        <label for="fusername2">Username:</label>
        <input type="text" name="fusername2" id="fusername2" class="required" minlength="3">
        </div>
        <div data-role="fieldcontain">
        <label for="fpasswd2">Password:</label>
        <input type="password" name="fpasswd2" id="fpasswd2" class="required" minlength="5">
        </div>
        <div data-role="fieldcontain">
        <label for="fconfirmpasswd">Confirm Password:</label>
        <input type="password" name="fconfirmpasswd" id="fconfirmpasswd" class="required passmatch" minlength="5">
        </div>
        <div data-role="fieldcontain">
        <label for="femail">E-mail:</label>
        <input type="email" name="femail" id="femail" class="required">
        </div>
                <input id="register" type="submit" data-inline="true" value="Registration">
        <a href="#signinpage" data-role="button" data-inline="true" data-icon="delete" data-iconpos="right" data-transition="slideup">Cancel</a>
    </form>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed">
    <h1>IZUMEI</h1>
    </div>
</div>

    <div data-role="page" id="dialogY" data-theme="a" data-dialog="true">
        <div data-role="header" data-theme="b">
            <h1>Successfully sign up</h1>
        </div>
        <div data-role="content">
            <p align="center">Congradulations!Welcome to be one of us!</p>
        </div>
        <div data-role="footer" data-theme="a" align="center" data-position="fixed">
            <a href="#signinpage" type="button">Sign in now</a>
        </div>
    </div>

    <div data-role="page" id="dialogN" data-theme="a" data-dialog="true" data-rel="back">
        <div data-role="header" data-theme="b">
            <h1>Sign up failed</h1>
        </div>
        <div data-role="content">
            <p align="center">Sorry, something wrong when sign up, <span>please try again later</span></p>
        </div>
    </div>

</body>
</html>

This is my php file

$username=mysql_real_escape_string($_POST['fusername2']);
$password=sha1($_POST['fpasswd2']);
$email=mysql_real_escape_string($_POST['femail']);

$sql = "INSERT INTO users (user_name, user_pass, user_email)";
$sql .= "VALUES('$username','$password','$email')";

$exist = "SELECT * FROM users WHERE user_name= '". $username . "'";
$query_result = mysql_query($exist, $con);

if(mysql_num_rows($query_result) == 0) {
if(isset($username)&& isset($password) && isset($email)){
    if(mysql_query($sql, $con)){
        echo "Insert success!";
    }else{
        die ('Error: ' . mysql_error());
    }
}else{
    die ('Error: There are empty fields needed to be filled' . mysql_error());
}
}else{
die ('Error: User already exist' . mysql_error());
}

mysql_close($con);
?>

This is my js file

$(document).on("pageshow", "#signuppage", function() {
$.validator.addMethod("passmatch", function(value) {
return value == $("#fpasswd2").val();
}, 'Confirmation password must match.');
});


$(document).ready(function(){

$('#signupform').validate();

$('#signupform').submit(function(event){

    event.preventDefault();

    var formData = $(this).serialize();

    $.ajax({
    type:'POST',
    data: formData,
    url:'http://localhost/doctor/insert_info.php',
    cache: false ,
    success: function(){
        $.mobile.changePage("#dialogY");
    }
    error: function(){
        $.mobile.changePage("#dialogN");
    }
    });

    return false;
}); 
});

I have tried a lot of methods but I still can't get the dialogY page, It seems like I can not get the success feedback, even if I submit the right data. When I run these codes in emulator it works, but on safari it fails. Is there any problem with my code?

Answer 1

Are all of the assets being served from "localhost" (which I see in the ajax call)? If not Safari may be failing due to the Same-Origin policy .

Just make sure you are pointing all of our resources at the same hostname.

When you turn on error reporting in Safari are you seeing anything in the console?

Some problems about using ajax to submit form data into MySQL then change page in phonegap

Question

1 answers

solution1
0 2013-12-30 16:15:50

Some problems about using ajax to submit form data into MySQL then change page in phonegap

Question

1 answers

solution1 0 2013-12-30 16:15:50

solution1
0 2013-12-30 16:15:50