Question

我正在尝试创建一个导航栏，该导航栏单击菜单将加载ajax的内容，该视图加载了第一个调用中包含的库。但是在第二次通话时却没有

在检查网络上：

在第一次通话中：请求网址：http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js?_=1571030
在第二次通话中：请求网址：http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js

您可以在第二次通话中看到它丢失了ID？这可能是问题吗？

在此先感谢您的英语。

这是ajax调用：

function load_page_details(id)
{
    $('.loading').show();
    $.ajax({
        url:"{{ route($ajaxPath) }}",
        method:"POST",
        data:{id:id},
        async: false,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success:function(data) {
            $('#page_details').html('');
            $('#page_details').hide();
            $('#page_details').html(data);
            $('#page_details').show();
            $('.loading').hide();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('jqXHR:');
            console.log(jqXHR);
            console.log('textStatus:');
            console.log(textStatus);
            console.log('errorThrown:');
            console.log(errorThrown);
        }
    });
}

$(document).on('click',".nav li ul li",function(e){
    e.preventDefault();
    var page_id = $(this).attr("id");
    load_page_details(page_id);
});

ajax方法正在调用：

private function getData($type_name)
{
    if(isset($_POST["id"])) {
        $reports = $this->contextObj::select(['source'])
        ->where(['id'=>$_POST["id"],])
        ->get()
        ->first();;

        $class = trim("App\\".$type_name."\\".$reports['source']."\\".$reports['source'],"'");

        //check if the class name exist to avoid and display error message instead
        if (class_exists($class)) {
            $report = new $class();
            $report->run();
            echo $report->render();
        } else {
            echo"<div class='alert-container'>".
            "<div class='alert error'>".
            "<input type='checkbox' id='alert2'>".
            "<label class='close' title='close' for='alert2'>".
            "<i class='fa fa-times'></i>".
            "</label>".
            "<p class='inner'>".
            "<strong>Error!</strong> No data to display! </p>".
            "</div>".
            "</div>";
        }
    }
}

kool中的视图报告该方法：

<?php

use Illuminate\Support\Facades\Config;
use \koolreport\inputs\DateRangePicker;
use \koolreport\processes\DateTimeFormat;

?>
<style>
    .color {
        table-layout: fixed;
        word-wrap: break-word;
        font-size: 13px;
    }
</style>
<input type="hidden" id="reportno" name="reportno" value="02">
<form method="post">
    <div class="report-content">
        <div class="text-center">
            <h3>Employees Records</h3>
            <p class="text-info">
                Display all employees records including terminated employees.<br>
                Please select your criteria and when you are happy click GO.
            </p>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <b>Start Date</b>
                <?php
                DateRangePicker::create(array(
                        "name" => "date_joined",
                        "format" => "DD/MM/YYYY", //Jul 3rd, 2017
                        "ranges" => array(
                        "Today" => DateRangePicker::today(),
                        "Yesterday" => DateRangePicker::yesterday(),
                        "Last 7 days" => DateRangePicker::last7days(),
                        "Last 30 days" => DateRangePicker::last30days(),
                        "This month" => DateRangePicker::thisMonth(),
                        "Last month" => DateRangePicker::lastMonth(),
                    ),
                    "attributes"=>array(
                        "class"=>"form-control"
                    ),
                )); 
                ?>
            </div>
            ....
            ....
            ....
            ....

第二次通话时，我收到此控制台错误：

TypeError: this.origin(...).daterangepicker is not a function
       at new DateRangePicker (daterangepicker.class.js:25)
       at :3:19
       at eval (eval at globalEval (jquery.js:343), :105:25)
       at Array.forEach ()
       at Object.checkScriptsAndCallback (eval at globalEval (jquery.js:343), :102:20)
       at Object.js (eval at globalEval (jquery.js:343), :43:14)
       at Object.eval (eval at globalEval (jquery.js:343), :37:22)
       at eval (eval at globalEval (jquery.js:343), :105:25)
       at Array.forEach ()
       at Object.checkScriptsAndCallback (eval at globalEval (jquery.js:343), :102:20)

Answer 1

根据您提供的详细信息回答您的问题并不清楚。但我会请您交叉核对并核对一下。您可以解决这个问题。

daterangepicker不是函数，只是说您正在使用 daterangepicker，但请检查您的库中是否包含DOM！
OR //将$替换为window.jQuery
OR //检查是否缺少从Ajax将html新添加到dom的daterangepicker初始化的方法。

Ajax在第一次调用时就很好地加载了库，但在第二次ajax调用时却没有加载库

1 个答案: