Laravel 8 Tutorial - Update Record Using Ajax

hi everyone welcome back to the laravel air tutorial in this video we are going to learn about update record using ajax in previous video we have seen the insert record into database table using azure now let's see how can we update record using ajax in level 8 so for that switch to the project and just open students.php so just go inside the resources and just open students.php all right and inside this table just add here it and add the action okay and inside this just add here tt and inside this city and let's create a link here so just right here hreff and here just add javascript colon provide and just pass here 0 and just add here the class info okay and inside this just write here a text edit now save this file and let's check this just refresh the page and here you can see the edit link all right now inside this pr just add here the id uh so just write here id is equal to let's say s id and here just add the double curly bracket dollar student arrow id okay and now just copy this model from here to here okay just add here the model this is for add new student and a student model okay and now just copy this model and paste here now change the comment here edit string model okay and inside this model just add the id uh let's say id is a student edit model okay and inside the form here just change the id student edit form and after this add delete csr let's add a input field hidden input file input type is equal to and just add here id id and name is also ready okay now here just change the id first name to last name to email to and okay and okay and here let's create a function so just write here a script and just add here functions instead of function and function name let's say function name is just edit student and inside this just add here id as a parameter and dollar dot get and let's go to the student controller and just open http controllers student controller and here let's create another function public function and function name let's say function name is get a student by id okay and just write here dollar id dollar student is equal to student column column find and here just pass this id dollar id so just right here dollar id and just return a response as a json and inside this gsm just pass this student dollar student okay now save this file and let's create the route for this function so just go to the web.php and here just add the route so it's right here route get and here at the uri and students i had a parameter id you can add the controller student controller column column class at the function name and function name is this one get student by id so just copy and paste here all right now just go inside the student.blade.php and add this uri okay slash the students and add here the id so just write here this plus the students and here just add the slash concatenation sign id okay and here just add the callback function let's say student and inside this function just write here dollar id of this input field okay id so just write here as id dot well and inside this this type here is student dot id now copy this and paste here now change the text here change the id for the first name so just write here first name to and here student dot first name last name two and then here student dot last name and email and student dot email phone numbers just write your phone to and here from student.phone all right and also make visible the model so just write here dollar and as sign and edit model id which is a student edit model just copy and paste here dot model and inside this just write here toggle okay now save this file now call this function on on click so just copy this function name and inside the edit link here just add on click and call this function and inside this just pass here id student id so just write here double quality bracket and dollar student arrow id okay all right now save this file and let's check so this to the browser and just refresh the page now click on edit first name is not showing okay now just click on this all right let's check so since to the project and just inside the students.grad.php just check here first name first name to all right and inside this response okay spelling mistake you just add here our first name all right now save this file and click again so just refresh the page and now click on edit and here you can see the first name last name email and phone if i click here you can see here the mark is on and this all right now let's create the function for update so switch to the project and just go inside the student controller and here let's create a function public function and function name which is update student and inside this just write your request dollar request and here just write a student equal to the student column column find and inside this just write a request arrow id okay and now just copy this line from here and paste here all right instrument arrow first name this this this this okay and now we'll just write student arrow save and simply return a response has a json so just write your json and inside this just pass here dollar student okay now save this file and let's create the route for this this function so just go to the web.php and here just right here route column column post and just add here the uri right here post put okay and here just add the url uri student add here the controller name which is the student controller column column class and then add the function name which is update student so just copy and paste here all right now let's go inside the student.blade.com file and here just write here dollar s and just add the form edit form id so this is the it form id so just copy and paste here just right inside this script okay dot submit and inside this add here a function call by function and inside this just write here e dot prevent default and now let's create some variables so just copy this line from here and instead all right now change the id you just write here first name to last name to email email to and okay and one more for the id so just right here left id is equal to just copy this and paste here and change the id id okay and now here just add dollar dot hx and inside this just add here the url and inside this this url just add the route name so here just add the route which is a student student dot update okay now just copy this student now just copy this route name and just paste here just write your route and inside this just paste the round name okay student dot update now here just type put and data now just copy this and paste here first name custom last name this okay now save this file and here just add the success and inside this success just add your callback function response and inside this function just write here dollar as and this just id right here row id so just write your yes id you can see here the row id sid and student id okay so just write here sid concatenation sign response dot id okay and concatenate with kd colon and child and as child and here just add the one dot text is equal to response dot first name all right this id plus concatenation sign then response dot id and here just add dd this okay now just copy and paste here okay and just change here two three and here four okay and this is last name email and phone all right now save this file and here's also hide the model so just right here has model id so edit model id which is this one a student edit model so just copy and here just paste dot model and inside this just add a toggle okay also reset the form so just write here yes and form id which is the student edit form so just paste here and zero index dot reset okay now save this file all done okay so let's check so switch to the browser and just refresh the page now click on edit not working okay see the console editor student is not defined all right inside this just add here semicolon all right here is the mistake double equal sign so just remove one okay now save this file and now let's check again so just refresh the page and now click on edit okay you can see here the model now change the name let's say smith one so on one and here this one and here's the phone number let's say three now click on submit okay and not updated what is the issue put request internal server error okay let's check all right just pass here the id so just write here id colon id okay and now save this file now just refresh the page click on edit and just change the name one one since the phone number now click on submit and you can see record updated now edit this record let's say here and email id this and phone number like this okay now just click on submit and you can see record edit okay record updated all right so this way you can update record using hx so that's all about update record using ajax so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 10,179

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, intro to laravel 8, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, update record using ajax in laravel 8, update record using ajax in laravel, ajax crud in laravel 8, laravel 8 ajax crud, ajax crud

Id: FZ85p4Uekpc

Length: 21min 27sec (1287 seconds)

Published: Thu Sep 17 2020