Inline edit using jQuery and PHP, MySQL and Bootstrap 3
In this tutorial I had updated my previous tutorial on Inline Edit ( Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap ) using Twitter Bootstrap 3.2.
If you have any doubt in this tutorial please refer my previous tutorial on this Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap
Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap
Step 1: Create sample Database and Tables for this tutorials using following SQL queries.
--
-- Database: `muni`
--
CREATE DATABASE IF NOT EXISTS `muni` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `muni`;
-- --------------------------------------------------------
--
-- Table structure for table `sample`
--
CREATE TABLE IF NOT EXISTS `sample` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(75) NOT NULL,
`comments` text NOT NULL,
`country_name` varchar(100) NOT NULL,
`dob` date NOT NULL,
`appt` datetime NOT NULL,
`combo_appt` date NOT NULL,
`email` varchar(100) NOT NULL,
`options` varchar(150) NOT NULL,
`wy_text` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `sample`
--
INSERT INTO `sample` (`id`, `username`, `comments`, `country_name`, `dob`, `appt`, `combo_appt`, `email`, `options`, `wy_text`) VALUES
(1, 'muni', 'HI\nmuni', 'USA', '2014-08-29', '2013-08-22 10:50:00', '2014-09-22', 'muni@smmarttutorials.com', 'Array', '<h2>awesome</h2> comment!<br><br>Thank you,<br><br><br>Muni.');
Step 2: Create index.html HMTL file and add following css and jquery libraries in it.
<!DOCTYPE html>
<html>
<head>
<title>Inline Editing with jQuery, Bootstrap and jQueryUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-editable.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-editable.min.js"></script>
</head>
<body>
</body>
</html>
Step 3:
Here I am going explain inline edit only for textbox, for other input elements please refer source code.
Create a tag with following attributes.
<p style="color:#1abc9c">Enter your user name : </p>
<a href="#" id="username" data-type="text" data-pk="1"
data-url="post.php" data-title="Enter username"><?php
if (!empty($result[1])) { echo $result[1];
} else { echo "muni";
}
?></a>where
data-url — please assign ajax call URL to this
data-pk – please assign primary key of the table where this inline edit value to going to save.
For example If am going to save this username in 10th row of the sample means, assign data-pk value as 10. If didn’t assign any value to data-pk, then username inserted as new row in the sample table.
Step 4:
Initialize bootstrap editable plugin to use using following script.
<script type="text/javascript"> $.fn.editable.defaults.mode = "popup"; </script>
Step 5:
Now apply editable() function to that username.
<script type="text/javascript">
$.fn.editable.defaults.mode = "popup";
$('#username').editable();
</script>
Now that username becomes inline editable.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
