jQuery.Deferred 异常：无法读取未定义的属性（读取“长度”）-> Laravel 8 Boilerplate + Bootstrap

Posted 2023-05-08

技术标签:

【中文标题】jQuery.Deferred 异常：无法读取未定义的属性（读取“长度”）-> Laravel 8 Boilerplate + Bootstrap【英文标题】：jQuery.Deferred exception: Cannot read properties of undefined (reading 'length') -> Laravel 8 Boilerplate + Bootstrap 【发布时间】：2021-12-04 01:55:19 【问题描述】：

我正在使用Laravel Boilerplate from Sebastien Heyd 并尝试获取Select2 options via Ajax。当我在页面加载后单击选择元素时，出现错误：

jQuery.Deferred 异常：无法读取未定义的属性（读取“长度”）类型错误：无法读取未定义的属性（读取“长度”）。

我的代码是这样的。

刀片模板。

    <div class="col-lg-2">
    <div class="form-group">
            <x-boilerplate::select2 name="frm_Daily_Heading" id="frm_Daily_Headings" label="Heading" :ajax="route('boilerplate.getHeadings')" :allowClear="true" placeholder="-">
            </x-boilerplate::select2>
    </div>
</div>

@endsection
@include('boilerplate::load.select2')
@include('boilerplate::load.datepicker')
@push('js')

    <script>    
    $( document ).ready(function() 
        $( "#frm_Daily_Headings" ).select2(
            ajax:  
                url: "route('boilerplate.getHeadings')",
                type: "post",
                dataType: 'json',
                delay: 2500,
                data: function (params) 
                    if(params.term === undefined)return else
                    return 
                        q: params.term, // search term
                        "_token": " csrf_token() ",
                    ;
                ,
                processResults: function (response) 
                    if(results === undefined) return else 
                    return 
                        results: data.items
                        // id: params.term,
                        // text: params.term
                        // newOption: true
                    ;
                ,
                cache: true
            
        );
    );
    $('.datepicker').datetimepicker();
</script>

    @endpush
```

我的控制器用于处理 Select2 的 Ajax 请求。

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\heading;

class HeadingsController extends Controller

    public function index() 
        return view('daily');
    
    public function getHeadings(Request $request)
    
        $input = $request->all();
        if (!empty($input['query'])) 
            $data = heading::select(["id", "heading"])
            ->where("heading", "LIKE", "%$input['query']%")
            ->get();
        
        else
        
            $data = heading::select(["id", "heading"])->get();
        
        $headings = [];
        $returnThis=[];
        if (count($data) > 0)
        
            foreach ($data as $heading)
            
                $headings[] = array(
                    "id" => $heading->id,
                    "text" => $heading->heading,
                );
                $returnThis=['results',$headings];
            
        
        return response()->json($returnThis);

我的模特

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Http\Controllers\HeadingsController;

class heading extends Model

    use HasFactory;
    protected $fillable=['id','heading'];

当我点击下拉菜单时，我收到上述错误。但是，使用 chrome 中的开发工具，在 Network 部分下，我可以看到正在加载的值。

Ajax 响应符合 Select2 文档中的要求。

我的 jquery 在 bootstrap.min.js 之前被加载。

所有脚本和 Laravel 都是最新版本。

任何帮助将不胜感激。

干杯。

【问题讨论】：

【参考方案1】：

我是作者。我刚刚看到你的问题。

组件<x-boilerplate::select2 />在设置属性:ajax时会生成自己的js调用，不用自己写。

如果您想使用自己的脚本来生成 select2，您必须使用组件 <x-boilerplate::input type="select" /> 并将您的脚本应用到它。

我认为您的错误在控制器中：$returnThis=['results' => $headings]; 而不是 $returnThis=['results',$headings];