Inline edit using jQuery and PHP, MySQL and Bootstrap 3

Posted by & filed under Ajax, CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

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

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

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!