We Keep Coding

How to disable a custom DataTables button in its action callback?

This is in a C# ASP.NET MVC 5 web application, using DataTables version 1.10.22.
I configure a DataTable to have a custom button. The action for the button is a callback function. After that function executes once, I want to disable the button.
I can disable all buttons associated with the DataTable. But, how do I disable just one button?
The DataTables documentation, such as https://datatables.net/reference/api/buttons().disable(), has an example that seems to identify certain buttons by... their CSS class name?
var table = $('#myTable').DataTable();
var buttons = table.buttons( ['.edit', '.delete'] );
buttons.disable();
But, how do I uniquely identify my custom button?
The action callback function for the button seems to be provided with several parameters that represent the button. But, the node does not seem to have a disable() function. Changing config.enabled to false has no effect. What else can I try?
The following is what I am trying to do in my Views/Foo/Index.cshtml:
<script>
$( document ).ready( onReady );
function onReady()
{
var config = {};
config.buttons =
[
// A button to create data for the table.
{
text: '<span class="fa fa-plus"/>',
titleAttr: 'Create states',
action: createStates,
enabled: true,
}
... other buttons ...
];
... other configuration ...
$( '#state-table' ).DataTable( config ) );
}
/**
* Create the states.
*
* Parameters:
* e (object): The event.
* table (object): The DataTable.
* node (jQuery): The jQuery instance of the button that was clicked.
* config (object): The button configuration.
*/
function createStates( e, table, node, config )
{
//------------------------------
// Create client-side state data in the table.
table.clear();
for ( var i = 0; i < 3; i++ )
{
var data = { Id: i, Name: 'state ' + i };
table.row.add( data );
}
//------------------------------
// Calling draw() at the end updates the DataTable internal caches.
table.rows().draw();
//------------------------------
// Disable the button, so that states cannot be created again.
// *** How ? ***
// Just changing this property has no effect on the button.
config.enabled = false;
// This disables all buttons, not just the one I want.
table.buttons().disable();
}
</script>

Each DataTables button can be given a button name and/or a class name - and then you can refer to that button using either of these - for example:
$(document).ready(function() {
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
"buttons": [
{
text: 'My Button',
className: 'myButtonClass',
name: 'myButtonName'
}
]
} );
table.buttons( '.myButtonClass' ).disable();
//table.buttons( 'myButtonName:name' ).disable();
});
In the above example, the button has both a button name and a class name.
There are various additional ways to select one or more buttons:
buttons( selector );
These selector options are documented here.
And, yes, that example in your question...
var buttons = table.buttons( ['.edit', '.delete'] );
...is indeed using the class name selector.

Disabled Kendo DropDownList in Javascript

Hi I'm trying to accomplished to disabled the KendoDropDownList via javascript.
I already did it but my problem is when I try to populate the KendoGrid the KendoDropDownList is disabled but the value is gone. Anyone know how to fix this? or Anyone know other way to do accomplished this ?
Heres my code:
<script>
$(document).ready(function () {
var url = "#Url.Action("CheckUserStatus", "Maintenance")";
var checkData = "CheckUser";
$.post(url, checkData, function (d) {
if (d != 0) {
// alert(d);
$("#office_id").data("kendoDropDownList").value(d);
document.getElementById("mode-status").innerHTML = "Update Program";
document.getElementById("button-status").innerHTML = "Update Program";
$("#grd_ApprovedBudget").data("kendoGrid").dataSource.read();
$("#office_id").kendoDropDownList({
enable: false
});
}
//alert(d);
})
});
</script>

When you call $("#office_id").kendoDropDownList, it will try to create a new instance of kendoDropDownList. If you want to disable an existing kendoDropDownList, you'll have to do it using the enable function of the existing instance:
$("#office_id").data("kendoDropDownList").enable(false);
Here's kendo documentation about the enable function.

Accept Image in Filefield ExtJs

I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.

This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}

Redefining a jQuery dialog button

In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.
Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.
So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?
My code so far:
function OverrideDialogButtonCallbacks(sDialogInstance) {
oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
console.log(oButtons); // logs the buttons correctly
if(sDialogInstance == 'TestInstance') {
oButtons.Save = function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
}
}
}

$('#dialog').dialog({
'buttons' : {
'Save' : {
id:"btn-save", // provide the id, if you want to apply a callback based on id selector
click: function() {
//
},
},
}
});
Did you try this? to override button's callback based on the need.

No need to re-assign at all. Try this.
function OverrideDialogButtonCallbacks(dialogSelector) {
var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
.find("button:contains('Save')");
button.unbind("click").on("click", function() {
alert("save overriden!");
});
}
Call it like OverrideDialogButtonCallbacks("#dialog");
Working fiddle: http://jsfiddle.net/codovations/yzfVT/

You can get the buttons using $(..).dialog('option', 'buttons'). This returns an array of objects that you can then rewire by searching through them and adjusting the click event:
// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };
See this fiddle for an example: http://jsfiddle.net/z4TTH/2/
If necessary, you can check the text of the button using button[i].text.
UPDATE:
The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:
// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };
$('#dialog').dialog('option', 'buttons', buttons);
See this fiddle: http://jsfiddle.net/z4TTH/3/

Can you try binding your new function code with Click event of Save?
if(sDialogInstance == 'TestInstance') {
$('#'+savebtn_id).click(function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
});
}

Populating a FilteringSelect datastore from an onChange event

I'm trying to bind an onChange event of one FilteringSelect to populate another FilteringSelect.
// View
dojo.addOnLoad(function () {
dojo.connect(dijit.byId('filterselect1'), 'onChange', function () {
dijit.byId('filterselect2').store = new dojo.data.ItemFileReadStore(
{ url: "/test/autocomplete/id/" + dijit.byId("filterselect1").value }
);
});
});
The JSON is generated from what I can tell correctly from a Zend Action Controller using a autoCompleteDojo helper.
// Action Controller
public function autocompleteAction()
{
$id = $this->getRequest()->getParam('id');
$select = $this->_table->select()
->from($this->_table, array('id','description'))
->where('id=?',$id);
$data = new Zend_Dojo_Data('id', $this->_table->fetchAll($select)->toArray(), 'description');
$this->_helper->autoCompleteDojo($data);
}
I receive the JSON from the remote datastore correctly, but it does not populate the second FilteringSelect. Is there something else I need to do to push the JSON onto the FilteringSelect?

I couldn't believe this was causing the problem, but the whole issue boiled down to the fact that it appears that a dojo ItemFileReadStore REQUIRES the label property of the JSON to be "name". In the end this is all that it required to wire them together.
dojo.addOnLoad(function () {
dijit.byId('filtering_select_2').store = new dojo.data.ItemFileReadStore({url: '/site/url'});
dojo.connect(dijit.byId('filtering_select_1'), 'onChange', function (val) {
dijit.byId('filtering_select_2').query.property_1 = val || "*";
});
});
UPDATE: The property within Zend form has been fixed as of ZF 1.8.4

Try console.log() in the event to see if it is launched. Changing the store should work, however for other widgets like grid you have also to call refreshing methods.