Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A few fixes for React - I'll explain on the PR! #3

Merged
merged 1 commit into from Jan 9, 2017

Conversation

@weaverryan
Copy link
Contributor

weaverryan commented Jan 9, 2017

Hey @Olafkuusik!

So, you were very very close :). I'll explain each "fix" in comments.

Cheers!

@@ -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!';
}

This comment has been minimized.

Copy link
@weaverryan

weaverryan Jan 9, 2017

Author Contributor

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:

screen shot 2017-01-09 at 7 49 24 am

@@ -34,7 +34,7 @@
<script type="text/babel">
var contactsUrl = '{{ path('contact_contacts') }}'
ReactDOM.render(
<ContactSection url="{contactsUrl}" />,
<ContactSection url={contactsUrl} />,

This comment has been minimized.

Copy link
@weaverryan

weaverryan Jan 9, 2017

Author Contributor

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

This comment has been minimized.

Copy link
@weaverryan

weaverryan Jan 9, 2017

Author Contributor

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).

@Olafkuusik Olafkuusik merged commit 423b7de into Olafkuusik:master Jan 9, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.