I understand this question has been asked multiple times on various sites and forums however the context has mostly been jquery. In my case, I am not using jquery at all though I am using CakePHP 1.3 with prototype and scriptoculous. I am trying to make Ajax pagination work using default Js helper however every time I load the page, I get the error below in error console
Error: $(document).ready is not a function
Any idea what's wrong here.
It seems (after some googeling) that the syntax to use in prototype is document.observe('dom:loaded', fn);
http://www.prototypejs.org/api/document/observe
In prototype, I think you can use
document.observe("dom:loaded", function() {
// Do initialization here
});
for performing the initialization tasks.
Related
I am trying to write a unit test where I want to verify that a ajax call has been made.
The code is simple :
it('test spycall',()=>{
spyOn($,"ajax");
//my method call which in turns use ajax
MyFunc();
expect($.ajax.calls.mostRecent().args[0]["url"].toEqual("myurl");
});
The error that I get :
Property 'calls' doesn't exist on type '{settings:jqueryAjaxSettings):jQueryXHR;(url:string, settings?:JQueryAjaxSettings}
$.ajax.calls, among others, is part of the Jasmine testing framework, not JQuery itself (As you know, Jasmine (or rather, Jasmine-Jquery, the plugin you're using) is adding certain debugging functions to JQuery's prototype in order to, well, be able to test ajax calls).
The bad part is that your .d.ts typescript definition file, the file that acts as an interface between typescript and pure JS libraries isn't aware of Jasmine's functions.
There are several ways you could approach fixing this, like
looking if someone has adjusted the JQuery .d.ts file for Jasmine's functions or
creating the new .d.ts file yourself by modifying the original one or, (what I would be doing)
overwriting the typescript definition by declaring $.ajax as any, or not including the typescript definition at all in your testing codebase and declaring $ as any.
There are 2 ways to get rid of the error:
// 1
expect(($.ajax as any).calls.mostRecent().args[0].url).toEqual("myurl");
// 2
let ajaxSpy = spyOn($,"ajax");
expect(ajaxSpy.calls.mostRecent().args[0].url).toEqual("myurl");
You can also use partial matching:
expect(($.ajax as any).calls.mostRecent().args).toEqual([
jasmine.objectContaining({url: "myurl"})
]);
My code:
breeze.config.initializeAdapterInstance("ajax", "angular", true);
...
var ajaxAdapter = breeze.config.getAdapterInstance('ajax');
ajaxAdapter.defaultSettings = {
method: 'POST',
data: {
CompanyName: 'Hilo Hattie',
ContactName: 'Donald',
City: 'Duck',
Country: 'USA',
Phone: '808-234-5678'
}
};
in line 14813 of breeze.debug.js:
ngConfig = core.extend(compositeConfig, ngConfig);
compositeConfig.method has a value of 'POST' until it is overwritten, because ngConfig.method has a value of 'GET'.
I imagine this question is relevant for any ajax setting, but of course I'm mainly struggling with how to post with the angular ajax adapter, so maybe there's an entirely better way to do that? this approach feels dirty anyway, but breeze.ajaxPost.js only works with the jQuery ajax adapter, right?
6 Oct 2014 update
We recently had reason to revisit ajaxpost and have updated both the code and the documentation.
The original recommendation works. We're merely clarifying and updating the happy path.
A few points:
The ajaxpost plug-in works for both jQuery and Angular ajax adapters.
Those adapters long ago became aware of adapter.defaultSettings.headers and have blended them into your Breeze ajaxpost http calls (take heed, PW Kad).
You must call breeze.ajaxPost() explicitly after replacing the default ajax adapter as you do when you use the 'breeze.angular' service.
You can wrap a particular ajax adapter explicitly: breeze.ajaxPost(myAjaxAdapter); We just don't do that ourselves because, in our experience, it is sufficient to omit the params (breeze.ajaxPost()) and let the method find-and-wrap whatever is the active ajax adapter of the moment.
The documentation explains the Angular use case which I repeat here to spare you some time:
// app module definition
var app = angular.module('app', ['breeze.angular']); // add other dependencies
// this data service abstraction definition function injects the 'breeze.angular' service
// which configures breeze for angular use including choosing $http as the ajax adapter
app.factory('datacontext', ['breeze', function (breeze) { // probably inject other stuff too
breeze.ajaxPost(); // wraps the now-current $http adapter
//... your service logic
}]);
Original reply
AHA! Thanks for the plunker (and the clever use of the Todo-Angular sample's reset method!).
In brief, the actual problem is that breeze.ajaxpost.js extends the jQuery ajax adapter, not the angular ajax adapter. There is a timing problem.
The root cause is that you can't tell breeze.ajaxpost.js which adapter to wrap. It always wraps the default adapter at the time that it runs. As you've got your script loading now, the jQuery adapter is the current one when breeze.ajaxpost.js runs.
The workaround is to set the default adapter to the angular adapter before breeze.ajaxpost.js runs.
One way to do that is to load the scripts as follows ... adding an inline script to set the default ajax adapter to the "angular" version.
<script src="breeze.debug.js"></script>
<script>
<!-- Establish that we will use the angular ajax adapter BEFORE breeze.ajaxpost.js wraps it! -->
breeze.config.initializeAdapterInstance("ajax", "angular", true);
</script>
<script src="breeze.ajaxpost.js"></script>
Clearly this is a hack. We'll look into how we can change breeze.ajaxpost.js so you can wrap any ajax adapter at the time of your convenience.
Thanks for finding this issue, and thanks Ward for bringing it to my attention. I've updated the breeze.ajaxpost.js code to use .data as you described, and added a function you can call after adapter initialization. So now you can do:
var ajaxAdapter = breeze.config.initializeAdapterInstance("ajax", "angular");
ajaxAdapter.setHttp($http);
breeze.ajaxpost.configAjaxAdapter(ajaxAdapter); // now we can use POST
So, it's slightly less hacky.
This answer is applicable to the following plugins and version:
Breeze.Angular v.0.8.7
Breeze.AjaxPost v.1.0.6
I just saw a new plugin called Breeze.Angular.js that can work in conjunction with Breeze.AjaxPost.js
You have to modify the Breeze.AjaxPost.js in order for it to work. Breeze.Angular.js initializes your adapter when your page loads, and Breeze.AjaxPost.js will take in the adapter initialized from Breeze.Angular.js
You can learn more about the Breeze.Angular server here: breeze-angular-service
You can learn more about Breeze.Ajaxpost here: breeze-ajaxpost
Now to set this up wasn't exactly apparent, because I took both files exactly as they were in git.
1.) Reference the files in this order:
<script src="Scripts/q.min.js"></script>
<script src="Scripts/breeze.angular.js"></script>
<script src="Scripts/breeze.ajaxpost.js"></script>
2.) Go into your breeze.ajaxpost.js
Remove this line (or comment this line):
breeze.ajaxpost(); // run it immediately on whatever is the current ajax adapter
The reason why is because, this will cause your ajaxpost method to run before your breeze.angular service. When you go into the ajaxpost method, the ajaxAdapter parameter that is supposed to be passed in will be null. Removing this line appends the functionality for later in your code, so you can call it from the breeze.angular service.
3.) In breeze.angular.js go to your useNgHttp method. It should look like this:
// configure breeze to use Angular's $http ajax adapter
var ajaxAdapter = breeze.config.initializeAdapterInstance("ajax", "angular");
ajaxAdapter.setHttp($http);
breeze.ajaxpost(ajaxAdapter); // now we can use POST
When you run your program, both plugins should be able to set up the environment for you without having to include it in every javascript that makes your calls to the webapi.
Thanks guys for the plugins.
I'm more than a little confused about Modernizr and it's relation to Yepnope.js. As I understand it, Modernizr comes with Yepnope.js (assuming you select the Modernizr.load() option). According to the Yepnope documentation, there are optional prefix plugins which can used. For example, you can test for versions of IE (assuming you also load the yepnope.ie-prefix.js script). However, when I attempt to run the following, I get 'undefined' alert:
Modernizr.load({
load: 'ie!my-ie-specific.js',
complete : function (url, result, key){
alert(url, result, key);
}
});
What am I doing wrong? Does Modernizr include Yepnope completely or only bits and pieces?
I got stuck on this too. Struggled for an hour.
The complete callback doesn't support tests. Change it to callback which fires when the external script is loaded.
complete runs when all scripts are loaded, OR if nothing is loaded.
I wish complete took the result variable though. I could use that.
I'm attempting to use Breeze to query a ASP.Net Web API endpoint and the query fails - with the data object containing:
internalError: TypeError
arguments: Array[2]
0: "createCtor"
1: null
length: 2
__proto__: Array[0]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "non_object_property_load"
The data object has a message (and responsetext) property which contains the full json response from the query which looks ok and the metadata thats been generated matches the response - it also records status 200 for the response
So I'm guessing there is some kind of issue mapping the response to an object on the client side?
I'm using the NuGet package for Breeze version 0.85.2
I can get the sample ToDo project to run fine on the same environment
My project does use domain objects, contexts etc all from different assemblies and namespaces but I understood thats supported in this version?
Also that one of the properties is an enum - in the metadata this is defined as {\"name\":\"State\",\"type\":\"Edm.Self.State\",\"nullable\":\"false\"}] but in the response is comes through as an integer
Looking for tips on how to debug this further on the client side
Update
comparing the working sample with my code, the error looks to be coming from this function:
/**
Returns the constructor for this EntityType.
#method getEntityCtor
#return {Function} The constructor for this EntityType.
**/
ctor.prototype.getEntityCtor = function () {
if (this._ctor) return this._ctor;
var typeRegistry = this.metadataStore._typeRegistry;
var aCtor = typeRegistry[this.name] || typeRegistry[this.shortName];
if (!aCtor) {
var createCtor = v_modelLibraryDef.defaultInstance.createCtor;
if (createCtor) {
aCtor = createCtor(this);
} else {
aCtor = function() {
};
}
}
this._setCtor(aCtor);
return aCtor;
};
The defaultInstance property on v_modelLibraryDef is undefined in my running code - what am I missing on the configuration of breeze for that to happen?
Update 2 - Resolved but why
Ok so I got this working - I was missing a reference to knockout (which I was planning to use but hadn't got that far) - I was a little bit misled by the breeze prerequisites which don't mention knockout so if anyone can explain how I could have got this working without knockout and if its a bug then the points are yours
Got same error, and referencing knockout.js helped(I'm using angularjs for my app)
manager.executeQuery(query).then(function(data) {
console.log(data);
});
But.
It seems, that data-mapper works with knockout by default, so we have XHR results as K.O. model with observables.
so I added breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
and now I don't receive data.results as observable collection.
Hope my answer will help.
Sorry you struggled Richard. We'll try to learn from it and spare the next person the pain you endured.
FWIW, we do not say that Knockout is a prerequisite ... because KO is not a prerequisite. You can use Angular or Backbone instead and we anticipate other alternatives in future.
We don't want to drown you in configuration options when you're just learning Breeze. So we picked KO as the default model library (just as jQuery is the default AJAX provider and Web API is the default "dataservice" technology). We say so in numerous places; prerequisites looks like another good place to mention it.
As it happens, you intended to go with KO anyway so no configuration would have been necessary. Most folks start with something like the MVC template which includes KO and loads it for you in the Index.cshtml.
Apparently you started from a clean slate ("ASP Empty Web Application" perhaps?). The Breeze Web API NuGet package strives to be spare and therefore does not include KO. We figured (incorrectly) that you would add it yourself ... in the right script order ... if you wanted to use KO. Clearly we could do a better job of documenting this particular development path ... especially as we like it so much ourselves. Thanks for pointing it out.
The other problem is that the exception was not helpful. You can see from other attempts to answer your question that even folks with Breeze experience couldn't recognize what was wrong. We'll look to see if we can detect the missing script a little earlier and throw an exception with a better message.
This error looks like it has to do with one of your Entity type constructors. I'm guessing that you are calling the 'registerEntityTypeCtor' method somewhere in your code. If so, then I would put a breakpoint in the constructor that you are registering there.
Per your other comment, .NET enums are supposed to get converted into integers on the breeze client. This is the only 'primitive' datatype that could support them. They will get converted back to enums on the server when you call 'EntityManager.saveChanges'
Breeze does not require 'knockout', you can use either 'angularjs' or 'backbone' as well. We simply default the breeze client to knockout if you do not specify another library. See the 'breeze.config.initializeAdapterInstance' topic here. We do need to a better job of documenting this.
Every time I get an error at which the Message property of the response is the data in json format means I have a bug in the function that runs after getting the data.
Example:
dataservice.getPalanca(routeData.PalancaID)
.then(function (data) {
self.palanca(data.results[0]);
})
.fail(function (error) {
console.log(error); /*if I get here and error.Message == correct json almost always means error in .then function*/
toastr.error("Ha ocurrido un error al obtener los datos");
});
I hope I help you.
I'm trying to use iChemLabs cloud services from a html5 web worker. Normally the cloudservices requires jQuery but I can't import that into a web worker so I'm using Pollen instead with a ChemDoodle Web Components library with which I have stripped out the document-related things.
jQuery.Hive.Pollen provides a nice ajax function very similar to jQuery, but I can't seem to get it to work at all. I know this problem will be tricky to solve considering that Access-control-headers need to be set to allow any of you to actually find the solution. However, I'm a beginning javascript programmer and I was wondering if my two weeks of frustration is actually a small difference. I am trying to invoke the following function:
var cloudmolecule;
ChemDoodle.iChemLabs.readSMILES('N1(C)C(=O)N(C)C(C(=C1N1)N(C=1)C)=O', function(mol){
cloudmolecule = mol;
});
Here is a link to the library code I am using, see the 'q.ajax' call and substitute jQuery = q for p = q (p is for pollen) in that block of code.
Right now I'm just trying to get the ajax call to work in an ordinary block of javascript with the plan to migrate to a web worker later.
If anybody could point out the problem to me I would be extremely grateful.
solved! turns out iChemLabs rejects these two extra headers that pollen creates:
_xhr.setRequestHeader("X-Requested-With", "Worker-XMLHttpRequest");
_xhr.setRequestHeader("X-Worker-Hive", "Pollen-JS" );
Simply comment them out
Also, Pollen ajax seems to return a JSON object containing the data in JSON format AND as a string, so do
o = JSON.parse(data.string)//data is the parameter to the callback function
The reduced ChemDoodle library (without document-related methods) will work like a charm with pollen ajax.