PHP Ajax Update MySQL Data Through Bootstrap Modal

hello friends in this video we are going to discuss how can we update data into my SQL table with bootstrap modal by using PHP script with Ajax query without page refresh in previous video tutorial on bootstrap modal we have show how to insert data into MySQL table by using bootstrap modal with PHP script with Ajax query the main use of bootstrap modal we can do any type of database operation like insert update touch and delete or display any message without opening of new page but we can do this type things on page in the form of pop-up alert box we can call this bootstrap modal by click on anchor tag or any button by using jQuery code or can also show bootstrap modal window by defining data attribute an element now we have start discussing update of my SQL data through bootstrap modal this is our testing database and in this database we have employee table with table column like head name address gender designation and age and previous we have show inserting of data into this employee table by using bootstrap modal but in this video we will update this table data by using bootstrap modal this is our index thought PHP page and on this page in previous video we have fetch employee data an HTML table with two call and like employee name and view an employee name column we have display name of employee and in view column we have create view button when we have click on this view button then we can show all information of employee in bootstrap modal and above this employee table data we have create one add button we can add new employee data by clicking on the side button when we have click on the side button bootstrap modal with insert data form has been appeared with bootstrap modal we can fill that form and we can enter employee details and to employee table through bootstrap modal now in this video first we have add one more column between this two table column for edit employee details so between this two column we have right open and close table head tag with width 15 percentage with text like edit in this column we want to display edit button for all employee so in while loop we have rights open and close table data tag in between this tag we have write input type is equal to button with attribute name is equal to edit value is equal to edit and it is equal to open and close PHP tag in between this tag we have write echo statement with dollar row it variable and class is equal to edit data this way we have create edit button for all employee and here we have store employee ate in it attribute and we will use this class attribute edit data and query code is selector and from a the attribute we will get it of particular employee now we have moved to write query code for edit employee data when we have click on edit button then at that time bootstrap modal has been appeared on web page with employee details in form so for this we have write dollar document with unmask and this method we have right click event with selector edit data class of edit button with function you under this first we have right variable employee eight is equal to dollar this thought attribute method with it attribute as argument in this employee eight variable we will store employee eight get from ad attribute by using attribute method and here we will get particular employee eight by using this selector after getting employee now we want to get employee details from this employee and display this details under bootstrap modal with form so here we have defined Ajax method so we have right dollar Ajax method and in this method first we have defined URL option set to fetch dot PHP we have send request up to this page under this method we have right method set to post here we have set post method for sending data to the server after this which data you want to send to the server so here we have right data option employee here we want to send employee a data to the server with Ajax request after this we have data type to Jason here we want to receive data from server in JSON format last an AJAX method request we have right success callback function when request sends successfully than this function has been called in this function we will receive data from server and function data argument here we will data and json format from server because we have defined JSON data type in our Ajax requests in previous video on bootstrap modal we have already created bootstrap modal with add add data modal and in modal we have create one HTML form for inserting employee data so in this modal's form we want to display particular employee data and form field in this Ajax request we have received data from server in JSON format so for displaying employee name under text box with names so we have write dollar text box said name dot value method and under this method we have write data dot name here name from data dot name is the table column of employee table this will display employee name under name text-box then after we have write dollar with the text area in address with value method and under this method we have write data dot address this will display address under a dress text area field and form after this we have write dollar with select box agender with value method and under this method we have write data dot gender this will set gender value on gender select box field in form then after we have write dollar with the text box hid designation with value method and under this method we have write data dot designation this will show employee designation under designation text box field in form after this we have write dollar with text box head age with value method and under this method we have write data dot age this will display age under text box age field and form for storing employee it informed for update of particular employee data so in modal form we have create one hidden field for storing employee so here we have write input type is equal to hidden with attribute name is equal to employee ID and it is equal to employee head now for storing employee it into hidden field so we have write dollar with him field an employee ID with value method and under this method we have right data dotted this will store employee it into hidden field with named employee hidden form now we want to change the name of submit button current it's name is name but when modal appear on web with employee data field informed field for update data then at time submit button name must be update so for we have write dollar with button it insert dot value man under this method we have defined update this code will display update text on submit button lastly we have write dollar with modal add add data modal with modal method with show by this code will show bootstrap modal on webpage with form element filled with filled employee data now we have moved to write PHP code for fetch particular employee data and fetch dot PHP page so on this page first we have made database connection after making database connection we have write if statement with condition like set function with argument like dollar post employee ate variable this condition will check value of this variable has been set or not if value of this variable has been set then it will execute if block of code and under this block we have write query variable is equal to select star from employee table where it is equal to dollar post employee here we have kept value of employee aide from Ajax request and this query will select employee data of this employee ate variable value now we want to execute this query so we have write resolved variable is equal to miss click query function with two argument in first argument we have write database connection string which is dollar connect variable and in second argument we have write dollar query variable this function will execute this query and store result into this result variable after this we have right dollar row variable is equal to miss Cleef asher a function with argument like dollar result variable this function will convert query result to associative array in store into this dollar row variable so we have store employee data and thus dollar row variable an associative array now we want to send this data to Ajax requests in JSON format so for we have write JSON encode function with argument dollar roam this function will convert to associative array to geison string and send us converted data to Ajax request and in Ajax request we have already set all this data into modal form fields so we have saved this code uncheck output in browser friends you can see that when we have click on this edit button then bootstrap modal has been pop on webpage with filled form with particular employee details here we have also shown submit button name has been changed from insert the update so when we have click on this button then this data has been update in my SQL table so for this we have to move right some PHP code under insert dot PHP file which we have create and previous video for inserting employee data under this file here we have write a statement with condition like dollar post employee it variable not equal to blank this code will check if employee ate variable has something we'll execute if block of code but if it has no value then it will execute else block of code your employee it is the hidden field inform which we have add for storing value of employee ate for update particular employee data if this employee variable has no value that means we want to insert some data so it will execute tells block and in this block we have put insert query which we have already created in our previous video but suppose employee a variable has some value that means we have store employee 8 into this hidden employee 8 variable so it will execute if block of code and under this we want to write query for update data so in this block we have write query variable is equal to update employee table set name is equal to dollar name variable address is equal to address variable gender is equal to dollar gender variable designation variable is equal to dollar designation variable age is equal to dollar age variable where is equal to dollar post employee 8 variable so our update query is ready for update particular employee data according to this dollar employee ate variable if dollar post employee ate variable has some value then it will execute if block of code and in this block we have create update data query and store into dollar query variable but if dollar post employee a variable has no value then it will execute tells block of code and under this block we have create insert query which store into dollar query variable now we have create dollar message variable is equal to blank and an if block we have write dollar message variable is equal to data updated and an else block of code we have write dollar message variable is eek it's a data inserted message below this code which we have already created in our previous video for execute dollar query variable query and after execute query we have fetched data from employee table for showing on webpage under this code here have removed data inserted and write dollar message variable for showing data inserted or updated message on web page and after this in this code we want to add one more table column for displaying edit button under HTML table so here we have rights open and close table heading tag with text like headed in this column we want to display edit button for all employee so in while loop we have rights open and close table data tag in between this tag we have write input type is equal to button with attribute name is equal to edit value is equal to ed appended is equal to a KO statement with dollar row it variable and class is equal to edit data this way we have create edit button for all employee and here we have store employee ate init attribute and we will use this class attribute edit data and query code is selector and from ad attribute we will get it of particular employee now friends our code is ready for update data through bootstrap modal by using PHP script with Ajax query so I have saved this code uncheck output in browser friends you can see that employee data like employee named with that it and view button an HTML table when we have click on edit button then bootstrap modal has appeared on web page with HTML form filled with particular employee details from here we can change employee details and by click on Update button then particular employee data will be updated and we can show updated data by click on View button here we have used Ajax to query and by query we have get employee 8 from NetID button we have create all employee separate edit button with different it and in the city we have store employee 8 and by using query code we have get employee 8 from button and by using Ajax we have fetched that employee a data from database and then after we have display that data into bootstrap modal HTML form field and an HTML form we can change theta and by clicking on update button we can update data into MySQL database by using Ajax request method so friends if you liked this video tutorial please share this video tutorial with your friends or even you can also share this video on social media also friends you want to get more update of my video so friends you can subscribe my youtube channel friends you can also like my Facebook page also or you can also follow webs listen on Twitter you

Channel: Webslesson

Views: 176,426

Keywords: update bootstrap modal data, twitter bootstrap tutorial, update or edit bootstrap modal data using php, dynamic bootstrap modal, update mysql data on bootstrap modal, edit data on bootstrap modal, update bootstrap modal data with php, edit bootstrap modal form data with ajax, dynamic bootstrap modal with jquery, bootstrap modal insert update delete, bootstrap modal form, update data using bootstrap modal

Id: SpyVEbFQ6Bc

Length: 16min 26sec (986 seconds)

Published: Mon Oct 24 2016