I am using datatables on a laravel project. But seems like laravels' app.js is conflicting with datatables.min.js I get this error in console.
Uncaught TypeError: $(...).DataTable is not a function
If I remove app.js from head everything works relation to datatables but then bootstraps menu dropdowns and some other js related stuff stops working obviously because I remove app.js How can I resolve this by including both in head section?
UPDATE: Here is head section of my laravel app. Laravel version is latest 5.6
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="Yhn7OFsFoV2qKhwsF7URC9GzjwNIb8muUT2u5kkD">
<title>Application</title>
<script src="http://127.0.0.1:8000/js/app.js" defer></script>
<script src="http://127.0.0.1:8000/js/datatables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#users').DataTable({
processing: true,
serverSide: true,
searching: true,
filter: true,
ajax: 'http://127.0.0.1:8000/api/users/data',
columnDefs: {
targets: [-1],
visible: false,
searchable: true,
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name', sortable: false},
{data: 'email', name: 'email', sortable: false},
{data: 'role', name: 'role'},
{data: 'created_at', name: 'created_at'},
],
initComplete: function() {
this.api().columns([2]).every(function () {
var column = this;
var input = document.createElement("input");
input.classList.add('form-control');
input.setAttribute('placeholder', 'search by email..');
input.setAttribute('name', 'search-email');
$(input).appendTo($(column.header()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
$('.dataTables_filter input[type="search"]').addClass('form-control');
}
});
});
</script>
It is because jquery is available to you through app.js, and you probably linked the jquery for datatable again.
Try removing the link for jquery and it should work.
First, you didn't specify Laravel version so I assume it's the latest stable release.
Second you didn't say how you installed datatables, I assume you just included minified source manually.
According to the Documentation you should be able to install datatables through package.json file (with npm or yarn, depending on your preferences).
To be clear, the datatables package is available in NPM repo:
https://datatables.net/download/npm
you can replace the laravel default JS and CSS with Bootstrap. The bootstrap javascript will work the same as App.js.
Another advantage of replacing the laravel default is Bootstrap will all you to create admin-templates like pages.That worked for me
add defer attribute to your script tag
<script src="http://127.0.0.1:8000/js/datatables.min.js" type="text/javascript" ***defer***></script>
Include defer attribute to your <script src="{{ asset('js/datatables.min.js') }}" defer></script>
Problem is that scripts are not loaded in right order. Defer runs script after document is loaded
Related
I'm new to PWAs and service workers. I started to test workbox with a Pyramid application which serves a preact app bundled with webpack 4. This is the home.jinja2 template:
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<head>
...
<link href="{{request.static_url('app:static/app.css')}}" rel="stylesheet">
<script type="text/javascript" src="{{request.static_url('app:static/runtime.js')}}"></script>
<script type="text/javascript" src="{{request.static_url('app:static/vendor.js')}}"></script>
</head>
<body>
<div id="app"/>
{% block scripts %}
{% endblock %}
<script type="text/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
</body>
</html>
The SPA makes calls to /api/v1/. I want to provide a network first experience. This is part of the webpack config:
optimization: {
runtimeChunk,
},
output: {
path: path.resolve(path.join(__dirname, '..', 'app', 'static')),
},
plugins: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: false,
}),
new ManifestPlugin({
publicPath: '',
}),
new WebpackCleanupPlugin({
exclude: [
'robots.txt',
],
}),
new GenerateSW({
clientsClaim: true,
skipWaiting: true,
runtimeCaching: [
{
urlPattern: /\//,
handler: 'networkFirst',
},
{
urlPattern: /https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/,
handler: 'staleWhileRevalidate',
},
],
navigateFallback: '/app-shell',
navigateFallbackBlacklist: [/^\/api/],
templatedUrls: {
'/app-shell': 'index.html',
},
}),
],
The generated index.html basically equals to the home.jinja2 layout (both contain the hashed assets urls). The problem I face is whenever I make changes to the frontend and deploy them, once the update process of the service worker is completed, the browser requests both the new and old assets (43f6a4e6 is the hash of the new assets).
Refreshing has no effect at all, even after 24 hours. I delete old assets on every deployment, therefore all requests to old assets error and a blank page is displayed. I temporarily had to redirect old assets requests to the new ones.
I implemented this recipe https://developers.google.com/web/tools/workbox/guides/advanced-recipes#warm_the_runtime_cache and the site is completely broken. Firefox displays a data corrupted error. Any ideas would be much appreciated.
I'm using free jqgrid 4-15-3 with guiStyle set to bootstrap. The problem is that the Add dialog launched from navGrid "+" button is a Model dialog by default. I have set the "model: fasle" in addParms but has no effect. Also failed in making changes in afterShowForm by setting jquery ui dialog "option" with "model", false. Below is the code snippet. What are the possible solutions?
$("#mygrid").jqGrid("navGrid", "#mygrid_nav", {add:true,...},{},
{ model:false,
afterShowForm: function(form){
$(form).closest(".ui-jqdialog").dialog("option", "model", false);
}
}
Update: Created a simple test as below, same result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/jquery-ui.min.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.jqgrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
</head>
<body>
<div>
<div>
<div>
<table id="tbl_test"></table>
<div id="div_test_pager"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tbl_test").jqGrid({
datatype: "local",
colNames: ['Col 1', 'Col 2'],
colModel: [
{ name: 'col1', index: 'col1', editable: true, width: 200 },
{ name: 'col2', editable: true, width: 100 }
],
pager: "#div_test_pager",
height: 200,
caption: "Test"
});
$("#tbl_test").jqGrid("navGrid", "#div_test_pager",
{ edit: false, add: true, del: false, search: false, refresh: false }
/*no difference*/
//,{}, {modal: false}
);
});
</script>
</body>
</html>
Appreciate any help!
(Can Oleg or someone knows give a hint? Thanks a lot.)
The word model you use is not correct - replace it with the word modal in the settings and in the calling of the dialog function
I am using jqgrid to display data. I am very new to this
I have tried How to change the theme of the jqGrid? but its not working for me.
Can anyone tell me how to change theme of grid?
For the jQWidgets Grid, you should do two things: include the CSS theme file and then set the widget's theme property to the theme's name. Example: Styling and Appearance
jqGrid uses jQuery UI CSS for the grid by default. Thus you have to include some jQuery UI CSS. I'd recommend you to choose one from well-known CSS and use it directly from Internet. There are some common CDNs, which provides servers in different locations of the world and which have long time interval for caching. As the result the CSS will be loaded quickly and the next loading will be made mostly from the local cache. As the results, the loading could be typically more quickly as loading form your private web site.
On jQuery UI blog you can find URLs to jQuery CDN, MaxCDN, Google Ajax Libraries API (CDN), Microsoft Ajax CDN and other.
The list of standard themes is relatively long: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader. You can choose someone and use it. For example
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
In the same way free jqGrid (it's the fork of jqGrid, which I develop) is accessible from two other CDNs too (cdnjs and jsDelivr CDN). See the wiki article for details.
As the result, the typical code, which uses free jqGrid can looks like described here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your page title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<script>
//<![CDATA[
$(function () {
"use strict";
$("#grid").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
});
//]]>
</script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
See JSFiddle demo too.
In other words, you don't need to generate customized jQuery UI theme, but you should just use one from existing.
I have a edit template using a list view and want a drop down list that is populated from a remote source. But the drop down list just shows the loading icon.
Here is the DropDownList DataSource.
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
and here is what I'm putting in the edit template
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
any help would be great.
Your code is basically fine but there a couple of question that you might have missed.
Since you are defining the DataSource saying data-source="dsTitles" as part of the HTML the order on how you define things is pretty important.
The first thing that gets defined is the HTML. Which means that dsTitle should be global.
Then, after the input is processed is when you should call kendo.init.
So, it should be something like this:
<html>
<head>
<meta charset="UTF-8"/>
<title>OnaBai - KendoUI DrowDownList</title>
<!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<!-- Web Page styling -->
<style type="text/css">
</style>
<script type="text/javascript">
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
$(document).ready(function () {
kendo.init("input");
});
</script>
</head>
<body>
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
</body>
</html>
I think the answer might be as simple as using a Kendo DropDownListFor, which will be populated with the given data.
I am using jqGrid 3.7.2 with local data. For some columns the default sorttypes are not sufficient. I need to provide a custom sorttype, which I understand from the documentation is possible. I don't know how to get it to work though. The code below is my best attempt at getting it to work - I can't make it call the custom sorting function though. The idea is to sort the 'Posn' field in the order 'GK'->'DEF'->'MID'->'STR'. Here is the code I'd like to get working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Testbed</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/thirdParty/jqGrid/ui.jqgrid.css" >
<script type="text/javascript" src="/thirdParty/jqGrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/thirdParty/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
tableToGrid("#playerTable",
{
datatype: "local",
sortable: true,
hidegrid: false,
multiselect: false,
altRows: true,
height: "100%",
width: "155px",
shrinkToFit: true,
rowNum: 100,
colNames: ['Posn','Name'],
colModel: [
{name:'Posn', index:'Posn', width:100, sorttype:
function(cell)
{
if (cell=='GK') return '0';
if (cell=='DEF') return '1';
if (cell=='MID') return '2';
if (cell=='STR') return '3';
}
},
{name:'Name', index:'Name', width:200, sorttype:"text"}
]
});
});
</script>
</head>
<body>
<table id="playerTable">
<thead>
<tr><th>Posn</th><th>Name</th></tr>
</thead>
<tbody>
<tr><td>GK</td><td>Almunia</td></tr>
<tr><td>GK</td><td>Fabianski</td></tr>
<tr><td>DEF</td><td>Campbell</td></tr>
<tr><td>DEF</td><td>Clichy</td></tr>
<tr><td>MID</td><td>Denilson</td></tr>
<tr><td>MID</td><td>Diaby</td></tr>
<tr><td>STR</td><td>Arshavin</td></tr>
<tr><td>STR</td><td>Bendtner</td></tr>
</tbody>
</table>
</body>
</html>
Probably you read about the usage of sorttype as a function in Tony's answer to my thread http://www.trirand.com/blog/?page_id=393/help/custom-local-sort-with-respect-of-the-function-as-index/. Your problem could be very easy solved. My suggestion to use index as a function for custom sorting of local jqGrid data work fine in the version 3.7.1, but not more in the version 3.7.2 of jqGrid. The feature sorttype as a function is implemented in the jqGrid after the release of the version 3.7.2.
So to be able to use sorttype as a function you have to download the latest version of jqGrid from http://github.com/tonytomov/jqGrid/tree/master. This is an uncompressed version of jqGrid. If you not familier with uncompressed version of jqGrid I'll recommend you to read http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation to undertand which of js files and in the which order you should include. Under http://www.ok-soft-gmbh.com/jqGrid/CustomSorttype1.htm you can find a working example of your code where the custom function really work.
According to this forum post, a custom sorttype is only called when the grid is initialized and not during the onSortCol event:
As I understand it right now, if I have a custom sorttype like sorttype:sortDate, the function sortDate will only be called when jqGrid is initialized and not the event onSortCol. Is the only way to make onSortcol call SortDate is by manually over riding onSortCol event and writing the tedious code that does this and updates the grid accordingly? Why doesn't defining the sorttype:sortDate just over ride onSortCol event automatically? I mean when the jqGrid gets initailized it sorts correctly, but when I call the event it must do some built in sort. Why I ask is because my sortDate function doesn't have any code that actually updates jqGrid. it just returns 1,-1, or 0. its used in something outside of jqGrid…
Does this explain the behavior you are seeing?