0

My post,get and delete request are working fine but i have been struggling on how to make a put request when i submit my form. I am able to fetch data into the form alright but when i click the submit button to edit the data , the update does not reflect in the database. Here is my code below

//form to edit

<form (ngSubmit)="onEdit(edit)" #edit="ngForm" >
  <div class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="firstname" [(ngModel)]="edit.first_name" name="first_name" required>
  </div>
  <div class="form-group">
     <label for="last_name">Last Name</label>
     <input type="text" class="form-control" id="lastname"  [(ngModel)]="edit.last_name" name="last_name" required>
  </div>
  <button type="submit">Edit</buttton>

//component

edit = {
        first_name: "",
        last_name: ""
       }

onEdit() {
    this.httpService.update(this.edit)
         .subscribe(
            data => console.log(data)
         )}

//edit person according to row index

editPerson(person) {
  this.edit = person;
  console.log(person)
}

// button to edit

  <td><a class="btn btn-default"  data-target="#edit" (click)="editPerson(client)"><em class="fa fa-pencil"></em></a>Edit</td>

//httpservice

update(person) {
        let headers = new Headers({'Content-Type':'application/json'});
        let options = new RequestOptions({headers: headers});
        let body = JSON.stringify(person);
        return this.http.put('http://example.com'+person.id,body,headers)
            .map((response:Response) => response.json());
  • you will need to add `httpService` class – Suraj Rao Jan 25 '17 at 14:02
  • @suraj, sorry i forgot to add the service... i actually have that already but it is still not working . i have edited the question –  Jan 25 '17 at 14:08
  • hmm.. `'http://example.com'+client.id` I think you are missing a `/` between domain and client id – Suraj Rao Jan 25 '17 at 14:09
  • also, after body, set options object not headers.. – Suraj Rao Jan 25 '17 at 14:10
  • 1
    is there any error occurred in the console? or have you monitor the network in the Developer tool? – Xin Meng Jan 25 '17 at 14:10
  • @XinMeng i get this error XMLHttpRequest cannot load . Redirect from 'http://localhost:9000/api/people_api/v1/person/%2083' to 'http://localhost:4200/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. –  Jan 25 '17 at 14:17
  • Besides, i have installed the plugin to solve for CORS issue. But i want to know if my httpservice are correctly done –  Jan 25 '17 at 14:18
  • If you have correctly configured your CORS filter, it's possible that the browser is not allowing this. See: http://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin – Daniel Higueras Jan 25 '17 at 14:37
  • @DanielHigueras, Thanks a lot for much insight. I just download the firefox and the CORS issue doesn't appear. I get a 302 status... –  Jan 25 '17 at 14:47
  • @Switz So this fixed your issue? Shall I write it as an answer? – Daniel Higueras Jan 25 '17 at 15:08
  • @DanielHigueras, sure ..thanks a lot... –  Jan 25 '17 at 16:50

2 Answers2

0

As said in the comments, the problem was using Chrome and localhost together. Chrome has a restriction that doesn't allow CORS requests when using localhost.

For more details see this answer: Deadly CORS when http://localhost is the origin

Community
  • 1
  • 1
Daniel Higueras
  • 2,404
  • 22
  • 34
0

try to add new line at your hosts file

windows->system32->driver->etc->hosts ( navigation to hosts file)

get your localhost ip by using cmd "ipconfig" command

and than add new with your localhost ip and dummy url

for example

127.0.0.1 mytest.com

and than open your browser with mytest.com

Yoav Schniederman
  • 5,253
  • 3
  • 28
  • 32