I'm trying to implement a web app, with a Basic and an Advanced Search, and I'm using datatable 1.10 and jquery 2.2 to display the results of the searches. I'm having issues with the destroy method and I hope that some of you it is going to be able to help me find a solution, thanks in advance to all for your help
Let me explain a little bit my project, code logic, objective and issue:
I have one single table with 5 columns as you can see on my jsfiddle. I also have a global variable "table" to handle the datatable (DT) once it is created. I declared a function "loadSearchData" to load the parameters for the Ajax call on another global variable. On the click event of my two Search buttons I check if the DT already exists then I destroy it, and then I call the function "initializeDataTable". My idea was to destroy the existing DT and create a new one each time the Search buttons are clicked. However it is not working, and the behavior is "weird":
First time I enter the search criteria and click search, works perfectly fine If I modifiy the search criteria and click search again, then I get a Webpage error
"Line: 1 Error: Unable to get property 'style' of undefined or null reference"
Then, if don't debug and click the search button again, then it works perfectly fine again!
The code:
//BASIC SEARCH
$('#btnBasicSearch').on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('basicSearch');
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
//ADVANCED SEARCH
$("#btnSearch").on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('advancedSearch');
jQuery.ajaxSettings.traditional = true;
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
I'm sure there is a better way to do this, this is my first time using datatables and probably I'm missing something, anyone have any idea?
You can see the complete jsfiddle here
https://jsfiddle.net/dalps/gxgLdo03/
I also asked on the datatable forum:
http://datatables.net/forums/discussion/33563/datatable-destroy-function-not-working-as-expected#latest
thanks in advance
dalps
Well, I got my answer on the datatable forum: my html table have 5 columns and on the "columndefs" property I have the following:
"targets": 5,
"data": "active",
"visible": false
since the column indexing begin with zero, I was referencing a column that doesn't exist, solution, add a new column to the table
Related
unfortunately I can't find any help concerning to my specific problem.
I try to simplify it:
My grid consists of a shown column (A) and a hidden column (B) and other shown columns as well (C,D). With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa.
My aim is as follows:
If the width of (shown) A has been changed, the width of (hidden) B should also be changed.
My current way to realize this this:
resizeStop: function () {
var $self = $(this);
shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");
$self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
var a = $self.jqGrid("getGridParam","colModel");
$self.jqGrid("setColWidth", "customers.name_short",a[2].width);
},
I works, but I have to wait for a wile and in addition to that I get the following log: "too much recursion". It seems that the function setColWidth is called more than 300 times.
I analyzed the code of setColWidth but I could not find any hint where it would call itself.
Can anybody help me?
Thanks in advance!
I suppose that you use my method setColWidth from here and the answer. It's wrong to use it inside of resizeStop callback.
You wrote: "With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa." It seems to me that you need place one call of setColWidth method directly after you makes the column A or the column B visible (in the click event handle of your custom button). It should solve the problem.
UPDATED: The following demo http://jsfiddle.net/OlegKi/m7f9ghwq/18/ demonstrates the approach.
I am using the following directive to create a ckEditor view. There are other lines to the directive to save the data but these are not included as saving always works for me.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = ck = CKEDITOR.replace(elm[0]);
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
setTimeout(function () {
ck.setData(ngModel.$modelValue);
}, 1000);
}; }
};
}])
The window appears but almost always the first time around it is empty. Then after clicking the [SOURCE] button to show the source and clicking it again the window is populated with data.
I'm very sure that the ck.setData works as I tried a ck.getData and then logged the output to the console. However it seems like ck.setData does not make the data visible at the start.
Is there some way to force the view window contents to appear?
You can call render on the model at any time and it will simply do whatever you've told it to do. In your case, calling ngModel.$render() will grab the $modelValue and pass it to ck.setData(). Angular will automatically call $render whenever it needs to during its digest cycle (i.e. whenever it notices that the model has been updated). However, I have noticed that there are times when Angular doesn't update properly, especially in instances where the $modelValue is set prior to the directive being compiled.
So, you can simply call ngModel.$render() when your modal object is set. The only problem with that is you have to have access to the ngModel object to do that, which you don't have in your controller. My suggestion would be to do the following:
In your controller:
$scope.editRow = function (row, entityType) {
$scope.modal.data = row;
$scope.modal.visible = true;
...
...
// trigger event after $scope.modal is set
$scope.$emit('modalObjectSet', $scope.modal); //passing $scope.modal is optional
}
In your directive:
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
scope.$on('modalObjectSet', function(e, modalData){
// force a call to render
ngModel.$render();
});
Its not a particularly clean solution, but it should allow you to call $render whenever you need to. I hope that helps.
UPDATE: (after your update)
I wasn't aware that your controllers were nested. This can get really icky in Angular, but I'll try to provide a few possible solutions (given that I'm not able to see all your code and project layout). Scope events (as noted here) are specific to the nesting of the scope and only emit events to child scopes. Because of that, I would suggest trying one of the three following solutions (listed in order of my personal preference):
1) Reorganize your code to have a cleaner layout (less nesting of controllers) so that your scopes are direct decendants (rather than sibling controllers).
2) I'm going to assume that 1) wasn't possible. Next I would try to use the $scope.$broadcast() function. The specs for that are listed here as well. The difference between $emit and $broadcast is that $emit only sends event to child $scopes, while $broadcast will send events to both parent and child scopes.
3) Forget using $scope events in angular and just use generic javascript events (using a framework such as jQuery or even just roll your own as in the example here)
There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.
This is a strange issue with ckeditor when your ckeditor is hidden by default. Trying to show the editor has a 30% chance of the editor being uneditable and the editor data is cleared. If you are trying to hide/show your editor, use a css trick like position:absolute;left-9999px; to hide the editor and just return it back by css. This way, the ckeditor is not being removed in the DOM but is just positioned elsewhere.
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
Second way In controller ,when your query is fetch data from database then use th
is code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I know, that this thread is dead for a year, but I got the same problem and I found another (still ugly) solution to this problem:
instance.setData(html, function(){
instance.setData(html);
});
Actually this is probably pretty simple, but somehow I am unable to make it work.
I have a grid that loads data from a url. Everything works fine, except one small detail -- I have put a column picker on the table but if they have already shown the search form once, then when they change the visible columns the search form does not reflect the changes no matter how many times they close and open it.
The documentation seems to suggest that recreateForm was the solution, but it does not seem to work.
"when set to true the form is recreated every time the search dialog is activated with the new options from colModel (if they are changed)"
I launch the advanced search from a button outside the grid, if that matters.
function openSearch(grid)
{
var searchParams = {
multipleSearch:true,
overlay:false,
closeOnEscape:true,
Find:"Search",
closeAfterSearch:true,
caption:"Advanced Search",
searchOnEnter:true,
recreateForm:true
};
grid.jqGrid('searchGrid', searchParams);
}
in my CGridView I have this simple function:
'afterAjaxUpdate' =>
'function(id, data) {
var checks2 = $("#checks").val().split(",").sort();
$("#rule-competitors-grid input:checkbox").each(function() {
console.log($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2));
if ($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2) !== -1)
$(this).attr("checked", "checked");
});
}',
On a list that shows 2 items at a time (for debugging).
See the console.log()s over there? They happen 13 times each call.
How can I fix this?
Problem:
Your CSS selector is valid for 13 checkboxes which you then iterate in your "each" statement. You'll need a new approach if you are looking to update one specific row at a time.
Yii's documentation (http://www.yiiframework.com/doc/api/1.1/CGridView#afterAjaxUpdate-detail) says it all:
A javascript function that will be invoked after a successful AJAX response is received. The function signature is function(id, data) where 'id' refers to the ID of the grid view, 'data' the received ajax response data.
Suggestion:
Change your selector to find the exact checkbox you need to update based on a classname and ID value. Work from the grid's 'id' variable down to the specific row you want to make changes to.
The solution was dumb and unrelated, but I'm sure someone in this world might encounter the same.
My problem was that the JavaScript was loaded through AJAX in the loaded page in a dialog/tab and not in the main page. What happens is that the "click" trigger was re-assigned, and added to the elements every time I reloaded the tab/dialog. After reloading it 13 times to check on small changes (since it's an AJAX dialog I was able to avoid having to update the whole page), it was loaded inside.
To avoid this, either unbind the events as soon as the dialog/tab is reloaded, or use .on() to lively load it on the main page and not the tab/dialog so the code isn't re-added to the event every time you load it.
I am creating a directive that is using this timezone picker jQuery plugin, so that we have a timezone picker "widget" throughout our app. The problem I'm running into is that when you select a timezone, it just changes the value of the select elements. So, the element has the right value, but my model does not. I was thinking I just had to throw a scope.$apply() in there, but after a while, I realized that is for updating the view from a model that changed outside of angular. My problem is the opposite. How to I update my model from my view that has changed outside of angular? Here's a simple fiddle that illustrates the problem: http://jsfiddle.net/tWzwA/
I'm thinking the ngModelController could help me here, but I don't know how I would get access to it, and what exactly I would do with it. Can someone please point me in the right direction? Thanks.
You should define the update function on your controller:
$scope.updateDropDownDirectly = function(value){
$scope.myModel = value;
};
Then change the events from onclick to ng-click and let angular manage them:
<button ng-click="updateDropDownDirectly(1)">1</button>
See this jsFiddle