Ссылки на тему XEditable + AdminLTE BS

Проблема, с которой я столкнулся, заключается в том, что я пытаюсь реализовать возможность редактирования в теме AdminLTE для Bootstrap 3, и независимо от того, как я пытаюсь это сделать, ссылки, которые я пытаюсь сделать редактируемыми, просто остаются ссылками и отказываются быть подобраны плагином. Вот сама страница задач, на которой есть таблица с комментариями.

Изменить – вот ссылка на снимок экрана с таблицей, содержащей комментарии, я пытаюсь сделать поле «комментарии» редактируемым – 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

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

Проблема в том, что, по-видимому, независимо от того, что я пытаюсь, ссылки в таблице просто остаются ссылками и не превращаются в редактируемые поля, и теперь это полностью победило меня. Любые советы будут высоко ценится.


person DLMousey    schedule 17.08.2014    source источник


Ответы (1)


У меня была та же проблема, и, как оказалось, причина заключалась в том, что я загрузил функцию инициализации x-editable перед jQuery и файлом плагина (AdminLTE загружает скрипты внизу страницы). Когда я правильно заказал скрипты, x-editable заработал нормально.

person mattes939    schedule 04.06.2015