Codeplace | How to use the built-in AJAX functionality of Ruby on Rails

hi everyone welcome to another code cast this time I'm going to teach you how to work with the Ajax in rails so what also do not know what Ajax is I have a tab here with the rails guides page open in the working with JavaScript in rails section and the reason why is we could have a nice introduction to Ajax so what is HX JavaScript has two powerful features one is to I'm sure that you know already which is to chain to ability to change elements on the page so doing like animations you don't you know like dropdowns and such and another cool feature that it has is the ability to make requests to a server in the background so combining these two features you have Ajax and that basically allows you to update bits and parts of your your application without having to do a full page refresh okay so this is what Ajax is so this is the app we're going to build in is a very simple one as usual as you can see it has no user authentication it has only one controller and one model okay so basically it has one resource it allows you to create posts so you have a title an accountant field and let's do a classic hello world here we put world or sorry okay notice what happened the page did not refresh it was it didn't need it to refresh because it's using Ajax so the request was done in the background and then it wants the response was was was found and JavaScript made the changes to the web page the same with the edit if you see if I just led hello and I update the page still me remains the same just the element that changes as well as the digital destroy so you see this is what I'm going to teach you in today's to them do a crud Ajax so a create read update and destroy actions all with Ajax so let's begin and let me open the terminal here actually let's let's start a new server we come here let's create a new rails app let's call it my Ajax okay rails new my Ajax okay it's creating files running the bundle okay since we just want a resource let me first go to via Ajax app oh my god Ajax okay sorry about that since we're going to just want a resource we can use a scaffold for that so rails generate scaffold post and we know we want a title which is going to be string next content field which is going to be text okay press ENTER ok the files were generated now just need to migrate since the scaffold created a migration we just need to migrate the table ok so create a table posts all working well let's see if we everything is working fine so far let me um while the server is updating its starting let me open the sublime text with our apps so my Ajax here we are let's go here to the config folder routes and create a route route and it's going to be posts index oh I hate this okay both index now let's go to the let's go to the page and refresh it was the old one okay so you have a resource already working ok post work successfully created and here you have the post cool so that's very fast and do some styling ok to the app I'm going to do this by copying pasting some code that I already have but don't worry because I'm going to explain each element and this going is just HTML so I'm not going to touch in in JavaScript so it's it's fine it's going to be just HTML and I'm going to follow along on the on the where should you have should you go to it to get the the code for that so let's begin here on the sublime I don't know why the sublime tech is not opening okay let me close this and let's go to view layout application and paste these links from the bootstrap okay so I came from the came here from the getting started section of bootstrap I copied the these links here okay paste it on the head section of your application HTML file and let's do some changes to our views okay so let's do as you've seen we're going to have a button and a model okay if you go to the third the third component here on the right side you have model if you scroll down a bit you will see a live demo you see here and this is exactly the code that we're going to use so you press the button a model appears and if you click outside on the close button e hides it again okay so we're going to use this only that P and the code that I'm going to paste is already customized for our app so let's delete all of this on the index page and create a new partial okay I want to it's supposed to be in a partial to be rendered through a partial so HTML dot e RB e RB my god here we go okay let's begin with the index page and I'm going to paste the code here let me okay this is the index and don't freak out this is just plain HTML everything is inside a container and you have two rows and the first one is the button the new post which actually targets the model so when you press the new post this model here is going to be shown in this row you have a render action to the post so you are calling each post that we have is going to be render inside this div with the idea of container posts and here we have a model inside a form which then has this - field that you've seen the title and the content so what you should make sure that you have is that the data target here the ID is the same as the model so my new post is the same as this ID here and and make sure as well that you have this post title class here and the post content because we're going to use it later and with Ajax so this is for the index page now let's do the post so post so will be something like this okay paste it here this should be HTML by default I don't know what happened but um small bug from sublime okay so if you can see here this is all inside a div here and it has an ID so you're passing a unique identifier to each post and I'm passing Ruby as you can see at the same way you you pass Ruby wicket you can pass inside IDs so I'm referencing and here I have the post title the post content and this is going to create that all of this code is going to create that a box that you see in the demo so I have a time ago in words just here and then an edit button which you can see here data target it's the same as in the index page I'm referencing the model here my update post okay so this is ID is the same it's the same ID as in the in the model you can see here ID then I have just a form you see that's the same there's the form and it is a method put so you know that this form is not for create but to update because of the method I forgot to mention that the destroy link to they are and inside the form it should have two fields which are a in title and content very simple now let's actually let's refresh okay first argument in form cannot be nil or empty and the reason why it's because if it will just M I apologize if you notice I we are in the index page on the index action okay and this variable here post is not set in the index action we only have the posts so we have to set the post here so post equal post new now you can use the post here let's refresh okay it's working so let's see the styling that we did let's create one okay it was created let's go back in here you see this is our the little box that we are we just created so we have finished styling the app we can now move along to do some Ajax so back in the rails guides there are some different ways that you can use a jack but by far the easiest way is to use the built-in helpers here which are the form for the form tag and the link to and the way to use it is just to pass a remote option and stating true so this is saying to the controller to use a remote request you are using a remote request the second step is to actually tell the controller not only to format dot HTML and Jason but as well to format as j/s so something actually like this format is and this the third step is to create a file here with the same name of the action that you're performing and inside that the file you're going to write some JavaScript to actually tell the browser what to do with the with the page so actually do the animations and making new divs appear and all of this all of that stuff okay so this is a the only thing you have to really remember is that the three step implementation of Ajax is the first one is to add the remote true option here so actually going to do it live now so we're going to this is the create form and we are going to pass the ring through option this is the first step the second step is the post controller you go to the action that you are in performing in our cases create and you format SJS SJS you can format is GS here as well and the last step third step is to create a new file remember it has to be the same name as the action and the extension must be jsz RB this is another rail conventions the file has to be the same name as the M as the the action then when the action is performed it's going to run the this file here so to make a very quick example to see this working I can just alert them writing plain JavaScript here I'm going to just alert post created and let's test this okay let's see let's refresh let's see what we have let's create our our first post here press the create and see what happens that file was run so the alert post created was run but notice what happens when I close the dialog box it freezes it and the reason is that the browser don't know what to do anymore so it stopped because he knows that you are doing a remote request so it's going to run this file here and you have to specify exactly what you want to do if you just put this alert here it just know that it has to alert that and after you close the dialog box yeah it doesn't know what to do anymore so this is what we are going to do we're going to actually write here the code that we want to be run so the first thing we're going to do is to close a model as we've seen we want this model to be closed so if we go here to the index page you see why I am you have here the the ID okay so this model has this ID so I'm going to use some jQuery you can use jQuery as well this is a jQuery selector and I'm going to get my new post that's the the model and we use dot model this is from JavaScript of bootstrap and you and you put height okay now remember this class is here the post title the post content so after creation we want to empty this text fields otherwise when we if we want to do another create another post afterwards the the values of the previous post will remain there so we want to actually reset the m the values from the input field the way to do this is to get that class so post title dot fell empty string this is the the quickest way to do it and I'm going to duplicate this since we have two text fields it's a post content okay now we want to actually display another div so another post and as you see here in the index we want to render another post so we inside this div of course so we want to get this ID here okay and we going to select container posts now we're going to use the function of a of jQuery called pre print which is actually the upside the upside of append so it's going to add the element to the end of this div instead instead of the append which is would going to add the element to the beginning actually I'm sorry I said the other way around so prepend is going to insert the element in the beginning of the other div and the a pen append with the would actually added to the the to the ending I apologize so what do we want to prepend how are you going to pass the the post here very simply you're going to write Ruby here because you have an extension of GRB so it's the same as the HTML or the RB you can place Ruby inside HTML and JavaScript is the same thing you can play you can paste a place ruby inside JavaScript you just have to call the Jake command so this is going to know that this this is going to be done through JavaScript any press and you type render post okay this is basically the same as this as we used to see to render partial but it just have to put the J here okay this is going to add this is going to add the element there but we want to do some that's finishing with some animation here so get the post if you see here on the partial get that post so we do post underscore pause post dot ID of course this is cheb this is Ruby so it has to be inside the tag the Ruby tags okay so get the post that I just added this is going to be the post that I just render here so get the polls that I just created hide it and then fade do a nice fade in effect okay mmm and we're done this this is all there is to create an element let's let's check what we have let's refresh we destroy this fresh okay let's do a first Ajax some content let's see what happens perfect notice the page is not refreshing let's do another one you see the text fields have been visited let's create another one perfect you are now using H x2 create posts so this is the three-step implementation that you have to remember so first thing you add the remote true option to the form then you go to the controller you format you specify to format Jas and then you create a file under the of course the folder of that resource and create a file with the same name of the action so let's do the same for the update and destroy let's begin going for the partial this is the form the method and we're going to do remote true now we're going to the controller and pass format ojs format j/s ok and we create a file search ok update jsz RB okay now here the first thing we want to do of course is close the model so we know the this is the ID of the model let's go to the update jquery selector ID my update and the score the poster ID notice that here i need to reference the the post object okay the post global variable post so the same way as the as you did in the create you hide it now after you hide the model what we want to do is to fade out the old one remove it and then fade in not fade in but let's say add the the other one the new one so we grab the post that we just edited so it's pass will be here so get that post and fade out so this time we're going to pass a function here so we want to remove the element and add another one aft only after the fade out effect is over so to do that we pass a function here and we do the the actual actions here all via the code that is inside the function is going to be run only after after the the fade out effect is completed so we reference this not remove so this is referencing the the element that is being fade out so they start remove after it's been after the effect is completed and add then you want soap container both this is the deep which contains all the posts the same way prepend and here you're going to pass some Ruby is a J render post like the same way okay this should be working already let's let's refresh and see first Ajax let's edit okay it opens the model and notice that the the values remain because that's the point of updating I want to I want the values to persist let's put updating working press update perfect I saw it was a fade out effect and afterwards in the element cut removed and replaced by this one so it's it's working let's do the the last one which is actually the the easiest so which is the the destroy so let's go to the post partial the link to here remember I thought you could use the remote through option in the in the built-in helpers form for form tag as well as the link to so it pass here remote true you go to the controller remember all the same three steps format is and create a new file here destroy dot je s dot RB and this one is actually this I'm going to use this and change is going to be just a little different so actually I can use the same as the update instead I just want to remove so get the post that you just deleted when you press the the the link to button and fade out the eliminate after the fade out effect is completed remove so if I we've refreshed the page see what happens when I click destroy perfect you see all of this is last Ajax let's create all of this is Ajax so it's all the requests are being made in the background and then JavaScript updates the page let's do like this update and destroy okay I think we're done and I think you'll find it very useful and actually easy to understand it's very simple to use a checks this way I so I hope you liked it and then see you again in another code cast

Channel: Codeplace

Views: 38,379

Keywords: codecast, ruby on rails, rails, stuk, stuk.io, javascript, remote, ajax, nodejs, real-time

Id: 2Il7PPhen3o

Length: 25min 49sec (1549 seconds)

Published: Wed Apr 01 2015