Главная » Языки программирования

Edit or Update Data Using PHP & MySQL Ajax

На чтение 12 мин
Содержание
  1. How to Load Dynamic Content in Bootstrap Modal
  2. Bootstrap and jQuery Library
  3. Bootstrap Modal Popup
  4. Load Content from Another Page in Bootstrap Modal
  5. Load Dynamic Content from Database in Bootstrap Modal
  6. Dynamic Bootstrap Modal with External URL
  7. Edit or Update Data with Bootstrap Modal in PHP & MySQL Using Ajax
  8. Index.html
  9. Save.php
  10. All.php
  11. Get.php
  12. Update.php
  13. Scripts.js
  14. Styles.css
  15. Tutorial: Passing Data To Bootstrap Modal in PHP
  16. Getting Started:
  17. Creating Database
  18. Creating the database connection
  19. Creating The Interface
  20. PHP - Passing Data To Bootstrap Modal
  21. User Details
  22. Creating PHP Query

How to Load Dynamic Content in Bootstrap Modal

The Modal is a popup window or dialog box that displayed over the current web page. It is very useful to display HTML content/elements on a single page. If your web application uses Bootstrap, the modal popup can be easily implemented on the web pages. Bootstrap’s modal plugin helps to add a dialog window to the website site for lightboxes, popup elements, or custom content.

Creating a modal popup is very easy with the Bootstrap modal component. So, if your web application already uses Bootstrap, it’s always a good idea to use Bootstrap for populating modal dialog. Because it does not require any third-party jQuery plugin. Not only the static content but also you can load external URL or dynamic content in a modal popup with Bootstrap.

In this tutorial, we will show how you can load content from an external URL in Bootstrap modal popup. Also, you will know how to load dynamic content from another page via jQuery Ajax and display it in Bootstrap modal popup. Using our example script, you can pass data, variables, or parameters to the external URL and get dynamic content via jQuery Ajax.

Bootstrap and jQuery Library

Before using the Bootstrap to create a modal popup, include the Bootstrap and jQuery library first.

 script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> script> link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> script>

Bootstrap Modal Popup

The following HTML contains a button and a modal dialog. This button ( .openBtn ) triggers the Bootstrap modal for showing the content from another file.

 button type="button" class="btn btn-success openBtn">Open Modalbutton> div class="modal fade" id="myModal" role="dialog"> div class="modal-dialog"> div class="modal-content"> div class="modal-header"> button type="button" class="close" data-dismiss="modal">×button> h4 class="modal-title">Modal with Dynamic Contenth4> div> div class="modal-body"> div> div class="modal-footer"> button type="button" class="btn btn-default" data-dismiss="modal">Closebutton> div> div> div> div>

Load Content from Another Page in Bootstrap Modal

This example shows how to load the content from an external URL in the Bootstrap modal popup.

