In Web Development
Node JS Express Ajax CRUD Operation - Update or Edit MySQL Table Data - read the full article about Node Js update, Web Development and from Webslesson on Qualified.One
Youtube Blogger
hello friends in this video tutorial we will show you how to update or edit existing mysql table data in node.js express application using ajax in previous part we have already show you how to insert data into mysql table in node.js application by using ajax and bootstrap model now we have proceed for how to update or edit mysql table data in node.js application using ajax and build single page crud application in node.js using ajax now for edit or update mysql data first we have to create edit button in each row of data so for this we have to open sample data template view file and goes into javascript code part and here we want to create edit button so for this here we have to write button tag with type is equal to button and class attribute is equal to button button warning button small and edit class and this edit class we will use for capture click event for single row of data from mysql table after this we have to write data it attribute is equal to data dot data with count index dot it so here we have store primary key value under this tag and in button text we have to write edit so here our dynamic edit button is ready and it will create dynamic edit button in each of data so when we have click on any row of edit button then row data must be fetched from mysql table and display in pop-up model so for this here we have to write dollar with document selector with on function with three parameter in first parameter we have to right-click event in second parameter we have to write edit button class edit and in last parameter we have to write callback function so when we have click on the edit button then it will execute if block of code and under this first we want to get data it attribute value so for this here we have to write it variable is equal to dollar the selector with data function and under this we have to write it so this code will fetch data it attribute value and store under this it variable after this we want to change bootstrap model header title so for this here we have to write dollar with header 5 target attribute value dynamic model title with text function and under this function we have to write edit data so it will change bootstrap model title after this we want to change hidden field value so for this here we have to write dollar and in selector we have to write input hidden fielded action with value function and under this we have to write edit so it will change hidden field value next we want to change submit button value so for this here we have to write dollar with submit button at action button with text function and under this function we have to write edit so it will change submit button text after this we want to pop up model on web page so for this here we have to write dollar with model it action model with modal function and under this function we have to write show so it will pop up model on web page now we have to create ajax request for fake single row of data from mysql table so in ajax first option we have to write url and under this option we have to write node application base url roots file name active root so it will send ajax request to this url in second option we have to write method and here we have use post method in third option we have to write data so here we can define data which we want to send with ajax request so here we have to write it variable and action variable with phage single is value has been to send with ajax request in fourth option we have to write data type which is set to json so it will receive data in json format and lastly in ajax option we have to write success callback function so this function will be called if ajax request has been completed and it will receive data from server which we can get from this data variable and under this function we have to write dollar with text box it first name and after this we have to write value function and under this function we have to write data dot first name so it will fill first name text box with data after this fulfill last name text box with data so here we have to write dollar with text box it last name and after this we have to write value function and under this function we have to write data dot last name so it will fill last name text box with data next for set gender select box with option data so here we have to write dollar with select box it gender and after this we have to write value function and under this function we have to write data.gender so it will select gender select box option same way for fillage textbox with data so here we have to write dollar with box it age and after this we have to write value function and under this function we have to write data dot age so it will fill each text box with data and lastly we want to assign value to hidden it field so here we have to write dollar with hidden fielded value which is it and after this we have to write value function and under this function we have to write data dot it so it will assign value to hidden field so here our jquery code is ready now we have to go to sampledata.js roots file and here we have go to action root and under this we have to write if statement and under condition we have to write action variable is equal to phage single so if this condition true then it will execute if block of code under this block first we want to get it variable data so here we have to write it variable is equal to request dot body dot it variable so here we have store data in local variable after this we have to write query variable as equal to select star from sample data table where it table column value is equal to dollar with open and close bracket and between this we have to write it variable so this query will fetch single row of data now we want to execute this query so here we have to write database variable.query function with two parameter in first parameter we have to write query variable in which we have store select query and in second parameter we have to write callback function with two parameter like error and data variable so this function will return mysql data which we can get from this data variable now we want to send this data to ajax request in json format so for this here we have to write response.json function and under this function we have to write data with zero index so it will send data to ajax request in json format now we have go to command prompt and go into directory in which we have create our node jsa jack squad application and here we have to run this command so this command will start node js server now here in browser we have to write base url of node.js application sample data so here on web page we can see that mysql data has been displayed on web page in html table format and here in each row of data we can see that edit button has been created now we have to click on edit button so after click on edit button here we can see that modal has been pop-up on the web page and under modal we can see that form has been filled with data so here we can edit or change data and by click on this edit submit button data will be sent to server for edit data operation now for edit data operation we have go to sample data template file and here we can see that we have already write jquery code for submit form data so we have go to sampledata.js file and here we have go to action root code and here we have to write if block of code and under condition we have to write action variable value is equal to edit so if this condition true then it will execute if block of code and under this block first we want to store form data into local variable so first we want to store hidden it field data so for this here we have to write it variable is equal to request dot body dot it hidden field name after this we want to store first name text box data into local variable so here we have to write first name variable is equal to request dot body dot first name input field name next we want to store last name text box data into local variable so for this here we have to write last name variable is equal to request dot body dot last name input field name same way we want to store gender select box selected option value in local variable so for this here we have to write gender variable as equal to request dot body dot gender select box name and lastly we want to store age text box field data into local variable so for this here we have to write age variable as equal to request dot body dot age input field name so here we have stored all form field data in local variable now we have to write update data mysql query so for this here we have to write query variable is equal to update sample data table set first name is equal to dollar sign with open and close bracket with first name variable last name is equal to dollar sign open and close bracket with last name variable age is equal to dollar sign open and close bracket with age variable gender is equal to dollar sign with open and close bracket with gender variable and in where condition we have to write it is equal to dollar sign with open and close bracket with it so this update query will update mysql table column data now we need to execute above query so for this here we have to write database dot query function with two parameter so this function will execute above query in first parameter we have to write query variable and in second argument we have to write callback function with error and data variable so if data successfully updated then it will send response to ajax request in json format so here we have to write response.json function and under this function we have to write message key and in value we have to write success message like data edited so it will send this data to ajax request in json format so here our code is ready now we have check output in the browser so first we have go to command prompt and first we have stopped this process and after this we have again start node js server by run following command friends here we have refreshed this web page and here we can see that mysql table data has been display on web page with edit button and now we want to edit this row of data so we have click on the edit button and after click on the edit button here we can see that modal has been pop-up with filled form data so now we have change age details and after change age field details here we have click on the edit button and after click on the edit button here we can see that modal has been removed from web page and here we can see success message and in html table here we can see that age data has been updated that means data has been updated in mysql table in node.js application using ajax so in this part we have learnt how to edit or update mysql data by using node.js application with ajax jquery and bootstrap model in next part we will learn how to delete data from mysql table in node.js application by using ajax so we will meet in next part
Webslesson: Node JS Express Ajax CRUD Operation - Update or Edit MySQL Table Data - Web Development