A few fixes for React - I'll explain on the PR! #3
Conversation
| @@ -14,6 +14,9 @@ var ContactSection = React.createClass({ | |||
| $.ajax({ | |||
| url: this.props.url, | |||
| success: function (data) { | |||
| if (!data.contacts) { | |||
| throw 'AJAX call for contacts appears to be corrupted! The response does not have a "contacts" key. Check the AJAX call!'; | |||
| } | |||
There was a problem hiding this comment.
This is not a "fix", but is probably something I should have added to my code originally. This makes it more obvious is there is a problem with the AJAX call, like if it is successful, but somehow we are getting an invalid response! In fact, in your case, this AJAX call was returning HTML, which ultimately caused the issue. Here's a screenshot of the AJAX call that should have been JSON:
| @@ -34,7 +34,7 @@ | |||
| <script type="text/babel"> | |||
| var contactsUrl = '{{ path('contact_contacts') }}' | |||
| ReactDOM.render( | |||
| <ContactSection url="{contactsUrl}" />, | |||
| <ContactSection url={contactsUrl} />, | |||
There was a problem hiding this comment.
This was the biggest issue, and is a subtle ReactJS thing. If you include the comments, then literally the url becomes {contactsUrl}, instead of treating this like a variable and becoming /contactform/list/contacts. In other words, the AJAX call was going to the wrong URL (which is why it was returning HTML)
| @@ -71,7 +71,7 @@ public function getContactsAction() | |||
| ['id' => 3, 'firstname' => 'AquaPelham', 'lastname' => 'leanna', 'phonenumber' => '7890123', 'bday' => 'Aug. 20 2015', 'address' => 'tallinn'], | |||
| ]; | |||
| $data = [ | |||
| 'contact' => $contact | |||
| 'contacts' => $contact | |||
There was a problem hiding this comment.
And once I got the other spot fixed, I noticed that we had a simple mis-match between our JSON endpoint and our JavaScript (which expects the key to be contacts).
Hey @Olafkuusik!
So, you were very very close :). I'll explain each "fix" in comments.
Cheers!