Login with Phonegap, AJAX, PHP and mySQL not working

Question

I searched through the forums anything that help me and nothing is working... I'm trying to do a login on Phonegap using a AJAX call to a PHP file located in a remote server but the PHP file is not returning anything... I post my codes:

The AJAX call:

$.ajax({
    type: "POST",
    data: 'userMail='+user+'&userPassword='+password,
    dataType : 'html',
    url : "http://www.eega.nl/app/login.php",
    crossDomain: true,
    async: false,
    success: function(data){
        if(data!='error'){
            window.localStorage["userId"] = data;
            location.href = "schedule.html";
        }else{
            alert("failed login");
            location.href = "index.html";
        }
    },
    error: function(){
        alert("error");
        window.open('schedule.html');
    }      
});

The PHP file:

<?php
  include 'connect.php';
  header('Access-Control-Allow-Origin:*'); 
  header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, REQUEST');
  header('Content-Type: application/json; charset=utf-8');
  header('Access-Control-Max-Age: 3628800');
  $data = array();

  $userMail = $_POST["userMail"];
  $userPassword = $_POST["userPassword"];
  $cryptpass = md5($userPassword);

  $sql = "SELECT tr_adr_id FROM elo_users WHERE email = '" . $userMail . "' AND crypt = '" . $cryptpass . "'";
  //mysql_real_escape_string($userMail),
  //mysql_real_escape_string($cryptpass));
  $result = mysqli_query($sql);
  //if($data = mysql_fetch_array($result)){
  while($row = mysqli_fetch_array($result)) {
    $data = $row['tr_adr_id'];
  }
  echo $data["tr_adr_id"];

  mysqli_free_result($data);

  mysqli_close();

?>

I tried to do the AJAX call with POST and GET and in the PHP file with the $_POST, $_GET and $_REQUEST and nothing of that worked for me...

Thank you in advance! I still working on that trying to figure out what is wrong in my code...

EDITED:

The index.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=320" user-scalable="no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/docs.min.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
    <link rel="stylesheet" href="css/general.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>  
    <script src="js/functions.js"></script>
    <title>EegaApp</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
    <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
    <div id="eegaLogo">
        <img class="bottom" src="images/eega_logo_loading.jpg"/>
        <img class="top" src="images/eega_logo.jpg"/>
    </div>
    <a href="http://www.eega.nl/" data-mini="true" style="color:red; position: absolute; margin-left:35%; margin-top:43.5%; text-decoration:none;">www.eega.nl</a>

    <!--*********Login form********-->
    <form id="loginForm" class="form-signin" role="form" style="width:50%; text-align: center; margin-top: 55%; margin-left: 25%;" method="post">
        <input id="userMail" name="userMail" class="form-control" type="email" autofocus="" required="" placeholder="Email"></input>
        <input id="userPassword" name="userPassword" class="form-control" type="password" required="" placeholder="Password"></input>
        <div>
            <input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
            <label for="checkbox-mini-0">Remember me</label>
        </div>
        <button type="submit" data-mini="true" onClick="login()">Login</button>
    </form>
    <!--*********End form*********-->

    <!--THIS LINE IS JUST FOR TEST-->
    <a href="schedule.html">schedule</a>

    <!--*********Footer*********-->
    <div id="footer">
        <script>
            function openExternal(elem) {
                window.open(elem.href, "_system");
                return false; // Prevent execution of the default onClick handler 
            }
        </script>
        <a class="col-xs-4" href="http://9292.nl/#" target="_blank" onClick="javascript:return openExternal(this)"><img id="footer-icon" src="images/9292_icon.jpg" style="width: 60px; height: 60px;"/></a>
        <a class="col-xs-4" ><img id="footer-icon" src="images/maps_icon.jpg" style="width: 60px; height: 60px;"/></a>
        <a class="col-xs-4" ><img id="footer-icon" src="images/call_icon2.jpg" style="width: 60px; height: 60px;"/></a>
    </div>
    <!--********End footer*********-->
</body>

use var_dump($data["tr_adr_id"]) to see if something is in that variable .. because i think there is an issue .. you are already getting the child element $data = $row['tr_adr_id']; and then again iterating here at echo $data["tr_adr_id"]; .. i think you should just echo $data; — Qarib Haider
– Qarib Haider, Commented Aug 27, 2014 at 13:25

Goddard · Accepted Answer · 2014-08-27 22:07:28Z

You are doing things a little difficult for yourself the way everything is laid out. Here are a few examples that will help you fix your code.

Notice how the data:{} is laid out. Notice how the success is laid out.

                $.ajax({
                type: "GET",
                url: "../ajax.php",
                dataType: "json",
                data: {
                    type: "getLineComments",
                    saleId: $(this).attr('saleId'),
                    lineId: $(this).attr('lineId')
                },
                success: function (json) {
                    $content.empty();
                    $content.slideToggle(500, function () {
                    if(json.Row !== undefined && json.Row.length > 0)
                    {
                        for(var i=0;i < json.Row.length;i++)
                        {
                            var item = json.Row[i];
                            //console.log(item);
                            //console.log(item.REMARK_LIN);
                            $content.append("<li>" + item.REMARK_LIN + "</li>");
                        }
                    }

                    else
                    {
                        if(json.Row !== undefined)
                            $content.append("<li>" + json.Row.REMARK_LIN + "</li>");
                        else
                            $content.append("<li>No Comments</li>");
                    }

                    $header.text(function () {
                        //change text based on condition
                        return $content.is(":visible") ? "Collapse Line Remarks" : "Expand Line Remarks";
                    });
                });                 
                },
                error: function(e)
                {
                    console.log(e);
                }
            });

Also one thing that will help you quite a bit is using the php function json_encode - http://php.net/manual/en/function.json-encode.php

For example

echo json_encode(mysqli_fetch_array($result));

Thank you so much for your help!! Finally I could fix it. The error was in the query. I had a mistake writing the name of the field in the SELECT. Now is working perfectly!! :)

Collectives™ on Stack Overflow

Login with Phonegap, AJAX, PHP and mySQL not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related