Rails with jQuery Front End Project
This project is a continuation of the Rails project in that the layout and functionality remains the same, the difference is how I'm handling the data. The requirements for this project involve using AJAX, JSON and the ActiveModelSerializer gem.
What I had to do:
Use an ajax get request to get the posts and append them to the DOM.
Use an ajax get request and a has many relationship to show the comments from each post on the post show page.
Use an ajax post request to commit data to the database without a page refresh and then append the response to the DOM.
Create an object prototype method for at least one of my javascript objects.
I really didn't have much difficulty setting up both of the get requests. The syntax was relatively easy to understand. The more time consuming part is manipulating the data once you get it from the success function in the get request. I've learned that for me, it makes life easier when I can see the output from the function, so I know what I'm working with. For the first requirement, I did 2 get requests. One for posts and one for users. I compared the two lists to see who had posted within the past 7 days. I then added that to an array and then output the array into a div in the DOM.
The next thing that I did was put in a next button so that the user can use ajax to retrieve the data for the next, as well as append it to the DOM.
The last part was using a post request to add comments to the DOM. This involved using an ajax post request (using $.ajax) to get the response after the database had been updated. Then I had to create an object prototype and a handlebars template to append the next comment to the DOM.
Where I did get stuck was remembering the rules about the has many, belongs to relationship. The belongs to should be singular, and the has many should be plural. When I created my serializers, I used belongs_to :posts. This was incorrect and was causing me to not be able to use the correct instance variable in the code. I couldn't seem to figure out why I couldn't use @comments and could only use @posts when I didn't need all of that data. I was able to get some help from an instructor who pointed this error out to me. Once that was fixed, I was able to console.log the response and continue on with building my Handlebars template. Phew, that was pretty frustrating. I did also struggle for a bit with the ajax post request, but I eventually got that figured out.
This project and the lessons that lead up to it has taught me a lot about using ajax, active model serializer gem, json and how to manipulate all of them to get a browser that updates data without a page refresh, so in other words, in real time. I'm glad that I learned how to do this because I can see it being a valuable asset to add to a website.
If you would like to view the github repo, go here: Rails/jQuery project repo
If you would like to watch the video walkthru, go here: Walkthru
Here is the link for the Rails project blog post Rails project
What I had to do:
Use an ajax get request to get the posts and append them to the DOM.
Use an ajax get request and a has many relationship to show the comments from each post on the post show page.
Use an ajax post request to commit data to the database without a page refresh and then append the response to the DOM.
Create an object prototype method for at least one of my javascript objects.
I really didn't have much difficulty setting up both of the get requests. The syntax was relatively easy to understand. The more time consuming part is manipulating the data once you get it from the success function in the get request. I've learned that for me, it makes life easier when I can see the output from the function, so I know what I'm working with. For the first requirement, I did 2 get requests. One for posts and one for users. I compared the two lists to see who had posted within the past 7 days. I then added that to an array and then output the array into a div in the DOM.
The next thing that I did was put in a next button so that the user can use ajax to retrieve the data for the next, as well as append it to the DOM.
The last part was using a post request to add comments to the DOM. This involved using an ajax post request (using $.ajax) to get the response after the database had been updated. Then I had to create an object prototype and a handlebars template to append the next comment to the DOM.
Where I did get stuck was remembering the rules about the has many, belongs to relationship. The belongs to should be singular, and the has many should be plural. When I created my serializers, I used belongs_to :posts. This was incorrect and was causing me to not be able to use the correct instance variable in the code. I couldn't seem to figure out why I couldn't use @comments and could only use @posts when I didn't need all of that data. I was able to get some help from an instructor who pointed this error out to me. Once that was fixed, I was able to console.log the response and continue on with building my Handlebars template. Phew, that was pretty frustrating. I did also struggle for a bit with the ajax post request, but I eventually got that figured out.
This project and the lessons that lead up to it has taught me a lot about using ajax, active model serializer gem, json and how to manipulate all of them to get a browser that updates data without a page refresh, so in other words, in real time. I'm glad that I learned how to do this because I can see it being a valuable asset to add to a website.
If you would like to view the github repo, go here: Rails/jQuery project repo
If you would like to watch the video walkthru, go here: Walkthru
Here is the link for the Rails project blog post Rails project
Comments
Post a Comment