I am using jquery datatables and I am having trouble grabbing the row data on click event. How can I get my data object from my datatable on row click event?
What I do:
jquery post to get a json response load json response as data into datatable (array of objects)
jquery, register click event on
datatable rows when user clicks on row, need to get data object for
row clicked on
My current code:
function contactSearchListTable(data) {
// data is array of javascript object
console.log('contactSearchListTable()');
$(contactSearchResultsTableElement + ' tbody').off();
if ( $.fn.dataTable.isDataTable(contactSearchResultsTableElement) ) {
$(contactSearchResultsTableElement).DataTable().destroy();
}
if (data.length == 0) {
$(contactSearchResultsTableElement).html('');
}
var table = $(contactSearchResultsTableElement);
var params = {"data":data
,"info": false
,"searching": false
,"ordering": false
,"lengthChange": false
,"columns":[
{"data":"id","visible":false}
,{"data":"name","title":"Name","class":"clickable"}
,{"data":"phoneHome","title":"Home","class":"clickable"}
,{"data":"phoneWork","title":"Work","class":"clickable"}
]
};
var dt = table.dataTable(params);
$(contactSearchResultsTableElement + ' tbody').on('click', 'tr', function () {
console.log(this); // <tr> html from datatable
// **** need to get hidden ID value here, HOW?
} );
}
You can access the data using row().data() function, change you click handler to:
$(contactSearchResultsTableElement + ' tbody').on('click', 'tr', function (){
var data = dt.api().row(this).data();
});
Related
I can't use the "save" method to save a change to my table data
I am using the "cellValueChanged" method to edit and save a table cell.
<ag-grid-vue :cellValueChanged="save"></ag-grid-vue>
methods: {
save() {
const method = this.instituicao.id ? 'put' : 'post'
const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
Error message:
enter image description here
To achieve expected result, use event callback of #cell-value-changed
Change your event to #cell-value-changed = "save"
Use event callback to get old and new values of cell
save(event) {
console.log('onCellValueChanged: ' + event.oldValue + ' to ' + event.newValue);
}
Get required id value from that event callback and use it for POST call
i try to change the navbar properties on a jqgrid in a callback function without succes.
The grid is display afeter user is chosing a period. Depend on either the period is open or close user can or cannot edit, add, delete rows. So the navbar need to change properties dynamically.
My code look like that:
$('#mygrid').jqGrid({
// some properties of my grid that works fine
pager : '#gridpager'
});
$("#mygrid").bind("jqGridLoadComplete",function(){
$.ajax({
url: 'checkifperiodopen.php',
data: {
$("#period").val()
},
success: function(data){
if(period==='open'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:false,edit:false,del:true,search:true,refresh:true});
}
if(period==='close'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
}
}
});
});
$('#validChossenPeriod').click(function () {
ajax call to get data on choosen period
success:function(data){
$("#mygrid").jqGrid('clearGridData');
$("#mygrid").jqGrid('setGridParam', { datatype: 'local'});
$("#mygrid").jqGrid('setGridParam', { data: data});
$("#mygrid").trigger('reloadGrid');
}
});
I finally found the answer by show or hide the div that include the navgrid button:
grid = $("#mygrid");
gid = $.jgrid.jqID(grid[0].id);
var $tdadd = $('#add_' + gid);
var $tdedit = $('#edit_' + gid);
var $tddel = $('#del_' + gid);
$("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
condition if false =
$tdadd.hide();
$tdedit.hide();
$tddel.hide();
if true =
$tdadd.show();
$tdedit.show();
$tddel.show();
Why so complex? There is a other clear way to do this
var view_buttons = true;
if(condition_to_hide) {
view_buttons = false;
}
$("#mygrid").jqGrid('navGrid','#gridpager', { add:view_buttons, edit:view_buttons, del:view_buttons, search:true, refresh:true});
I'm trying to modify a cell value using DataTable (the new version) when an outside button is clicked.
I have the following for now:
$(document).on('click', '.dropdown-menu li a', function () {
if ($(this).text() == "development") {
var cell = table.row( 6 ).data()[4]
cell.data( "development" ).draw();
}
});
This doesn't work since I think the table row and data retrieval method doesn't return an object with .data() attribute that allows me to set data cell value. I'm getting the following error: cell.data is not a function. (In 'cell.data( "development" )', 'cell.data' is undefined)However, I'm not sure how to access a table cell value the .data() way without having a click even in the table. My button is placed outside the table somewhere else.
Any idea how to make this work?
Since DataTables 1.10+ might not support fnGetNodes() as mentioned on the API landing page itself, instead now you can use rows().nodes().
Example: http://jsfiddle.net/cmedina/7kfmyw6x/28/
var table = $('#example').DataTable({sorting : false});
var row = table.row(0).node();
$('#test').on( 'click', function () {
var text = "development";
if (text == "development") {
table.cell(row, 0).data('Development').draw();
}
});
If you work with DataTables < 1.10 then you can use fnUpdate
Example: http://jsfiddle.net/cmedina/7kfmyw6x/29/
var oTable = $('#example').dataTable({sorting:false});
$('#test').on( 'click', function () {
var text = "development";
if (text == "development") {
oTable.fnUpdate('Development', 0, 0 ); // Single cell
}
})
you can use fnUpdate Datatables Function to update any specific cells just by row and col indexes.
something like this :
var oTable = $('#example').dataTable();
$('#button').click(function() {
var row = document.getElementById("indexDepRow").value;
var col = document.getElementById("indexDepCol").value;
oTable.fnUpdate('development', parseInt(row), parseInt(col));
});
See JsFiddle EXAMPLE
I am currently trying to implement automatic filtering in Yii cGridview, By default it filters 'onclick', or 'enter' key press, But I need to change that event to "onkeyup"|
my code is like this
Yii::app()->clientScript->registerScript('search',"
$('.filters > td >input').keyup(function(){
$('#grid-id').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
");
?>
when I entered the first letter filtering occured, but after filtering and rendering the code fails.. please give me a solution.. Is there any php yii gridview extension which has filtering onkeyup
You need to change the way you attach the keyup listeners. After the gridview refreshed through AJAX, all elements inside the grid are replaced. So there's no keyup attached anymore. You can try something like:
$('body').on('keyup','.filters > td > input', function() {
$('#grid-id').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
#Michael Härtl's answer is right. But 2 Problem occur when you use this code.
1) When User Search in filter at that time, every time grid will be refresh so focus of input box will be lost.
2) When you search in one filter input and if you go to second input field field at that time first input box will be lost.
So now I have got the solution for that.
Set this java script code on your grid view.
Yii::app()->clientScript->registerScript('search', "
$('body').on('keyup','.filters > td > input', function() {
$(document).data('GridId-lastFocused',this.name);
data = $('#GridId input').serialize();
$('#GridId').yiiGridView('update', {
data: data
});
return false;
});
// Configure all GridViews in the page
$(function(){
setupGridView();
});
// Setup the filter(s) controls
function setupGridView(grid)
{
if(grid==null)
grid = '.grid-view tr.filters';
// Default handler for filter change event
$('input,select', grid).change(function() {
var grid = $(this).closest('.grid-view');
$(document).data(grid.attr('id')+'-lastFocused', this.name);
});
}
// Default handler for beforeAjaxUpdate event
function afterAjaxUpdate(id, options)
{
var grid = $('#'+id);
var lf = $(document).data(grid.attr('id')+'-lastFocused');
// If the function was not activated
if(lf == null) return;
// Get the control
fe = $('[name=\"'+lf+'\"]', grid);
// If the control exists..
if(fe!=null)
{
if(fe.get(0).tagName == 'INPUT' && fe.attr('type') == 'text')
// Focus and place the cursor at the end
fe.cursorEnd();
else
// Just focus
fe.focus();
}
// Setup the new filter controls
setupGridView(grid);
}
// Place the cursor at the end of the text field
jQuery.fn.cursorEnd = function()
{
return this.each(function(){
if(this.setSelectionRange)
{
this.focus();
this.setSelectionRange(this.value.length,this.value.length);
}
else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', this.value.length);
range.moveStart('character', this.value.length);
range.select();
}
return false;
});
}");
Add this line to your gridview widget code.
'afterAjaxUpdate'=>'afterAjaxUpdate',
For example:
$this->widget('zii.widgets.grid.CGridView', array(
'id' => 'GridId',
'afterAjaxUpdate'=>'afterAjaxUpdate',
));
I am a beginer in mvc.I am working on an application where i need to change the value of a textbox after i enter a value in it and press TAB.For example when i enter 1 in textbox and press tab it should display +1 ie i need to concatinate a + sign to the text i enter.SO to do this i am trying to raise a textchanged event for the textbox.How can i do it.When i googled it i found that it can be done using javascript.But i dont know how to do that,pls give me some suggessions.
Code:
#Html.TextBoxFor(m => m.text)--textbox
You could use jQuery and subscribe to the blur event which will be triggered when the input field looses focus:
$(function() {
$('#id_of_your_textbox').blur(function() {
var value = $(this).val();
var newValue = value + '1';
$(this).val(newValue);
});
});
If you don't want to use a javascript framework such as jQuery you could achieve the same with plain javascript:
window.onload = function() {
document.getElementById('id_of_your_textbox').onblur = function() {
var value = this.value;
var newValue = value + '1';
this.value = newValue;
};
};
Note: this will add the string value 1 to the existing text. If you wanted to perform an integer addition you need to parse the current value first. You could use the parseInt or parseFloat methods (depending on the data type) for that:
var value = parseInt($(this).val());
if (!isNaN(value)) {
var newValue = value + 1;
$(this).val(newValue);
} else {
alert('You have entered an invalid integer value');
}
And here's how to assign a deterministic id to your text field that you could use in your javascript selectors:
#Html.TextBoxFor(m => m.text, new { id = "id_of_your_textbox" })