Ajax хорошо загружает библиотеку при первом вызове, но не загружает библиотеку при втором вызове ajax

Question

Я пытаюсь создать навигационную панель, которая при нажатии на меню будет загружать контент из ajax, представление загружало библиотеку, включенную в первый вызов. но при втором вызове он не

при проверке сети:

1. при первом вызове: URL запроса: http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js?_=1571030

2. вкл. второй вызов: URL запроса: http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js

Как вы видите на втором звонке, он теряет идентификатор? может ли это быть проблемой?

Заранее спасибо и извините за мой английский.

Вот вызов 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>";
        }
    }
}

И представление в koolreports, которое метод возвращает:

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

Не так ясно, чтобы ответить на ваш вопрос, согласно предоставленной вами информации. Но я попрошу вас перепроверить некоторые пункты и проверить. Вы можете решить эту проблему.

1. daterangepicker не является функцией просто говорит, что вы используете daterangepicker, но, пожалуйста, проверьте, есть ли у вас библиотека в DOM или нет!
2. ИЛИ / Замените $ на window.jQuery
3. ИЛИ / проверьте, если вам не хватает инициализировать указатель даты для только что добавленного HTML в dom из ajax.