I am trying to make a navbar that on clicking a menu will load content from ajax, the view loaded the library included on the first call. but on second call it does not
On inspect network:
on the first call: Request URL: http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js?_=1571030
on the second call: Request URL: http://127.0.0.1:8000/koolreport_assets/3300068563/KoolReport.js
As you can see on second call it loses the id? can this be the issue?
Thanks in advance and sorry for my English.
Here is the ajax call:
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);
});
The method ajax is calling:
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>";
}
}
}
And the view in koolreports the method is reffering:
<?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>
on second call I am getting this console error:
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)