How to use export buttons in yajrabox datatables laravel? - laravel

I think I'm doing everything documentation says but I'm getting this error and can't find solution for that
dataTables.buttons.min.js:16 Uncaught Buttons: Too many iterations
Cnds:
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
#stack('scripts')
Yajrabox Database model methods:
public function html()
{
return $this->builder()
->setTableId('student-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(1)
->buttons(
Button::make('cvs'),
Button::make('excel')
);
}
protected function getColumns()
{
return [
Column::make('first_name'),
Column::make('last_name'),
];
}

At firs I see you wrote "cvs" instead of "csv"
Are you also adding the datatable js/css in your bootstrap.js file?
If yes, then you don't need all these extra cdn scripts.
Change your ->buttons call to
->parameters([
'buttons' => ['csv'],
]);

Related

show message after form submit laravel

hi I'm a beginner in Laravel I want to use sweetalert2 in my Laravel website but it did not display in the view
I use branch dist from Github
so in my **master_layout.blade.php** this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#yield('title')</title>
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
<link href="css/all.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
**<link href="css/sweetalert2.min.css" rel="stylesheet" type="text/css">**
<link href="css/main_style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="img/favorite-icon.png" />
</head>
<body>
#include('include/Navbar')
<main>
#include('include/Sidebar')
#include('include/HamburgerSidebar')
<div class="container">
#yield('Content')
</div>
</main>
<script src="Js/jquery-3.4.1.min.js"></script>
<script src="Js/popper.min.js"></script>
<script src="Js/bootstrap.min.js"></script>
<script src="Js/jquery-ui.min.js"></script>
**<script src="Js/sweetalert2.all.min.js"></script>**
<script src="Js/main-JQ.js"></script>
</body>
</html>
and in my controller store:
public function store(Request $request)
{
$request_order=$request->section_order;
if(empty($request_order)){
$order_last = Section::latest('section_order')->get();
if(empty($order_last)){
$request_order=1;
}else{
$request_order=$order_last[0]['section_order']+1;
}
}
$request->validate([
'section_name' => ['required','min:3'],
'section_pic' =>['image']
]);
$image = $request->file('section_pic');
if ( $image === null) {
$image_name = 'default_img.jpg';
}else{
$image_name = rand(1, 20) . time() . $image->getClientOriginalName();
$image->move(public_path('img'),$image_name);
}
$input_data = array(
'section_order' => $request_order,
'section_name' => $request->section_name,
'section_pic' => $image_name
);
Section::create($input_data);
return redirect('/Sections')->withSuccess('Success message');
}
and in my view:
#if(Session::has('success'))
<script type="text/javascript">
Swal.fire(
'Good job!',
'Successfully Saved!',
'success'
);
</script>
#endif
the store function works fine but not display sweetalert in my view
and I put all CSS and js file and images folder in public folder is that correct or not?
thanks to # Joseph his comment solve my problem
i use window.onload and it work fine
#if(Session::has('success'))
<script type="text/javascript">
function massge() {
Swal.fire(
'Good job!',
'Successfully Saved!',
'success'
);
}
window.onload = massge;
</script>
#endif
Controller :
session()->flash("success","Success Message");
return redirect('/Sections');
Blade File
#if(session()->has('success'))
<script type="text/javascript">
$(function () {
swal("Deleted!", "Data has been Deleted.", "success"),
swal({
title: {{ session()->get('success') }},
text: "Your Custom or Dynamic SUccess message put here",
type: "success"})
});
</script>
#endif

I'm trying to loaded css,js and image in Laravel 5.7 but it's not working

Here is my Bootstrap links which I'm using:
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
and js
<script src="{{ asset('js/vendor/jquery-1.12.0.min.js') }}"></script>
but both are not loaded in my template.
routes are below:
Route::get('/', function () {
return view('home', ["bodyClass" => ""]);
});
Used of bodyClass also but not working(<body class="bodyClass">) in html code. Inside the body all needed (header, footer, banner and content) include. But can't run so.
Here is my website Link: http://ecodexpert.com/

Difficulty implementing Chart widget with Kendo UI

I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>

Laravel + Polymer

I am trying to integrate Polymer into my Laravel app. So I created this custom web component and when I put that into my Laravel view, I get to see only blank screen. I'm using Laravel's built in web server in-case you think it can be the issue of HTML imports.
proto-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="proto-element" noscript>
<template>
<h1>Proto element</h1>
</template>
</polymer-element>
hello.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel PHP Framework</title>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script type="text/javascript">
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// Good to go!
} else {
// Use other libraries/require systems to load files.
}
</script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
You are using 0.5 syntax instead of 1.0 syntax in the declaration of your custom element. Here's how you would do it in 1.0.
<dom-module id="proto-element">
<template>
<h1>Proto element</h1>
</template>
<script>
Polymer({
is: "proto-element"
});
</script>
</dom-module>

DataTable TableTools initialisation

With following imports, I have my datatable functioning:
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="<c:url value="css/jquery.themeroller.css" />" />
<!-- TableTools CSS -->
<link rel="stylesheet" type="text/css"
href="<c:url value="css/TableTools_JUI.css" />" />
<!-- jQuery -->
<script type="text/javascript" charset="utf8"
src="jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="jQuery/jquery.dataTables.min.js"></script>
<!-- TableTools -->
<script type="text/javascript" charset="utf8"
src="jQuery/TableTools.js"></script>
<script type="text/javascript" charset="utf8"
src="jQuery/ZeroClipboard.js"></script>
I am now trying to have tabletools options (print, save, copy, xls buttons) for my table.
I have inserted
oTable = $('#myTable').dataTable({
"bJQueryUI" : true,
"iDisplayLength" : 10,
"sPaginationType" : "full_numbers",
"aaSorting" : [ [ 7, "desc" ] ],
"sDom": '<"H"lfr>t<"F"ip>' )}
but there is no change.
Do I have to change any of import queries or add css or something to get tabletools working?
I have tried "sDom":
"sDom": '<"H"lfr>t<"F"ip>'
"sDom": '<"H"lfrT>t<"F"ip>',
"sDom": '<"H"lfr>t<"F"ip>T',
I had this for sSwfPath:
"C:/JAVA ENVIRONMENT/Workspace/Test/DisplayTable3/DataTables-1.9.4/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf"
still nothing
Thanks in advance
Change "C:/JAVA ENVIRONMENT/Workspace/Test/DisplayTable3/DataTables-1.9.4/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf"
to a web path on your webserver. It's a common problem related to swf security. Found it on DataTables website. Also you can't redeclare sDom.
This is my working code with TableTools and ColVis:
$(document).ready( function () {
$('#results').dataTable( {
"sDom": 'T<"clear">Clfrtip',
"oTableTools": {
"sSwfPath": "http://192.168.78.7/cdtc/app/custom/libs/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",

Resources