5.2 Create Data With the WP REST API and jQuery

Hey folks! Welcome come back to the course introducing the DWS PPI. I’m your instructor. In the previous lesson, we’ve built a simple listing for retrieving and displaying posts with DWS PPI and G Query. in the current lesson will build a simple form powered by Ajax, that will create posts using the WPS API and jQuery so there will be two forms. The first one is for the user to enter login credentials and it contains two features for the username and password, and a second form is for creating the post and it has three fields for the title, content, and the status. When someone sends the request by filling in these forms, a message will be shown at the bottom saying that the post is being created. And when the post has been created, the previous message disappears, and a new message appears saying that the post has been created. So we will first begin by creating the form for user credentials. Open up the creator HTML file in your code editor, and inside this container tag, we create a marker for a form that includes two fields for the user name and the password. Note that we are using the steps for styling the form and. And these classes include the form_group class on the container element and the form_control class of the input element. And for the ID, name and the class of the form, we have defined the of value of credentials' form. So here's the form in the browser. Let's now create the markup for the form that will take the post data. So here is the form that contains three fields for the title, the content and the status of the post. The name ID and the clause of this form is post form. The title field is an input of type text and the field for the content is a text area. And then we have a select field for the status of this post. And for this lightbox we have two options for publish and draft. And finally we have the Submit button. One important thing to note here is the names of the fields, and these names should correspond to the arguments that we passed while creating a new post. So the name for the title field is title and the name of the post content field is content. And likewise, the select box that contains the options for the post status has a name field of status. This form also contains messages for different stages. So we have a message here when the post is being created and after that, we have a message for successful post creation. And both of these messages are using the border straps hidden class.histem. And we have defined this CSS styling of these two forms in the remainder CSS file. So here are forms on the page, note that the messages are not being displayed since they are hidden. Okay, so now that we have our forms ready. We can now send an easy an AJAX request using the jQuery's AJAX method, but before that let's define some variables for our HTML elements. So we define a variable for our post form, all of these fields that are inside the post form,the post being created message, and the post created message. Let's now define the functionality to create a new post. So, as soon as the form gets submitted we are disabling its default behavior by creating the prevent default method on the event object. If we don't do this our page will be refreshed, and we won't get a chance to send the Ajax request. And after that we are disabling the form fields using the jQuery's prop method that sets the read only attribute on them. And this read only attribute prevents the user from editing the values of the fields and making changes, while a request is being submitted. And after that we show the post being created message by removing the hidden class from which contain an element. And then there is a call to the jQuery's Ajax method. The url property points to the post route and the http method we are using is POST. For request body, we are preparing the data using this serialized method on the form. And then we have set the class to the main property to be true, since I'm on a different server then my work business solution server. And once the post has been created successfully using the data we just passed, the success method will be triggered. And in this success method, we are enabling the fields again by setting the need only attribute to false. And then, we reset the form fields by calling the reset method on the form. And finally, we are hiding the post being created message and then subsequently showing the post created message. But before sending the request, we need to make sure that the authorization header is passed along the request. So first of all we could add the values of the username and password, and concatenate them in a string separated by a semicolon, and then in this beforeSend property that takes a function with the xhr object as its argument. We are defining the request header using the setRequestHeader method on the xhr object. The value of this header is the combination of the username and password separated by a semicolon. And then we encode this variable into a base64 string using this base64 object. I found this base64 object on a stack overflow and it's a cross browser way of encoding and decoding base64 strings. All right. So now we are finally ready to send a request. Let's now check it in the browser to see if it works. So here we enter a Username and the Password And now we enter the post title. The post Content. And finally set the Status to Publish. And then click the Submit button to send the request. And yeah, we have successfully created a post using the WPS API and jQuery. We can refresh our WordPress Admin to see that post. And here it is. We can improve this form in many of us by including support for more arguments, and by including the functionality for that derivation. And we could also include the functionality for error handling in case of a question called us in error, but I'm leaving that part for you. So that's all about creating posts with the WPS API and jQuery.