【问题标题】:Laravel can't get x-editable to functionLaravel 无法让 x-editable 运行
【发布时间】:2018-02-16 05:57:02
【问题描述】:

我正在尝试让内联编辑弹出窗口 x-editable 在我的 Laravel 应用程序中工作。我有一个精简的测试用例来让它发挥作用,但无法从中得到响应。该页面看起来不错,是来自数据库的链接名称列表,但它们没有响应。

我安装了 x-editable 引导库,并且可以在控制台中看到它们已找到并且正常。我没有从链接中得到任何响应(它应该弹出和编辑框)。没有错误,一切看起来都很好,但有些东西坏了。有什么想法吗?

控制器:

<?php

namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use App\investment_account;
use App\investment_line_item;

class popupEditController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {

        $investment_item = investment_account::find(1)->investment_line_item;
        $investment_line_items = investment_line_item::all();


    return view('popupEdit', compact('investment_item','investment_line_items'));       

    }

    public function updatePosition(Request $request)
    {

   } 
}

路线(web.php):

Route::get('/popupEdit', 'popupEditController@index');
Route::post('/popupEdit',  'popupEditController@updatePosition');

刀片:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>   

<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}" />
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>


@foreach ($investment_line_items as $single_item)
<a href="#" id="investmentName" data-type="text" data-pk="{{ $single_item->id }}" data-title="Edit investment">{!! $single_item->investment_name !!}</a></br>
@endforeach

<script>

$(document).ready(function() {

$.fn.editable.defaults.mode = 'popup';
$.fn.editable.defaults.send = "always";

  $.fn.editable.defaults.params = function (params) 
  {
   params._token = $("#_token").data("token");
   return params;
  };

$('#investmentName').editable({

           type: 'text',
           url: '/',   
           send: 'always'

           });
});

</script>

我正在 XAMPP 上使用 Laravel 5.5 和 PHP7。感谢您的任何建议。

【问题讨论】:

    标签: php laravel x-editable


    【解决方案1】:

    您似乎忘记在您的 a href 标记中添加数据名称。 确保在您的 href 添加数据名称 例如

    <a href="#" id="investmentName" data-type="text" data-name="investment_name" data-pk="{{ $single_item->id }}" data-title="Edit investment">{!! $single_item->investment_name !!}</a>
    

    【讨论】:

    • 感谢您的评论,但我添加了该评论无济于事。还是没有反应。我想知道库或加载它们的顺序是否已关闭。没有错误感觉就像问题不在我的代码/页面范围内。
    【解决方案2】:

    我偶然发现了一个使这项工作有效的编辑,只是不知道为什么。

    如果不是引用项目的 ID,而是给它一个类名(将 id="" 更改为 class="")并在 Javascript 中引用它,它现在可以工作了。所以我在刀片中所做的代码更改如下:

    <a href="#" class="investmentName" data-type="text" data-pk="{{ ....
    

    $('.investmentName').editable({ ....
    

    希望这对其他人有所帮助。我仍然很想知道为什么这会对我的 Laravel 应用程序产生影响,因为我一直在阅读的几乎所有示例代码都使用了 ID 对象引用,但它不起作用。

    * 更新 *

    嗯,我的喜悦是短暂的。虽然精简后的代码是独立工作的,但一旦我将其添加到我的主应用程序中,它就会失败,并给出以下错误(“scenario”是我的刀片名称):

    scenario:667 Uncaught TypeError: Cannot read property 'defaults' of undefined
        at HTMLDocument.<anonymous> (scenario:667)
        at l (jquery-2.0.3.min.js:4)
        at Object.fireWith [as resolveWith] (jquery-2.0.3.min.js:4)
        at Function.ready (jquery-2.0.3.min.js:4)
        at HTMLDocument.S (jquery-2.0.3.min.js:4)
    

    导致错误的行是:

    $.fn.editable.defaults.mode = 'popup';(或任何对“默认值”的引用)。

    我的应用程序加载了以下标头,我怀疑与 JS 库存在冲突,但我尝试消除这些也无济于事 - 我在黑暗中拍摄。这是完整的标题:

    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0"
          name="viewport"/>
    <meta http-equiv="Content-type"
          content="text/html; charset=utf-8">
    
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <link href="{{ url('adminlte/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet"
          href="{{ url('quickadmin/css') }}/select2.min.css"/>
    <link href="{{ url('adminlte/css/AdminLTE.min.css') }}" rel="stylesheet">
    <link href="{{ url('adminlte/css/custom.css') }}" rel="stylesheet">
    <link href="{{ url('adminlte/css/skins/skin-blue.min.css') }}" rel="stylesheet">
    <link rel="stylesheet"
          href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet"
          href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet"
          href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css"/>
    <link rel="stylesheet"
          href="//cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.css"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.standalone.min.css"/>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>   
    <script src="bootstrap-editable/js/bootstrap-editable.js"></script>
    <link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> 
    

    非常欢迎任何建议,因为我被卡住了!

    【讨论】:

    • 好吧,我的喜悦是短暂的。虽然精简的代码可以工作,但一旦我将它添加到我的主应用程序它就会失败,并给出以下错误:scenario:667 Uncaught TypeError: Cannot read property 'defaults' of undefined at HTMLDocument.&lt;anonymous&gt; (scenario:667) at l (jquery-2.0.3.min.js:4) at Object.fireWith [as resolveWith] (jquery-2.0.3.min.js:4) at Function.ready (jquery-2.0.3.min.js:4) at HTMLDocument.S (jquery-2.0.3.min.js:4)
    【解决方案3】:

    我发现了令人讨厌的冲突。我正在使用 AdminLTE 并隐藏在包含的标头中,该标头还包含其他包含 javascript 的文件,是对旧版本 JQuery 的调用。

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    

    注释掉这一行解决了冲突,它现在可以在我更大的应用程序中使用。我的原始测试页面没有附加 AdminLTE 开销。

    现在一切都好:)

    【讨论】:

      猜你喜欢
      • 2016-07-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多