JavaScript Code:
By clicking the Open Modal ( .openBtn ) button, the content is loaded from another page ( content.html ) and shows on the modal popup ( #myModal ).

script> $('.openBtn').on('click',function( )< $('.modal-body').load('content.html',function( )< $('#myModal').modal(true>); >); >); script>

Load Dynamic Content from Database in Bootstrap Modal

This example shows how to load the dynamic content based on parameter pass into the external URL using PHP and MySQL.

JavaScript Code:
By clicking the Open Modal ( .openBtn ) button, the dynamic content is loaded from another PHP file ( getContent.php ) based on the ID and shows on the modal popup ( #myModal ).

script> $('.openBtn').on('click',function( )< $('.modal-body').load('getContent.php?id=2',function( )< $('#myModal').modal(true>); >); >); script>

Dynamic Data using PHP & MySQL:
In the getContent.php file, the requested data is fetched from the database using PHP and MySQL. The dynamic content is rendered and return to the Bootstrap modal.

if(!empty($_GET['id'])) < 
// Database configuration 
$dbHost = 'localhost'; 
$dbUsername = 'root'; 
$dbPassword = 'root'; 
$dbName = 'codexworld'; 
 
// Create connection and select database 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
 
if ($db->connect_error) < 
die("Unable to connect database: " . $db->connect_error); 
> 
 
// Get content from the database 
$query = $db->query("SELECT * FROM cms_content WHERE style="color: #007700">$_GET['id']>"); 
 
if($query->num_rows > 0) < 
$cmsData = $query->fetch_assoc(); 
echo '
'.$cmsData['title'].'
'; 
echo '
'.$cmsData['content'].'
'; 
>else < 
echo 'Content not found. '; 
> 
>else < 
echo 'Content not found. '; 
> 
?>

Dynamic Bootstrap Modal with External URL

This example shows how you can load dynamic content from an external URL in the Bootstrap modal.

HTML Code:
In the data-href attribute, the URL needs to be specified, from where you want to load the content. Also, add the openPopup class to the link to trigger the Bootstrap modal dialog.

a href="javascript:void(0);" data-href="getContent.php?id=1" class="openPopup">About Usa> div class="modal fade" id="myModal" role="dialog"> div class="modal-dialog"> div class="modal-content"> div class="modal-header"> button type="button" class="close" data-dismiss="modal">×button> h4 class="modal-title">Bootstrap Modal with Dynamic Contenth4> div> div class="modal-body"> div> div class="modal-footer"> button type="button" class="btn btn-default" data-dismiss="modal">Closebutton> div> div> div> div>

JavaScript Code:
The following jQuery automatically loads the content from the specified URL in the data-href attribute and opens the Bootstrap modal with this dynamic content.

script> $(document).ready(function( )< $('.openPopup').on('click',function( )< var dataURL = $(this).attr('data-href'); $('.modal-body').load(dataURL,function( )< $('#myModal').modal(true>); >); >); >); script>

Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request

If you have any questions about this script, submit it to our QA community — Ask Question

Источник

Edit or Update Data with Bootstrap Modal in PHP & MySQL Using Ajax

In this code, we will show you how to display the data with Bootstrap Modal and Update it in PHP & MySQL using AJAX. This function is one of the most important functions when creating an application. So we hope that you found it helpful to your research.

Showing records to your Bootstrap modal with PHP is helping the user experience for not loading your web page.

Edit or Update Data in PHP & MySQL Using Ajax

Index.html

First, we need to create our index.html just check the below code.

         

 
Edit or Update Data Using PHP & MySQL Ajax
 
 
 
 
Add New Employee
 
 
 
 
 
 
   
 
List of Employees
 
 
 
  
 
 
  
Edit Employee

Save.php

After the above code so we need the save function so that we can enable us to add a new record.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "INSERT INTO employees (email, first_name, last_name, address) VALUES ('".$email."', '".$first_name."', '".$last_name."', '".$address."')"; // Process the query so that we will save the date of birth if ($mysqli->query($sql)) < echo "Employee has been successfully created."; >else < return "Error: " . $sql . "
" . $mysqli->error; > // Close the connection after using it $mysqli->close(); ?>

All.php

Our next code is about getting all records via ajax.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "SELECT * FROM employees"; // Process the query so that we will save the date of birth $results = $mysqli->query($sql); // Fetch Associative array $row = $results->fetch_all(MYSQLI_ASSOC); // Free result set $results->free_result(); // Close the connection after using it $mysqli->close(); echo json_encode($row); ?>

Get.php

In this code, we will get the record and display it via modal.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "SELECT * FROM employees WHERE "; // Process the query so that we will save the date of birth $results = $mysqli->query($sql); // Fetch Associative array $row = $results->fetch_assoc(); // Free result set $results->free_result(); // Close the connection after using it $mysqli->close(); echo json_encode($row); ?>

Update.php

Now in this code, we are enabled to update the record after clicking the «Update» button via modal using ajax.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "UPDATE employees SET email='".$email."', first_name='".$first_name."', last_name='".$last_name."', address='".$address."' WHERE "; // Process the query so that we will save the date of birth if ($mysqli->query($sql)) < echo "Employee has been sucessfully updated."; >else < return "Error: " . $sql . "
" . $mysqli->error; > // Close the connection after using it $mysqli->close(); ?>

Scripts.js

In this code, we are enabled to process the above PHP codes via AJAX from saving record, getting all records, retrieving records, and updating it.

 function all() < // Ajax config $.ajax(< type: "GET", //we are using GET method to get all record from the server url: 'all.php', // get the route value success: function (response) '; // Loop the parsed JSON $.each(response, function(key,value) < // Our employee list template html += ''; html += "
" + value.first_name +' '+ value.last_name + " (" + value.email + ")" + "
"; html += "
" + value.address + "
"; html += ""; html += ''; >); html += '
'; > else < html += '
'; html += 'No records found!'; html += '
'; > // Insert the HTML Template and display all employee records $("#employees-list").html(html); > >); > function save() < $("#btnSubmit").on("click", function() < var $this = $(this); //submit button selector using ID var $caption = $this.html();// We store the html content of the submit button var form = "#form"; //defined the #form ID var formData = $(form).serializeArray(); //serialize the form into array var route = $(form).attr('action'); //get the route using attribute action // Ajax config $.ajax(< type: "POST", //we are using POST method to submit the data to the server side url: route, // get the route value data: formData, // our serialized array data for server side beforeSend: function () , success: function (response) , error: function (XMLHttpRequest, textStatus, errorThrown) < // You can put something here if there is an error from submitted request >>); >); > function resetForm(selector) < $(selector)[0].reset(); >function get() < $(document).delegate("[data-target='#edit-employee-modal']", "click", function() < var employeeId = $(this).attr('data-id'); // Ajax config $.ajax(< type: "GET", //we are using GET method to get data from server side url: 'get.php', // get the route value data: , //set data beforeSend: function () , success: function (response) >); >); > function update() < $("#btnUpdateSubmit").on("click", function() < var $this = $(this); //submit button selector using ID var $caption = $this.html();// We store the html content of the submit button var form = "#edit-form"; //defined the #form ID var formData = $(form).serializeArray(); //serialize the form into array var route = $(form).attr('action'); //get the route using attribute action // Ajax config $.ajax(< type: "POST", //we are using POST method to submit the data to the server side url: route, // get the route value data: formData, // our serialized array data for server side beforeSend: function () , success: function (response) , error: function (XMLHttpRequest, textStatus, errorThrown) < // You can put something here if there is an error from submitted request >>); >); > $(document).ready(function() < // Get all employee records all(); // Submit form using AJAX To Save Data save(); // Get the data and view to modal get(); // Updating the data update(); >);

Styles.css

Then our last code about the custom style of our page.

Okay, we were done setting up our code and you can now enable to update/edit your record using ajax. I hope this code can help you.

Источник

Tutorial: Passing Data To Bootstrap Modal in PHP

passing data to bootstrap modal

In this tutorial, we will create a Passing Data To Bootstrap Modal using PHP. This code can pass MySQL data to bootstrap modal when the user clicks the button. The system uses the MySQLi SELECT query to display a row of data from the table bound by id in the switch to pass the data to the modal dialog. This a user-friendly program. Feel free to modify and use it for your system.

We will be using PHP as a scripting language and interpreter that is mainly used on any web server, including xamp, wamp, etc. It is being applied to any popular websites because of the modern approach as its today.

Getting Started:

First, you have to download & install XAMPP or any local server that runs PHP scripts. Here’s the link for the XAMPP server https://www.apachefriends.org/index.html .

And, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/ .

Creating Database

Open your database web server then create a database name in it db_pass , after that, click Import, then locate the database file inside the folder of the application then click ok.

passing data to bootstrap modal in php

Creating the database connection

Open your any kind of text editor(notepad++, etc..). Then just copy/paste the code below then name it conn.php.

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into your text editor, then save it as index.php.

        
PHP - Passing Data To Bootstrap Modal
 
 
  ?>
  
Firstname Lastname Address Action

Creating PHP Query

This code contains the php query of the application. This code will store the form inputs to the MySQLi server. To do that just copy and write this block of codes inside the text editor, then save it as insert.php.

There you have it we successfully created Passing Data To Bootstrap Modal using PHP. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Источник

Читайте также:  Css title style generator
Оцените статью