Cannot see datatable buttons - datatable

I have added datatable plugin in my project and my datatable is displaying but the buttons ( excel, pdf, etc) are not rendered at all.
Here's my code snippet:
table = $("#orders").DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
....
Here's how it's rendered:
Here's my dependency list:
bundles.Add(new ScriptBundle("~/bundles/lib").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js",
"~/Scripts/datatables/jquery.datatables.js",
"~/Scripts/datatables/datatables.bootstrap.js",
"~/Scripts/datatables/buttons.bootstrap.js",
"~/Scripts/datatables/buttons.html5.js",
"~/Scripts/datatables/buttons.print.js",
"~/Scripts/typeahead.bundle.js",
"~/Scripts/toastr.js",
"~/Scripts/moment.js"
));
I am not getting the following error:
buttons.bootstrap.js:39 Uncaught TypeError: Cannot read property
'defaults' of undefined
I searched for this error and here it suggests to put the dependencies in order. But I do have my dependencies in order. Is there anything else I am missing ?

Related

Getting window.checkout.quoteData or store code are undefined error when cart item count updated using ajax

I have created a custom page with free text ordering functionality and called custom add to cart API to add items to the cart.
Once the item is added I need to update the cart item count with updated quantity. I tried to use
require([
'jquery',
'Magento_Checkout/js/action/get-totals'
], function ($, getTotalsAction) {
'use strict';
var deferred = $.Deferred();
getTotalsAction([], deferred);
});
But It is throwing error:
Uncaught TypeError: Cannot read property 'quoteData' of undefined at quote.js:34
And
url-builder.js:12 Uncaught TypeError: Cannot read property 'storeCode' of undefined at url-builder.js:12
Anything missing here?
I referred https://magento.stackexchange.com/questions/210517/error-javascript-define-magento2-window-checkout-quotedata-or-store-code-are-u which doesn't have any working solutions.
The issue is that quoteData lives in window.checkoutConfig - this data will only be set on the checkout pages, you won't have many of required js the modules loaded on a custom page that set this data correctly.
this may be a useful read: https://www.yireo.com/blog/2017-08-20-do-not-depend-on-window-checkoutconfig
I was able to achieve this for my scenario using the below code. It might help someone
require([
'Magento_Customer/js/customer-data'
], function (customerData) {
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
});

Download file link inside grid JQgrid

im new about using jqgrid, and i have a question about jqgrid, hoping help to resolve my question :)
I have a grid that contain a column 'Download File', the column filed with data i load from database and the value is local url that direct to the document like 'file:///D:/Download Folder/File.xlsx'.
I have 2 .js, one is gridview .js and other is model.js. I create link inside model.js using the data and call it inside gridview.js in colModel.
This is my code
//Model.js
val.fileDirText = ''+fileName'';
//Gridview.js
{name: 'fileDirText',width:250,sortable:false}
The Download File column is has a underline and hand symbol if i hover to it but there is no action when i click, open in new tab, and open in new window, but it can copy link.
So how to make the link is clickable and start download the file?
Thank you :)
/*Use my code as reference, it may help.*/
colNames : ["Certificate"],
colModel: [
{ name: "Certificate", index: "Certificate", align: "center", formatter: downloadLink },
],
function downloadLink(cellvalue, options, rowObject) {
var MTJobRoleId = rowObject.MTJobRoleId;
return "<a href='../Templates/Certificate129821/GENERAL_ENGLISH_1_100720181922.pdf' download=''>View Certificate</a>";
}

jquery: Datatables.net change paginationtype based on different filter

I am using jquery plugin datatables.net.
I want to change the pagination type of already initialized datatable. The pagination should change based on the some filter that user selects. I tried by reinitializing the datatable by changing the "sPaginationType" property to a new value but i
initialize code
datatableGrid = $('#datagrid').dataTable({
"sPaginationType": "full_numbers"
});
code onclick of a filter button:
datatableGrid.fnDestroy();
datatableGrid = $('#datagrid').dataTable({
"sPaginationType": "two_button"
});
The above code is throwing a javascript error for invisble columns.
Uncaught TypeError: Cannot read property 'style' of undefined
Please guide me which way I can achieve the functionality for changing the gridpagination style.
You can change the pagination style for an existing dataTable by using fnSettings and some javascript.
jsFiddle
$('.dataTables_paginate > span').remove();
$('.dataTables_paginate > a:nth-child(3)').remove();
$('.dataTables_paginate > a:nth-child(3)').remove();
datatableGrid.fnSettings().sPaginationType = "two_button";
datatableGrid.fnDraw(false);

Yii Bootstrap TbMenu in Navbar events

I'm beginning to work on Bootstrap in Yii framework and finding some difficulties in making it work the way I want to.
And have not found anything useful in the docs, although I might have missed something.
I have the navbar like this:
<?php $this->widget('bootstrap.widgets.TbNavbar', array(
'collapse'=>true, // requires bootstrap-responsive.css
'fixed'=>'none',
'brand'=>false,
'items'=>array(
array(
'class'=>'bootstrap.widgets.TbMenu',
'items'=>array(
array('label'=>'Home', 'url'=>'#', 'active'=>true),
array('label'=>'Link', 'url'=>'#'),
array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
'---',
array('label'=>'NAV HEADER'),
array('label'=>'Separated link', 'url'=>'#'),
array('label'=>'One more separated link', 'url'=>'#'),
)),
),
),
),
));
?>
By default submenu drop out by Click event, but I want to submenu drop out at mouseover event. How do it, please help. Thanks in advance.
Im using bootstrap with Yii for a while and submenus popups automatically. Check also this link http://www.bootply.com/60842 which shows that bootstrap submenus popups automatically on mouseover.
You will be probably overriding/missing some css/javascript files. Also check console if your page has no errors after loading.
Find bootstrap.js in the asset folder of the bootstrap extension folder.
Replace the following (rows 797- 800) :
.on('click.dropdown.data-api', clearMenus)
.on('mouseover.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('mouseover.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
to becomes
.on('click.dropdown.data-api', clearMenus)
.on('mouseover.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('mouseover.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
In order to work, you have to clean the asset folder in the main directory to generate once from the asset you've just changed.

CKEditor disables all jquery dialogs

I have a problem with ckeditor and jquery dialog window.
I have a form in which I'm dragging a div to a sortable table. When dragging I'm cloneing the div and opening a jquery dialog which contains the ckeditor.
The editor is created on the dialog's open method, and is being destroyed on close.
After dragging the edtior for the first time it opens in the dialog, but then all the dialogs in the page are not opening.
I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'dialog' when trying to open another dialog or drag another div with the editor.
My code is:
var CKEditor
$("#dialog_editor").dialog({
autoOpen: false,
height: 500,
width: $("#td_form").width(),
modal: true,
zIndex: -1,
buttons: [
{
text: "Save",
"class": 'btn btn_content',
click: function () {
saveEditorContent();
}
}
],
open: function (type, data) {
$(this).parent().appendTo("#form");
CKEditor = CKEditor = CKEDITOR.replace('text_editor', {
extraPlugins: 'autogrow',
removePlugins: 'resize'
});
},
close: function () {
CKEditor.destroy();
}
});
I have searched all over the web, and still found no answer to that.
I tried adding the adapters/jquery.js and still the same problem...
You should try to update the "Uploadcare" plugin to the current version, everything should be fine just after that.
I found out that the problem was in a plugin I added to the ckeditor named "Uploadcare"

Resources