The problem I'm having is that I'm trying to implement editable into the AdminLTE theme for Bootstrap 3, and no matter how I try to do it, the links that I'm trying to make editable just stay as links and refuse to be picked up by the plugin. Here's the tasks page itself that has the table on containing the comments.
Edit - here's a link to a screenshot of the table containing the comments, i'm trying to make the 'comments' field editable - http://puu.sh/aWivX/b52a53d1cc.png
<?php
include('includes/header.php');
include_once('../class/database.php');
$con = new DBCon();
?>
<section class='col-lg-12 DBConedSortable'>
<div class='row'>
<div class='box box-primary' style='padding: 10px;'>
<div class='box-header'><h3 class='box-header'>All Tasks</h3><h5>Ordered By Progress</h5></div>
<div class='box-body no-padding'>
<table class='table table-striped'>
<th>ID</th>
<th>Task</th>
<th>Comments</th>
<th>Assigned To</th>
<th>% Completion</th>
<?php $con->taskhandler(); ?>
</tbody>
</table>
</div>
</div>
<!-- End Tasks Table -->
</div>
</div>
</section>
</section>
</section>
</aside>
</div>
<!-- jQuery 2.0.2 -->
<!-- Replaced local 2.0.2 w/ CDN Hosted 2.0.3 -->
<!--
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
This is the function that connects to the database and pulls in the comments and relevant information:
public function taskhandler() {
$this->mysqli = new mysqli($this->host,$this->user,$this->pass,$this->db);
$sqltdash = mysqli_query($this->mysqli,"SELECT * FROM admin_tasks ORDER BY percent ASC") or die ("Could not retrieve tasks from database!" . mysqli_error($this->mysqli));
while($r_tdash = mysqli_fetch_array($sqltdash)) {
echo "<tr>";
echo "<td class='id'>".$r_tdash['id']."</td>";
echo "<a href='tasks.php'><td class='task'>".$r_tdash['task-short']."</td></a>";
echo "<td class='comments'><a href='#' id='comment' class='editable' data-type='text' data-placement='right' data-pk=".$r_tdash['id']."' data-url='admin/includes/post-task.php' data-title='Add Comment'>".$r_tdash['comments']."<a/></td>";
echo "<td class='created'>".$r_tdash['creator']."</td>";
echo "<td><div class='progress xs'>";
if($r_tdash['percent'] < "100") {
echo "<div class='progress-bar progress-bar-danger' style='width: ".$r_tdash['percent']."%'></div>";
} else {
echo "<div class='progress-bar progress-bar-success' style='width: ".$r_tdash['percent']."%'></div>";
}
echo "</td></div>";
if($r_tdash['percent'] < "100") {
echo "<td><span class='badge bg-red'>".$r_tdash['percent']."%</span>";
} else {
echo "<td><span class='badge bg-green'>".$r_tdash['percent']."%</span>";
}
echo "</tr>";
}
}
And here's my main.js which is included via the header file in PHP (also included below)
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'popup';
//make username editable
$('#comment').editable({
type: 'text';
url: 'admin/includes/task-post.php';
placement: 'right';
title: 'Enter Comment;';
});
/*make status editable - commented during debug
$('#status').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 2,
source: [
{value: 1, text: 'status 1'},
{value: 2, text: 'status 2'},
{value: 3, text: 'status 3'}
]
*/
//uncomment these lines to send data on server
,pk: 1
,url: 'includes/post-task.php'
});
});
And this is the header where the xeditable libraries are included via CDN
<?php
session_start();
if(!isset($_SESSION['logged'])) {
echo "<center>";
echo "<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<!-- font Awesome -->
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css' />
<!-- Ionicons -->
<link href='css/ionicons.min.css' rel='stylesheet' type='text/css' />
<!-- Theme style -->
<link href='css/AdminLTE.css' rel='stylesheet' type='text/css' />";
die("<div class='box-body'><div class='callout callout-danger'><h1><i class'fa fa-ban'></i><b>Alert!</b> You are not logged in!
<a href='login.php'>Log In</a></div></div></h1>");
}
echo "</center>";
include_once('../class/database.php');
include('../class/sitevars.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $site_title; ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- Replaced local 2.0.2 w/ CDN Hosted 2.0.3 -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="main.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
The issue is that seemingly no matter what I try, the links in the table just remain as links and aren't turned into editable fields and it's completely defeated me now. Any advice would be much appreciated.
I had the same issue and as it turned out the cause was that I loaded x-editable initialization function before jQuery and plugin file (AdminLTE loads scripts at the bottom of a page). When I ordered the scripts right, x-editable worked properly.