XEditable + AdminLTE BS主题链接

Question

我遇到的问题是，我正在尝试将可编辑实现到Bootstrap 3的AdminLTE主题中，无论我如何尝试，我试图使可编辑的链接保持为链接，并且拒绝被插件获取。下面是任务页面本身，其中包含包含注释的表。

编辑-这里有一个指向包含注释的表的屏幕截图的链接，我正在尝试使' comments‘字段可编辑- 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>

这是连接到数据库并输入注释和相关信息的函数：

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>";               
            }
        }

下面是我的main.js，它是通过PHP中的头文件提供的(也包括在下面)

$(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'

    });
});

这是通过CDN包含xeditable库的标头。

<?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>

问题是，不管我尝试了什么，表中的链接仍然是链接，不会变成可编辑的字段，现在它完全击败了我。如有任何建议，将不胜感激。

Answer 1

我也有同样的问题，原因是我在jQuery和插件文件之前加载了x可编辑的初始化函数(AdminLTE在页面底部加载脚本)。当我正确地命令脚本时，x可编辑正常工作。