We help IT Professionals succeed at work.

angular 2 post to a database works on firefox but not on chrome

159 Views
Last Modified: 2016-08-05
so this drive me insane :)
the same code work on firefox but not on chrome.

i test angular 2 "ajax calls", this time sending data to insert into the database, and send back the inserted item.

so this is in the service:
  addUser(){
    var theparams = JSON.stringify({
      name: "fabian",
      address: "dizingoff 99, NY",
      lat: 33.060143,
      lng: 39.770557
    });
    var params = 'user=' + theparams;
    var headers = new Headers();
    headers.append('Content-type', 'application/x-www-form-urlencoded');

    return this._http.post('http://localhost:80/ang2router/public/addContact.php', params,{
      headers: headers
    })
    .map(res => res.json());

  }

Open in new window


this is hard coded for testing obviously.
then i call it on a button click:
      this._httpsService.addUser()
      .subscribe(
        data => this.postData = data,
        error => alert(error),
        () => console.log("Finished")
      );

Open in new window


then the php file that insert it into the database and get it back:
$value = json_decode($_POST['user']);
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Content-Type: application/json');
//var_dump($value->name);

        $db_name  = 'mydb';
        $hostname = 'localhost';
        $username = 'myusername';
        $password = 'mypass';

        // connect to the database
       $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);



    // a query get all the records from the users table
    $sql = 'INSERT INTO markers ( name, address,lat, lng ) 
        VALUES ( "' . $value->name .'" , "'.$value->address.'", '.$value->lat.' , '.$value->lng.' );';

    
    $stmt = $dbh->prepare( $sql );

   
    $check = $stmt->execute();

    $last_id = $dbh->lastInsertId();

    $sql2 = "SELECT * FROM markers WHERE id=$last_id ";

   
    $stmt = $dbh->prepare( $sql2 );

    
    $stmt->execute();

    // fetch the results into an array
    $result = $stmt->fetchAll( PDO::FETCH_ASSOC );
                                                        
    echo json_encode($result);

Open in new window


in firefox all goes well, the data is in the database and i get the last inserted id back.
but on chrome not. i attach what i get on chrome.

best regards
Screenshot--65-.png
Screenshot--66-.png
Comment
Watch Question

Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
Chrome doesn't like 'localhost' for a number of functions including cookies.  Try changing your links to the IP address of the machine and see if that works.  I only use 'localhost' when it is actually required.  I normally use the machine IP address because then the pages are accessible from other machines on the network.

Author

Commented:
hi
no change. and add to it that if i don't do a switch statement it works. but once i use that post veriable, it works of FF but not on chrome.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
What 'switch statement'?

Author

Commented:
sorry, that was about another issue i have :) forget about the switch statement.

Author

Commented:
so when i var_dump my $_POST array:
in chrome: array(0) {
}
empty.
in firefox:
array(1) {
  ["user"]=>
  string(82) "{"name":"Moses","address":"dizingoff 29, NY","lat":23.060143,"lng":29.770557}"
}
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
For test purposes, I would create an HTML form page and see what you get when you submit that.  Like below... note that I put quotes around the "lat / lon" values to get it to work.  It works the same in both Firefox and Chrome.

ChromePOSTtest.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome POST test form</title>
</head>
<body>
<h1>Chrome POST test form</h1>
<form action="addContact.php" method="post">
<input type="text" name="user" value='{"name":"Moses","address":"dizingoff 29, NY","lat":"23.060143","lng":"29.770557"}' />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>

Open in new window


addContact.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>addContact.php</title>
</head>
<body>
<?php 
$value = json_decode($_POST['user']);
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Content-Type: application/json');
var_dump($_POST['user']);
var_dump($value);
?>
</body>
</html>

Open in new window

Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
well yes, it does work, in that "regular" way ( by the way, with quotes or without the added quotes).
But once I do that in the angular 2 way, works in FF but not in chrome. notice that i'm hard coding the values, since I just want to learn to pass the data in the angular 2 way.

I have no idea why it is passed in FF but not in chrome.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
Are you going to try adding 'true' to the json_decode statement?  I'm not going to try to duplicate your angular code because most of is not posted and I don't have your database.  For testing I always simplify things to something that works and work from there to build something more complicated.

Author

Commented:
oh i have tried it with the true. same thing: works on FF not in chrome.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
Then you need to make a test version of your code that is as simple as possible so you can figure out what is and isn't working.  Maybe an 'angular' version of my demo programs.  After all Chrome works, Firefox works, PHP works.  It's just the combination with your code that isn't working.

Author

Commented:
so fixed it. and i put it here for anyone else who will encounter the issue.

the problem is that the post array in php expect a key value pair. and that's not what i sent.
so you either send a key value pairs, or if you want to keep the json format, in your php, since there is no key, do:
$theobject = json_decode(key($_POST));
echo $theobject->action;

Open in new window


now it works on chrome and firefox.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
Interesting.  So how did you rewrite the addUser() function?
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
No, but you can give yourself credit.  Although if you feel that I helped you, you can give me some credit.

Author

Commented:
icame with the answer

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.