Bit of a Kendo/Angular noob here so I apologize if this is a simple issue or if I've managed to completely muck up my attempt here.
All I'm trying to do at this point is get the Kendo-AutoComplete control to kick off a request to the server but thus far my attempts have been unsuccessful. Here's my HTML:
<input type="text" kendo-auto-complete ng-model="Company" k-options="companyAutoComplete" class="form-control" id="txtCompany" />
And here's the applicable javascript in my controller:
$scope.companyAutoComplete = {
dataTextField: "CompanyName",
dataSource: new kendo.data.DataSource({
transport: {
read: function (options) {
console.log("Read attempted.");
}
}
})
};
But the read method never fires when I change the text in the textbox. :(
I've been going through examples as I can find them but nothing seems to indicate what the issue is. Kendo is working, Angular is working, this is not working.
Your code is correct and works (tested it here). You need to type 3 symbols in the box for the request to kick in.
Related
I'm trying to get a basic custom property editor sorted out for an Umbraco 7.0.1 solution but it looks like I've missed something somewhere because Angular can't recognise the controller function being called. I need another pair of eyes over this.
I've pretty much copied and pasted the example provided on Umbraco's site to start with and was intending to flesh it out afterwards. Here's what I have so far:
package.manifest
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "AcuIT.Multidate",
/*the name*/
name: "Multidate Picker",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/Multidate/multidate.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/Multidate/multidate.controller.js'
]
}
multidate.html
<div ng-controller="AcuIT.MultidateController">
<textarea ng-model="model.value"></textarea>
</div>
multidate.controller.js
angular.module("umbraco")
.controller("AcuIT.MultidateController",
function () {
alert("The controller has landed");
});
Finally, here is the error I'm seeing in the browser console:
Error: Argument 'AcuIT.MultidateController' is not a function, got
undefined
at Error ()
It's probably a name or a path I've missed somewhere but I can't spot it yet. Any pointers appreciated.
Restart app pool and refresh browser to include the files from the manifest
Simple (seeming) question - I'm trying to do a simple sanity check in my AngularJS controller to make sure that my $resource is actually instantiated as such. It's a largish app, but for example:
.factory('AccountSearchService_XHR', ["$resource", function($resource) {
var baseUrl = "http://localhost\\:8081/api/:version/accounts/:accountNumber";
return $resource(baseUrl,
{
version: "#version",
accountNumber: "#accountNumber"
},
{
get: {method: 'GET', isArray: false}
});
}]);
Then later, in controller:
$scope.accountObj.currentAccount = AccountSearchService_XHR.get({
version: "v1",
accountNumber: "1234"
},
function(result) {... etc etc});
The call to my API works fine, everything returns data like I expect - but I'd like to test to see if $scope.accountObj.currentAccount is a Resource before trying to make the .get call (notice the super important capital "R").
When I inspect the object $scope.accountObj.currentAccount in chrome debugger, it looks like:
Resource {accountHolderName: Object, socialSecurityNumer: null, birthDate: "05/14/1965", maritalStatus: ...}
Because of some complexity in my setup though, occasionally it gets overwritten as a normal object (typeof returns "object"), but inspecting it in debugger confirms it lost its Resource status.
So - does anyone know of a way to test whether it is a $resource? Almost like typeof $scope.accountObj.currentAccount returns "Resource"? Or perhaps a better best practices way to ensure that things are connecting up all proper and respectable-like?
All the SO articles I have seen when searching revolve around actual Jasmine testing.
Thanks in advance.
#tengen you need to have injected the type you want to check against, instead of $resource.
All resources are instances of the "class" "Resource", but that's a function that's defined inside of the factory method of the $resource service, so you have no outside visibility to use it with the instanceof operator.
However, you're wrapping that $resource creating with your own custom type, AccountSearchService_XHR, and that's what you need to make the check against.
You need AccountSearchService_XHR to be injected in your code and then perform myRef instanceof AccountSearchService_XHR and that will be === true.
Digging up an old question my intern just had. The simple solution is:
if ($scope.accountObj.currentAccount instanceof AccountSearchService_XHR)
return 'This is a AccountSearchService_XHR Resource';
else
return 'This is not a AccountSearchService_XHR Resource';
which with proper names (Users being a $resource) and real case scenario should lead you to write something like this:
if (!(this.user instanceof Users))
this.user = new Users(this.user);
this.user.$update();
Check it via instanceof yourVariable === "Resource". Because Resource is an object the type will always return as an Object, but if you check that it's an instance of the Resource "class" that should work just fine.
I'm trying to get the backbone.js DELETE request to fire, but don't see any requests being made in my console.
I have collection model like so:
var Model = Backbone.Model.extend(
{
urlRoot: '/test',
defaults:{}
});
var TableList = Backbone.Collection.extend(
{
url: '/test',
model: Model
});
In my view I'm running this:
this.model.destroy();
Everything seems to be running fine, I can see output coming from the remove function that calls the destroy so I know it's getting there plus it also successfully runs an unrender method that I have. Can't see any requests being made to the sever though?
If I am not mistaken, you have to have an id property on your model to ensure that it hits the correct url. IE if your model was...
var Model = Backbone.Model.extend({
url: '/some/url'
});
var model = new Model({
id: 1
});
model.destroy(); // I THINK it will now try and DELETE to /some/url/1
Without an id it doesn't know how to build the url correctly, typically you'd fetch the model, or create a new one and save it, then you'd have a Url...
See if that helps!
I found the issue to my problem, thought not a solution yet. I'm not sure this is a bug with backbone or not, but I'm using ajaxSetup and ajaxPrefilter. I tried commenting it out and it worked. I narrowed it down to the ajaxSetup method and the specifically the use of the data parameter to preset some values.
Have you tried using success and error callbacks?
this.model.destroy({
success : _.bind(function(model, response) {
...some code
}, this),
error : _.bind(function(model, response) {
...some code
}, this);
});
Might be instructive if you're not seeing a DELETE request.
I created Extjs.Panel and now I would like to dynamically load a content to it. So I wrote this simple code
Ext.get('contentPanel').load({
url: '#Url.Action("TempView","Home")'
});
After executing this function, panel is populated with TempView, however couple of seconds later I get an error in Extjs library
Microsoft JScript runtime error:Unable to get value of the property
'events': object is null or undefined.
EDIT
I flollowed #DmitryB advice and I used debug version of library. Here is what I found out. It turned out that the problem is in function
getElementEventCache
which is defined in file ext-all-debug.js in line 11108. The function looks this way
getElementEventCache : function(element) {
if (!element) {
return {};
}
var elementCache = Ext.cache[this.getId(element)];
return elementCache.events || (elementCache.events = {});
},
The exception is thrown in the last line, because of the fact that elementCache is null.
Here is the stacktrace from visualstudio
I had a very similar error that was resolved by adding the following line. (from this forum thread)
if(Ext.isIE) {
Ext.enableGarbageCollector=false;
}
I'm using bellow code and work cool. This may help you.
Try this
var content_div = Ext.get(div_id);
content_div.load({
url:your_url,params:{id:'abc'},scripts:true,text: 'Loading...'});
content_div.show();
How should I go about this?
I was able to get the data into CKEditor by using a textarea with the name attribute matching my model and a script tag with ng:bind-template to call CKEDITOR.replace.
I then made a CKEditor plugin that detects changes and writes them back to the textarea. The problem is that the textarea looses its event handlers when CKEditor initializes and CKEditor doesn't pickup changes to the textarea. This makes me think that I am approaching this the wrong way.
Next I tried using ng:eval-order="LAST" ng:eval="setupCKEditor()" and setting up the editor from the setupCKEditor() function. This didn't work because even with ng:eval-order="LAST" the function is still run before the nodes are created.
I have found that adding a setTimeout(function () {...},0) around the CKEDITOR.replace helps. Now the only problem is that when it changes the model it doesn't repaint the screen until another field is edited.
scope.$root.$eval(); seems to fix that.
Update
We ended up abandoning this since we could never get it to reliably work. We switched to TinyMCE with Angular-UI for a while and then ended up building something custom.
This sort of works with the onchange plugin from http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html.
angular.directive("my:ckeditor", function (expression, compiledElement) {
return function fn(element) {
var scope = this;
setTimeout(function () {
CKEDITOR.replace("editor-" + index, {extraPlugins: 'onchange'});
scope.$watch("layers[" + index + "].src", function () {
if (!CKEDITOR.instances["editor-" + index]) return;
if (scope[expression] == CKEDITOR.instances["editor-" + index].getData()) return;
CKEDITOR.instances["editor-" + index].setData(scope[expression]);
});
CKEDITOR.instances["editor-" + index].on("change", function () {
scope[expression] = CKEDITOR.instances["editor-" + index].getData();
scope.$root.$eval();
});
}, 0);
};
});
Update
This has only been tested on v0.10.6
For completeness, attached is a module to provide an angular directive. I've not used it yet, so I can not comment on how well it works/integrates.