Jquery Click event is firing for first time but on second time it is not triggering.
Datatable:
var tableAttendance = $('#tableAttendance').dataTable ({
"bDestroy" : true,
"bAutoWidth" : false,
"bServerSide" : true,
"bDeferRender" : true,
"sServerMethod" : "POST",
"sAjaxSource" : pageUrl (),
"sAjaxDataProp" : "aaData",
"aaSorting" : [[2, 'desc']],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).attr({
"data-toggle":"context",
"data-target":"#attendance-context-menu"
});
},
"aoColumns" : [
{
"mData" : function (row, type, set) {
return '<div>'+ row['Employee_Name'] +'</div>';
}
}]
});
Jquery Event :
$(document).on('click contextmenu', '#tableAttendance tbody tr', function (e) {
console.log("Event Triggered");
var selectRow = $(this);
if (!selectRow.hasClass('row_selected'))
{
selectRow.addClass('row_selected');
}
else
{
//Other than right click. Because i use multi-select option
if( e.button !== 2 )
selectRow.removeClass('row_selected');
}
});
Working for different row select event. But when i right click(context menu) same row more than once, the event is not triggring
Just tested and your code works for me.
Could you please try to modify your click handler as follows:
$(document).on('click contextmenu', '#dummy tbody tr', function () {
var d = new Date();
console.log("Event Triggered" + d.getMilliseconds());
});
If you are debugging with firebug it could well be that you overlooked the number in front of your logged text.
Messages with the exact same content logged multiple times result in the number being incremented.
Adding milliseconds to the output will slightly modify the message and result in a new line of output.
EDIT:
A right click will result in the value e.button = 2.
This value is checked in your handler if( e.button !== 2 ) and does not execute selectRow.removeClass('row_selected'); because the result of the check is false.
Completely removing the check for e.button would get your right-click to select and deselect the rows.
Related
In jquery's fullcalendar script I'd like to change the keywords "title" "start" and "end" by the column names that are in my database table.
the fullcalendar work when i change in the database table the name of the colums :
i changed "name" by "title" , "date_start" by "start and "date_end" by "end", ok it's work ,but I would like to do the opposite.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable: false,
events: "{{ route('products') }}",
displayEventTime: false,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
$.getJSON("{{ route('products') }}", function(user) {
var convertToTableau = Array.from(Object.values(user));
console.log(convertToTableau);
var us = $.grep(convertToTableau, function(v) {
return v.id == event.id;
console.log(event.id);
});
$("#firstname").text(us[0].title);
$("#idpilote").text(" Id : " + us[0].id);
$("#firstname").text(" Name : " + us[0].title);
$("#metier").text(" Job : " + us[0].profession);
});
}
});
});
</script> ```
You can't change what fullCalendar expects as the default property names for the important fields in your events (well, you could, if you modified the fullCalendar source code, but you don't want to do that).
However, if for some reason you don't want to change your server/database code to match (but why not, exactly??) you can create a simple mapping between the two via the eventDataTransform callback in fullCalendar. This function runs once for every event which is loaded into fullCalendar, and allows you to update the properties of the event object before fullCalendar starts processing it. In here you can copy data from the server-generated property names to the ones which fullCalendar recognises.
Here's an example:
eventDataTransform: function(event) {
event.title = event.name;
event.start = event.date_start;
event.end = event.date_end;
return event;
}
In Datatable's Select plugin, there is a way to programmatically select a row:
https://datatables.net/reference/api/row().select()
But this will also trigger the row's select event, which is not ideal in my context as it will get into an infinite loop...
Is there a way of doing this without having to use some control variable?
The bit in their API for the select function is as follows :
apiRegisterPlural( 'rows().select()', 'row().select()', function ( select ) {
var api = this;
if ( select === false ) {
return this.deselect();
}
this.iterator( 'row', function ( ctx, idx ) {
clear( ctx );
ctx.aoData[ idx ]._select_selected = true;
$( ctx.aoData[ idx ].nTr ).addClass( ctx._select.className );
} );
this.iterator( 'table', function ( ctx, i ) {
eventTrigger( api, 'select', [ 'row', api[i] ], true );
} );
return this;
} );
It seems I just need to figure out the ctx.aoData[ idx ]._select_selected = true; part, is ctx the row object? I'm clueless.
I know this question is very old, but for those coming here later on might like an answer.
Datatables has a select event and a user-select event.
Just use the user-select event where applicable and leave the select event for all other purposes.
https://datatables.net/reference/event/user-select
For example,
var table = $('#example').DataTable( {
select: true
} );
table
.on( 'user-select', function ( e, dt, type, cell, originalEvent ) {
if ( originalEvent.target.nodeName.toLowerCase() === 'img' ) {
e.preventDefault();
}
} );
Update : Just to add an additional choice since the user-select event does fire even on a deselect. One way to avoid some issues I think many people have is when the table is initialized they programmatically select items. You can avoid this trigger by simply enabling your select and deselect events only after the table has been initialized.
Datatables has an initComplete event. So do it like so. Where table is a variable to your datatable reference.
initComplete: function(settings, json) {
table.on('select', function( e, dt, type, indexes ) {
});
}
I use jQuery DataTable and there is a checkbox on the toolbar that is used for retrieving all records or not. As stateSave feature of DataTable does not work properly, I tried to use jquery.cookie in order to keep the checkbox value after reloading the DataTable (because the checkbox is redrawn dynamically on every reload) as shown below:
$(document).ready(function() {
$('#example').DataTable( {
//code omitted for brevity
"serverSide": true,
"ajaxSource": "/Student/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */
aoData.push({ "name": "isAll", "value": $("#cbIsAll").is(":checked") });
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"fnDrawCallback": function() {
$("div.toolbar").html('<input type="checkbox" id="cbIsAll" name="demo" /> Get all records');
}
});
$(document).on('change', '#cbIsAll', function () {
var isClicked = $('#cbIsAll').is(':checked') ? true : false;
$.cookie('clicked', isClicked, { expires: 1 }); // expires in 1 day
table.ajax.reload();
$('#cbIsAll')[0].checked = ($.cookie('clicked') == "true") ? true : false;
});
});
After debugging the code I saw that although the $('#cbIsAll')[0].checked line is executed properly as true, the checkbox lost value later than this line. Could you please clarify me about where the mistake is? Or is there a better and smart way to keep the checkbox value?
There is no reason to use $.cookie in your case. In the checkbox change event, you can simply store the value of the checked state and use that to set the checked property of the new checkbox generated when you reload the table
var isChecked;
$(document).on('change', '#cbIsAll', function () {
// Store the current value
isChecked = $(this).is(':checked');
....
Then in the datatable's callback function, set the checked state of the checkbox
$('#cbIsAll').prop('checked', isChecked);
I using jqgrid with great succes in the following way:
The data is loaded from the server as JSON
The user do inline editing
When a save-button is clicked all the data is serialized using:
var data = $("#mygrid").getRowData();
var datajson = JSON.stringify(data);
The problem with this aproach is that I will get the input elements in my json-data if the user has not pressed return or moved away from the edited cell. Is there any way to end edit mode i jqgrid?
You can use saveRow to save the data.
To use saveRow you have to know the row id of the current editable row. You can for example save the rowid of the current editing in a variable (before you call editRow) and use the value for calling of the saveRow method.
UPDATED: see the demo. First select some row, modify the values and then click on the "Save current editing row" button. You will see that the changes will be saves.
I have solved it by triggering "keydown" ENTER event on element:
editoptions: {
dataInit: function(elem) {
$(elem).datetimepicker({
dateFormat: "yy-mm-dd",
onClose: function(datetimeText, datepickerInstance) {
$(elem).trigger($.Event( "keydown", { keyCode: $.ui.keyCode.ENTER } ))
}
});
}
}
I use remote submit for each cell, and as I used "contenteditable" div for cell editor (for multiline text), i wanted to finish cell editing with ctrl-enter.
( Based on Oleg's answer and How to close cell-editor? and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing )
$(document).ready(function() {
var grid,currentCell;
$(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) {
if (e.ctrlKey && e.keyCode == 13)
{
grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol);
return false;
}
return true;
});
grid=$("#table_list_2");
grid.jqGrid({
url: ...
cellEdit: true,
cellsubmit: 'remote',
cellurl: '..',
beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
currentCell={
rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol
}
}
});
});
HI,
I am using afterSaveCell that fires if we modifies the cell then it get fires.
My scenario is that i m doing batch update to the database on save change button. But when user edit the cell and got to the other cell then i log the modification in a array.
But if user edit the cell and click on the Save Change button the cell focus not get lost (Still in edit mode) and afterSaveCell not get fired.
IS there any way to fire the Save the cell on buttojn click so that afterSaveCell get fires.
Please, Help..
Thanks..
You can call saveCell method. This method has iRow and iCol as a parameters. To know the this parameters for the current editable cell you can add afterEditCell to the grid. So you save last values of iRow and iCol in a variable outside of jqGrid and use there inside of on click event on "Save Change" button where you call saveCell with these parameters.
// This worked Perfectly fine for me, hope will work for you as well.
var selectedCellId;
var $gridTableObj = $('#jqGridTable');
$gridTableObj.jqGrid({
datatype : "jsonstring",
datastr : gridJSON,
height : ($(window).height() - 110),
width : ($(window).width() - 80),
gridview : true,
loadonce : false,
colNames : columnNames,
colModel : columnModel,
rowNum : gridJSON.length,
viewrecords : true,
subGrid : false,
autoheight : true,
autowidth : false,
shrinkToFit : true,
cellsubmit : 'clientArray',
cellEdit : true,
jsonReader : {
root : "rows",
repeatitems : false
},
onCellSelect : function(id, cellidx, cellvalue) { // use this event to capture edited cellID
selectedCellId = cellidx; // save the cellId to a variable
},
loadComplete : function(data) {
jQuery("tr.jqgrow:odd").addClass("oddRow");
jQuery("tr.jqgrow:even").addClass("evenRow");
}
});
// Attach on click event jqgrid "saveCell" to save the cell.
var gridCellWasClicked = false;
window.parent.document.body.onclick = saveEditedCell; // attach to parent window if any
document.body.onclick = saveEditedCell; // attach to current document.
function saveEditedCell(evt) {
var target = $(evt.target);
var isCellClicked = $gridTableObj.find(target).length; // check if click is inside jqgrid
if(gridCellWasClicked && !isCellClicked) // check if a valid click
{
var rowid = $gridTableObj.jqGrid('getGridParam', 'selrow');
$gridTableObj.jqGrid("saveCell", rowid, selectedCellId);
gridCellWasClicked = false;
}
if(isCellClicked){
gridCellWasClicked = true; // flat to check if there is a cell been edited.
}
};