I'm using jquery datatables with theme roller support, and I would like to place a jquery-ui button in a column for each row. In order to do this, I'm using the following code:
oTable = $('#balances').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
...
"aoColumns": [
...
{
"mData": null,
"mRender": function(data, type, row) {
return $("<div />")
.append($("<button id='detail'>Details</button>").button())
.html();
}
}
]
});
The buttons are drawn and I can attach events to them, but it seems that I'm missing something (for example, these buttons don't animate when you move the mouse over them).
How can I correct this? Is there a better way to do it?
Thank you in advance.
Because using multiple identical Ids is not recommended, I'd suggest using a class instead, and moving the .button() call further down in the code:
oTable = $('#balances').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
...
"aoColumns": [
...
{
"mData": null,
"mRender": function(data, type, row) {
return $("<div />")
.append($("<button class='detail'>Details</button>"))
.html();
}
}
]
});
$("button.detail").button();
Related
I have integrated the bootstrap-wysihtml5 editor to description section in my rails application. Now I want to add the client side validation so that it would validate the presence of description field. I used bootstrap-wysihtml5-rails gem.
The editor is being initialized with following code:
<script type="text/javascript">
$(document).ready(function(){
$('#description').each(function(i, elem) {
$(elem).wysihtml5({
toolbar: {
"fa": true, // use Font Awesome
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false // Blockquote
}
});
});
})
Thanks in advance.
Found the solution by adding the events as suggested by the documentation
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
I use the following code to reload the content of the div #console every second.
var update = setInterval(
function(){
$("#console").load("/console");
$.ajaxSetup({ cache: false });
}, 1000
);
This works quite well. Additionally I would like, that the resizement of the div is animated.
I tried something like this:
$("#console").load("/console").animate({height: 'auto'}, 1000);
But it doesnt work. Any ideas?
UPDATE:
Thanks for your answers, that worked!
But there is still another problem I did not see:
I call
animate({height: 'auto'}, 1000)
but animate just can deal with numerical values but now with 'auto'.
I intended, that the div always fits to the content. Can that be realized somehow?
this should work:
var update = setInterval(
function () {
$("#console").load("/console", function (responseText, textStatus, XMLHttpRequest) {
if (textStatus == "success") {
$("#console").animate({ height: 'auto' }, 1000);
}
});
$.ajaxSetup({ cache: false });
}, 1000
);
I am using navButtonAdd to have a column chooser in my jqgrid but it adds the button to the bottom navigation bar. Is it possible to add the same icon to the top of my cloned navigation bar. Here is my code...
jQuery("#grid").jqGrid({
......
toppager: true,
....
);
jQuery("#grid").jqGrid('navGrid','#pager',
{cloneToTop: true, edit:false, add:false, del:false, search:false},
{ }, { }, { }, { } );
jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
caption : "",
buttonicon : "ui-icon-calculator",
title : "Choose Columns",
onClickButton : function() {
jQuery("#grid").jqGrid('columnChooser');
}
});
If the toppager will be created it will have the id constructed from the grid id and "_toppager", so it will be "grid_toppager" in your case. So you should use
jQuery("#grid").jqGrid('navButtonAdd', '#grid_toppager', {...});
See here and here for more details and for demos.
For basic functionality, setting the toppager: true and cloneToTop: true would suffice as below.
$("#list").jqGrid({
pager: '#pager',toppager: true
});
$("#list").jqGrid('navGrid',"#pager",{
cloneToTop:true
});
I'm sure I'm missing something very simple on this one. After banging my head against the desk (literally) for a couple of days now, I submit myself to the mercy of the stack:
I'm using jQuery UI Autocomplete as a combobox in my jQGrid (I know! I've already looked for the solution elsewhere to no avail!). I would like the dropdown to open when I access the cell for editing through the onSelectRow event in jqGrid. Basically, I want to do exactly what is discussed here:
Open jQuery UI ComboBox on focus
and demo'd here:
http://jsfiddle.net/gEuTV/
The only difference is that I need it in jqGrid. I've tried the code below which I (mistakenly) through would trigger the combobox to appear when the row is focused, but the combobox doesn't appear on focus of the row in the onSelect event. I have a sneaking suspicion that I'm just putting the following code in the wrong spot, but I've tried it everywhere I can think of:
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
Here's my complete code including the grid:
$(function(){
var lastsel;
$("#list2").jqGrid({
url: 'php_includes/uploadgrid.php',
datatype: "json",
mtype: 'GET',
colNames:[
'User Value',
'Translated Value',
'User Validation,
],
colModel:[
{name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
{name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
{name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
],
pager: '#pager2',
rowNum: 1000,
scroll: true,
gridview: true,
viewrecords: false,
height: 'auto',
hidegrid: false,
autowidth: true,
pgbuttons: false,
pginput: false,
forceFit: true,
emptyrecords: "No record was loaded",
onSelectRow: function(id){
if(id && id==lastsel){
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
} else {
if(id && id!==lastsel){
$("#list2").jqGrid('saveRow',lastsel);
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
lastsel=id;
}
}
},
editurl: '/php_includes/jqGridCrud.php',
});
jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})
function selectNone(){
$("#list2").jqGrid('resetSelection');
}
//this function de-selects all previously accessed rows
function autocomp(id) {
var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
$("#"+id+"_usr_validation","#list2")
.autocomplete({
source: function(request, response) {
$.ajax({
url: "/php_includes/Autocomplete.php",
dataType: "json",
data: {
term : request.term,
term2 : term2,
},
success: function(data) {
response(data);
}
});
},
minLength: 0,
select: function(event, ui) {
$("#list2").val(ui.item.id);
},
});
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
});
}
});
You should change 'User Validation, to 'User Validation' and remove trailing commas in different places of your code (like from editurl: '/php_includes/jqGridCrud.php',} and close which are syntax errors in JavaScript, but ignored in many, but not all web browsers).
UPDATED: One more problem is that the focus on the editing field will be set before oneditfunc will be called, so the "focus" event can not be triggered. As a workaround you can trigger "focus" event directly after the .bind("focus", ....
See your modified demo here.
I'm trying to use the DataTables jQuery plug-in in MVC3 using an ajax request as the data source for the table.
I have a View called "Search" which contains a search form...under the form, I have the following html...
<table id="caseTable" class="clear full-width dataTable">
<thead>
<tr>
<th>Case Name</th>
<th>Court</th>
<th>Case Number</th>
<th>Case Filed Date</th>
<th>Chapter</th>
<th>Last Researched</th>
<th>Disposition</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When the search form is submitted, an ajax call is sent off the get the tr elements for each record to be displayed in the table.
$.ajax({
url: "/Home/SearchForCases",
type: "POST",
data: {
CaseNumber: caseNumber,
DebtorLastName: lastName,
Last4SSN: last4SSN,
FullSSN: fullSSN,
StartDate: $("#StartDate").val(),
EndDate: $("#EndDate").val(),
SelectedCourtDistrictId: $("#SelectedCourtDistrictId").val(),
SelectedChapterId: $("#SelectedChapterId").val()
},
success: function (result) {
$("#caseTable > tbody").html(result);
$("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
complete: function () {
$("#ajaxProgress").dialog('close');
$("#searchResults").show();
}
});
Everything loads up fine on the first call, but on subsequent calls, the data returned from the ajax call is being appended vs replaced. I have checked the html being returned from the ajax call and it's always returning one row of data, <tr><td></td></tr> only.
Add the bDestroy option to remove the old datatable formatting first. You could also try removing the bRetrieve option.
success: function (result) {
$("#caseTable > tbody").html(result);
$("#caseTable").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bDestroy": true
});
Edit
If possible, it might be better to change your code so you can use the built in datatable ajax functionality by passing in the sAjaxSource option when creating the datatable. This would require you to change your server side code to return json of data instead of html.
If that isn't possible, then you should use fnClearTable to clear the existing data before adding the new data.
var dataTable;
$.ajax({
...
success: function (result) {
// If it has been created, clear the existing data in the datatable
if(dataTable != null) {
dataTable.fnClearTable();
}
// Add your new data
$("#caseTable > tbody").html(result);
// Create / recreate the datatable
dataTable = $("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
...
});
try initializing your datatable outside of the success callback and then just call the fnDraw() function to redraw the table after you have updated the html of the table.
EDIT
var dataTable = $("#caseTable").dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": //Url to hit to query your database and return table data
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"]
});
$("#caseTable tbody tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
$.ajax({
url: "/Home/SearchForCases",
type: "POST",
data: {
CaseNumber: caseNumber,
DebtorLastName: lastName,
Last4SSN: last4SSN,
FullSSN: fullSSN,
StartDate: $("#StartDate").val(),
EndDate: $("#EndDate").val(),
SelectedCourtDistrictId: $("#SelectedCourtDistrictId").val(),
SelectedChapterId: $("#SelectedChapterId").val()
},
success: function () {
dataTable.fnDraw();
},
complete: function () {
$("#ajaxProgress").dialog('close');
$("#searchResults").show();
}
});
Hey sorry for the poor formatting but just add this condition in your code. This will ensure that of your table already exists and you are just going from one page to another then your data will be replaced and not appended. Hope this helps
if(typeof datataTable !="undefined" && datatable != null)
{
$.ajax({
success: function (result) {
// If it has been created, clear the existing data in the datatable
if(dataTable != null) {
dataTable.fnClearTable();
}
// Add your new data
$("#caseTable > tbody").html(result);
// Create / recreate the datatable
dataTable = $("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
});} else{dataTable.fnClearTable(0);dataTable.fnDraw();}