I want to change default data table sProcessing as below
dTable = $('#callTable').dataTable({
"oLanguage": {
sProcessing: "<div id='callTable_processing' class='dataTables_processing'><span>Processing...</span></div>",
}
});
I have done above change in one file and it is working ,
but is there any way to put this in common file to apply in all files ?
It looks like you can load your own translations via the url option while requesting a JSON.
//https://datatables.net/examples/advanced_init/language_file
$(document).ready(function() {
$('#example').DataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
} );
} );
`' Important : Text which is displayed when the table is processing a user action (usually a sort command or similar).
Default: Processing...
Type: string
Code example:
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": "DataTables is currently busy"
}
} );
} );
Related
I have tried to add individual column search in the server side datatable but its not working.
// Apply the filter
$("#empTable tfoot input").on( 'keyup change', function () { alert('test');
tables
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
I need the solution for this how to achieve in the datatable
assume you will filter column name, add this input in top column name
<input type="text" class="name_filter reload_datatable">
change your ajax datatable to this
var table = $(".table").DataTable({
"ajax": {
"url": "urlajax",
"dataType": "json",
"type": "post",
"data": function(d) {
d.name= $('.name_filter').val()
}
}
}
create function on change like this
$(".reload_datatable").change(function(){
table.ajax.reload();
});
and get data in ajax php with
$_POST['name']
Dear fellow EXT enthusiasts,
I'm working on a project where I need an admin panel to edit job functions.
The grid is communicating to a MySQL database using Ext.Direct. It loads the data fine.
The grid shows the id and the function name
I added a RowEditing plugin to my grid for editting the function settings.
The problem is, when I try to commit the changes I get a tiny red triangle in the upper left corner of the grid without any error code in the console. The changes don't commit to the MySQL database.
The way my program works and loads the data:
This is my functionStore:
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
Ext.define("MCS.store.FunctionStore",
{
extend: "Ext.data.Store",
requires: "MCS.model.Functions",
model: "MCS.model.Functions",
id: "FunctionStore",
proxy:
{
type: "direct",
api:
{
read: QueryDatabase.getFunctions,
create: QueryDatabase.createFunction,
update: QueryDatabase.updateFunction,
destroy: QueryDatabase.removeFunction,
}
},
});
In the controller: when the admin panel is rendered, the store gets loaded with the following function:
loadStore: function()
{
functionStore.load();
}
This is the grid where the functions are displayed:
var rowEditingFunctions = Ext.create("Ext.grid.plugin.RowEditing",
{
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor,e,opt)
{
var grid = e.grid;
var record = e.record;
console.log(record.data.functionName);
var editedrecords = grid.getStore().getUpdatedRecords();
console.log(editedrecords);
}
}
});
var functionGrid = Ext.create("Ext.grid.Panel",
{
height: 500,
width: 800,
store: functionStore,
title:"List of Job Functions - double click to edit",
columns: [
{
dataIndex: "id",
width: 50,
text: "ID"
},{
dataIndex: "functionName",
flex: 1,
text: "Function",
field:
{
type: "textfield",
allowBlank: false
}
}],
plugins: [
rowEditingFunctions
],
dockedItems: [
{
xtype: "toolbar",
store: functionStore,
dock: "bottom",
items: [
{
iconCls: "add",
text: "Add",
handler: function()
{
rowEditingFunctions.cancelEdit();
var newRecord = Ext.create("App.model.Functions");
functionStore.insert(0, newRecord);
rowEditingFunctions.startEdit(0, 0);
var sm = functionGrid.getSelectionModel();
functionGrid.on("edit", function() {
var record = sm.getSelection()
functionStore.sync();
functionStore.remove(record);
functionStore.load();
});
}
}, {
iconCls: "delete",
text: "Delete",
handler: function()
{
rowEditingFunctions.cancelEdit();
var sm = functionGrid.getSelectionModel();
Ext.Msg.show(
{
title:"Delete Record?",
msg: "You are deleting a function permanently, this cannot be undone. Proceed?",
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn)
{
if(btn === "yes")
{
functionStore.remove(sm.getSelection());
functionStore.sync();
}
}
});
}
}]
}]
});
As u can see I added a listener to the edit event of the RowEditing plugin, this displays the array of the edited record in console like it should.
4. And finally, this is the PHP code that updates the database:
public function updateFunction(stdClass $params)
{
$db = $this->__construct();
if ($stmt = $db->prepare("UPDATE functions SET functionName=? WHERE id=?"))
{
$stmt->bind_param('si', $functionName, $id);
$functionName = $params->functionName;
$id = (int) $params->id;
$stmt->execute();
$stmt->close();
}
return $this;
}
5. The weird part: once I've added one job function, I can edit all the other functions and those changes are committed to the database...
As a side note: I'm just a beginner in EXT, trying to learn it on my own, but I have been breaking my head on this issue for the last few days so I decided to ask you guys.
Thanks for your answers in advance!
I left the bug for what it was for a few weeks and started to look into it again this week.
I found a work around solution.
I've added the following code to my controller that controls the grids:
functionGrid.on('edit', function(editor, e)
{
e.store.sync();
});
Now when I update a record, the tiny red triangle still appears but after the e.store.sync() function is completed it disappears and the database table is updated.
Not a 100% clean solution, but it does the trick
If anyone has a better solution, please let me know
Hey I hope someone can help me out,
I have an external js file that resides in the webroot/js folder that I insert into my view using:
echo $this->Html->script('script');
In the js file I have an ajax request to insert data into my database:
var assetData = {
"project_id": $("#projectId").val(),
"asset_id":"??",
"content": "content":$(this).html()
};
$.ajax({
url:'/assets/add',
type:"POST",
data:assetData
});
In my view I created a hidden form field with the project_id so that I can get it in the js file, however the asset items are created dynamically, the are created and saved into the assets table, and now I want to update that asset with the content.
What would be the best way to get the asset? I can't get the id and save it, for example, in the div's id because it was created in the js file.
I would really appreciate any suggestions!
/assets/add should return the ID of the asset it created.
If you're inserting into a mysql database, then one option is to use mysql_insert_id (there are mysqli and pdo equivilents on the manual).
var assetData = {
"project_id": $("#projectId").val(),
"content": "content":$(this).html()
};
$.ajax({
url:'/assets/add',
type:"POST",
data:assetData,
dataType:'text',
success:function (data)
{
assetData['asset_id'] = (int)data;
}
});
And then your /assets/add should echo out the ID after it is created
echo $asset_id; // some INT id
So you may want to consider HTML partials. These are little bits of HTML representing anything from a single tag, to a popup. The important thing is that it does not have the or tag.
$.post('/assets/add', data, function (html) {
$('#assets').append(html);
}, 'html');
After you POST data, your call returns a snippet of HTML. You can then append that HTML to a DIV on the page.
<div id="assets">
<div class="asset" id="asset-1">
<p>Asset content</p>
</div>
</div>
In your controller (I assume it's CakePHP), you have:
if ($this->Asset->save($this->data)) {
$this->autoLayout = false;
$this->render('asset_partial.html');
}
Using the suggestions I received this is how I managed to solve the problem:
javascript file:
$.ajax({
url:'/assets/create',
type:"POST",
data:assetData,
dataType:'text',
success: function (response) {
if (response.success) {
alert("response: "+response);
} else {
//console.log(response.data, response.code);
alert("response: "+response);
}
}
});
Controller:
public function create($id = null) {
if ($this->data != null) {
$this->Asset->save($this->data);
$this->autoRender = false;
echo $this->Asset->id;
}
}
1)I have a json file which I want to display in view.
{
"contents": [
{
"title":'JWorld',
"image":'image/e-learning/elearning.png',
"subtitle":[
{
"categories":'Aus',
},
{
"categories":'England',
}
]
},
{
"title":'JIndia',
"image":'image/Content/History_of_India.jpg',
"subtitle":[
{
"categories":'History',
},
{
"categories":'India palace',
}
]
},
{
"title":'JMaharastra',
"image":'image/Content/Geography.jpg',
"subtitle":[
{
"categories":'History Maharastra',
},
{
"categories":'Maharastra Heros',
}
]
}
]
}
2)My view file :--
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.view.View',
id:'contentcategoriesViewId',
alias:'widget.ContentcategoriesView',
store:'kp.DnycontentcategoriesStore',
config:
{
tpl:'<tpl for="0">'+
'<div class="main">'+
'</br>'+
'<b>{title}</b></br>'+
'<img src={image} hight="50" width="100"></br>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});// End of class
3) i am using tab panel and dynamically adding tabs in it using json file.
Ext.define('Balaee.view.kp.dnycontentcategories.Contentcategories',{
extend:'Ext.tab.Panel',
requires:[
'Balaee.view.kp.dnycontentcategories.ContentcategoriesView','Balaee.view.kp.dnycontentcategories.ContentcategoriesView1'
],
id:'contentcategoriesId',
alias:'widget.Contentcategories',
height:500,
items:[
],//end of items square
});// End of login class
4) My store file:--
Ext.define('Balaee.store.kp.DnycontentcategoriesStore',{
extend: 'Ext.data.Store',
model: 'Balaee.model.kp.DnycontentcategoriesModel',
autoLoad:true,
// filters: [{
// property: 'title',
// }],
proxy:
{
type:'ajax',
api:
{
read:'data/content.json',
//create: ,
//update: ,
//destroy: ,
},//End of api
reader:
{
type:'json',
root:'contents',
//successProperty: ,
}//End of reader
}//End of proxy
});//End
5) My Controller file some code
here I am dynamically adding some tabs from json file.And selecting particular tab I want different particular values from json file. But I get same view of first tab. How can I solve this problem.
init: function(){
console.log("inside content controller");
this.control({
'Contentcategories':
{
render:this.renderFunction,
}
});//End of control
},//End of init() function
renderFunction:function(){
console.log("Inside render function");
var tabPanel = Ext.getCmp('contentcategoriesId'); // tabpanel
var tabPanelView = Ext.getCmp('contentcategoriesViewId'); // tabpanel view
var storeObject= this.getStore('kp.DnycontentcategoriesStore'); // store
storeObject.on('load',function(){
storeObject.each(function(model){
//tabPanelView.store().filter('title',model.get('title')),
console.log(model.get('title'));
console.log(model.get('categories'));
tabPanel.add({title:model.get('title'),
id:model.get('title'),
//html:"<image src=model.get('image')>",
xtype:'ContentcategoriesView',
}); //End of add function
});// End of storeObject function
tabPanel.setActiveTab(0);
});
},// End of render function
please give me some suggestion.
There are a few issues with your code.
You define ContentcategoriesView - its a a component you have extended; but you give it an id (contentcategoriesId) yet you are creating more than one of these components - it makes no sense as an id has to be unique per component instance.
Then, you attach a store to this view, which means all components will render the same.
If I understand correctly you want each entry in your json to become a different tab.
I would take this direction (code not tested, but should give you a direction):
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.panel.Panel', // Notice it's a panel.
alias:'widget.ContentcategoriesView',
config:
{
tpl: '<div class="main">' +
'</br>' +
'<b>{title}</b></br>' +
'<img src={image} hight="50" width="100"></br>' +
'</div>'
itemSelector:'div.main',
}
});
And then:
storeObject.on( 'load',function() {
storeObject.each( function( model ) {
tabPanel.add({
xtype: 'ContentcategoriesView',
title: model.get( 'title' ),
id: model.get( 'title' ),
data: model
});
});
tabPanel.setActiveTab(0);
});
My Jquery slideshow script looks like that
$(function() {
$('#bg').crossSlide({
sleep: 3,
shuffle: true,
fade: 1
}, [
{ src: 'core/design/images/bgs/1.jpg'},
{ src: 'core/design/images/bgs/2.jpg'},
{ src: 'core/design/images/bgs/3.jpg'},
{ src: 'core/design/images/bgs/4.jpg'}
])
});
As you see, I declared the images' paths one by one. Is there any way to scan folder for images and add all at once. Maybe, it can be done with PHP?
It cannot be done with Javascript. But with a embedded server side code it should be possible (like PHP). Here is an example in php.
There exists a function called glob, which might be suitable for your purpose. Here is an example of how to use it.
$path = <absolute path for the folder where images are located>
$images = glob($path.'/*.jpg') // this returns an array of file names only doesnt contain the path
Now you have the list of arrays in php. You have to start using this in javascript
$(function() {
$('#bg').crossSlide({
sleep: 3,
shuffle: true,
fade: 1
}, [
<?php foreach($images as $filename){ ?>
{ src: 'core/design/images/bgs/<?php echo $filename.jpg ?>'},
<? } ?>
])
});
Yes. It can be done using JS / jQuery:
Works both locally and on live server without issues, and allows you to extend the delimited list of allowed file-extensions:
var folder = "core/design/images/bgs/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.jpg|\.png|\.gif/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
in your case you want to construct an array of Objects {src:"path"} so it could look like:
var folder = "core/design/images/bgs/";
$.ajax({
url : folder,
success: function (data) {
var srcArr = [];
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.jpg|\.png|\.gif/) ) {
var ob = {src : folder+val};
srcArr.push( ob );
}
});
// Now that the Array is filled with Objects send to callback
readFolderCallback( srcArr );
}
});
function readFolderCallback( srcArr ) {
$('#bg').crossSlide({
sleep: 3,
shuffle: true,
fade: 1
}, arrSrc);
}
https://stackoverflow.com/a/32940532/383904