Jaydata and Odata- HTTP Request Failed - odata

I have my own custom server to expose data from an XML file. I can browse through it in whichever browser of my choosing and I can query the data in Fiddler, but Jaydata (or one of its building blocks) can't seem to grab the same data. What's most frustrating is that my code is (or was, I've tweaked it slightly to try and resolve these errors) pretty much an exact duplicate of code found here and here. Here's my script:
<script type="text/javascript" src="/Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/Scripts/datajs-1.0.3.js"></script>
<script type="text/javascript" src="/Scripts/jaydata.js"></script>
<script type="text/javascript" src="/Scripts/jaydataproviders/oDataProvider.js"></script>
<script type="text/javascript" src="/Scripts/Block.js"></script>
<script type="text/javascript">
var Context = new foo({
name: 'oData',
oDataServiceHost: 'http://localhost:xxx'
});
function createItemLI(user, id, css) {
var li = "<li></li>".append(name).addClass(css).data('id', id);
return li;
}
$.when($.ready, Context.onReady()).then(function () {
Context.Roots.toArray(function (roots) {
roots.forEach(function (root) {
$('#roots').append(
createItemLI(root.User, root.ID, 'root'));
});
});
});
</script>
Block.js, is the file generated by JaySvcUtil.exe
There's only one thing in the body of the .htm file, a simple <ul id="roots"></ul>
When I try to run the project, there's nothing on the page. When I used FireBug, I get "HTTP request failed" The requestUri is http://localhost:xxx/Roots, which works when I manually browse to it, but the StatusCode is 0, statusText is the empty string, and so on and so forth. I've looked at Fiddler, at it gets exactly what I expected.
I'm assuming there's some manner of flag that needs to be set, but none of the tutorials I've found have been of any help. It's assumed that it works out of the box, and I too had high expectations getting simple read access would be easy.
UPDATE:
it turns out Internet Explorer has been receiving the appropriate data as JSON, though it still doesn't populate the roots as it should. In FireFox it returns a "501 not implemented" error, because my GET request is being altered to be OPTION. I don't have a web.config file as would a project I started as a WCF service. This is just a console app in Visual Studio 2010. So I guess my question becomes "how do I better specify cross-domain behavior through JayData?"

Try This:
var oProviderConfig = {
name: 'oData',
oDataServiceHost: 'http://localhost:xxx/Roots/'
,enableJSONP: false
};
Also you have to enable CORS support from your webservice. If you are using .NET
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Max-Age" value="3600" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, MaxDataServiceVersion" />
<add name="Access-Control-Allow-Methods" value="PUT, POST, GET, DELETE, MERGE, OPTIONS" />
</customHeaders>
</httpProtocol>

Related

Why is my riot.js tag not rendering

I have the following content:
~/scripts/riot_templates/bob.tag:
<bob>
<h3>{title}</h3>
<p>{body}</p>
</bob>
~/scripts/riot_templates/bob.js
riot.tag2('bob', '<h3>{title}</h3> <p>{body}</p>', '', '', function(opts) {
});
~/some_file.cshtml::includes (yes it's ASP.NET MVC, that should be ok surely?):
<script lang="text/javascript" src="~/lib/riot/riot.min.js"></script>
<script src="~/scripts/riot_templates/bob.js"></script>
<script>riot.mount('bob', { title: "hi", body: "body" })</script>
some_file.cshtml::content
<p>somenormal html</p>
<bob></bob>
and i just cannot get my "bob" tag to render how i want. i'm stuck. and i know it's dumb. i just know it.
When passing data to your tag, you access them via the "opts" object. In your tag, you should therefore access the variables via :
<h3>{opts.title}</h3>
<p>{opts.body}</p>
To go on from ojorma answer, in the case of a web site running on IIS add the tag extension to the mime types for global use alternatively to configure this on an app by app basis (or whilst debugging in IIS Express) add the following to the web.config file
<system.webServer>
<staticContent>
<remove fileExtension=".tag" />
<mimeMap fileExtension=".tag" mimeType="text/plain" />
</staticContent>
the .tag extension has to be added to the mimetypes in asp.net for it to work

Changing dependency of WebSharper.JQueryUI to load jquery-ui.js locally

I'm writing on a WebSharper sitelet that uses the JQueryUI extension. The HTML generated by the WebSharper sitelet looks like this:
<html>
<head>
...
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js" ...></script>
I'm frequently without internet while developing, so I'd really like to serve jquery-ui.js off the development server instead. That is, I'd much rather have this:
<html>
<head>
...
<script src="/Scripts/jquery-ui.js" ...></script>
The docs say this should be possible by setting an appropriate appSetting in Web.config, but no value I set for the keys listed in the docs seem to have any effect on the output.
I'm using (NuGet versions) WebSharper 3.0.54.140 and WebSharper.JQueryUI 3.0.45.241.
How do I force WebSharper to output a link to a resource local to the server?
Indeed there is an error in the documentation. The key to use is the fully qualified name of the resource type, so for WebSharper.JQueryUI it should be:
<appSettings>
<add key="WebSharper.JQueryUI.Dependencies+JQueryUIJs" value="/Scripts/jquery-ui.js" />
<add key="WebSharper.JQueryUI.Dependencies+JQueryUICss" value="/Content/jquery-ui.css" />
</appSettings>
Edit: just fixed the documentation.

OPTIONS and then POST executing action twice

When I make a $http.post from my client to the web api on a different project, firebug and chrome both show an OPTIONS method and then a POST method.
The problem
Both request actually execute my API action. If I restrict to POST, the OPTIONS fails and the post never happens. I have CORS turned on in both angular and webapi.
my app.js has these lines:
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
my api call:
$scope.add = function () {
var role = { Name: 'admin' };
$http.post('http://localhost:7514/Roles/add', role).
success(function () {
alert('RolesController.add');
}).
error(function (message) {
alert('FAILED EXECUTE RolesController.add');
});
};
the webapi web.config
<system.webServer>
...
<!-- added for cors handling, remove when using a dedicated cors handler or the system.web.cors dll-->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you use the nightly CORS package, the OPTIONS request gets intercepted by a message handler which doesn't execute the action, but still sends the appropriate response header. For more information and how to use nightly packages, you should look at this blog post regarding getting the CORS nightly package.
http://blogs.msdn.com/b/yaohuang1/archive/2013/04/05/try-out-asp.net-web-api-cors-support-using-the-nightly-builds.aspx
Make sure to select "Prerelease" from the the drop down.

Spring mvc jquery ui "accordion is not a function"

I have and accordion working on a normal html page, but when I try and add it to a Spring MVC page then I get the error: $(...).accordion is not a function.
Here is the header of my WEB-INF\views\index.jspfile:
<!DOCTYPE html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Jeeni Software Ltd</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<c:url value="css/style.css"/>" type="text/css">
<link rel="stylesheet" href="<c:url value="css/menu/menu_style.css"/>" type="text/css"/>
<script type="text/javascript" src="<c:url value="js/jquery-1.8.3.js"/>"></script>
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
<script type="text/javascript" src="<c:url value="js/jquery.flip.js"/>"></script>
...
<!-- This is the 'accordion' div -->
<div id="accordion" style="height:800px;">
<h3>Title...</h3>
...
Here is the ready function:
$(document).ready(function() {
var object = $("#accordion");
alert("object: " + object.accordion);
$("#accordion").accordion({ collapsible: true, active: 'false', autoHeight: false });
$("#banner").fadeIn(1000);
alert("Done");
});
with this alert("object: " + object.accordion); show object: undefined and it bombs out on the next line.
Here is my servlet-context.xml file
<mvc:resources mapping="/cv/**" location="/cv/" />
<mvc:resources mapping="/wow/**" location="/wow/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/imgs/**" location="/imgs/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/inc/**" location="/inc/" />
<mvc:resources mapping="/article-imgs/**" location="/article-imgs/" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
</bean>
Firebug shows no problem loading any of the jquery files. I can re-create the proper behavior outside of Spring mvc, so the problem must be something to do with Spring/Java?!? But I can not find out what. The only error Firebug reports is the $(...).accordion is not a function, but everything is setup just like on the jquery ui accordion example.
BTW, I've trawled the internet for the last 3 hours and found similar problems that were fixed by typos. This isn't a typo error. I can not find anything like this regarding jquery UI and Spring MVC.
Solved!
The problem was that I was importing some content via:
<jsp:include page="../includes/index_page_intro_txt.jsp" />
and this JSP file was re-importing jquery. Took this out and everything was fine.
Special thanks to #NimChimpsky for being a sounding board and keeping me going.
There's no way anyone could have solved this with the information above. So just let you all know how I solved it:
I started by removing everything from the file other than the library imports, the ready statement and the accordion div block. Then it worked. So I slowly added everything back until it stopped working and then investigated that cause.
Should have done that in the first place - duh!
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
is not correct in some way.
Can you get any jquery functions to work ?
Is it just the jquery-ui functions that are not working?
Did you customize the jquery-ui download and not include accordion ?
Do you get 404 in the browser debugger ?
Are you opening a popup which overwrites the jQuery object with something else ?
Also probably better to use a cdn hosted version of the jQuery lib files. The below gets the latest version and works with accordion.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>

ASP.NET MVC 3 RC 2 client side validation with globalization

My goal is to validate a user input on the client-side, depending on the users' culture.
I have a primitive data-model with the following structure:
public class User
{
public int UserId { get; set; }
[Required]
[StringLength(20,MinimumLength=3)]
public string Name { get; set; }
[Required]
public double Height { get; set; }
}
Furthermore, I want to have client-side validation enabled, checking if it is a valid number. Therefore, I've added the following lines in the <head> section of my _Layout.cshtml.
<script src="#Url.Content("~/Scripts/jQuery-1.4.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Since I want to have the ability to validate the input in another language formats (in this particular context it's German with the decimal number format of 0,75 whereas in the US it would be 0.75), I've added the following lines (jQuery Globalization PlugIn) AFTER the previously mentioned jquery.validate.min.js and jquery.validate.unobtrusive.min.js.
<script src="#Url.Content("~/Scripts/jquery.glob.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globinfo/jquery.glob.de-de.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.culture = jQuery.cultures['de-DE'];
$.preferCulture($.culture.name);
});
</script>
In addition, I've added the following line to the web.config in the system.web section just to make sure that the German culture is always selected:
<globalization culture="de-DE" uiCulture="de-DE" />
Now I am experiencing the following behavior:
If I type in 0,1 (note the German 'spelling') in the textbox for the value of "Height", the validation error message The field Height must be a number appears and I'm not able to submit the form.
If I type in 0.1 (English 'spelling'), I can submit the form but the server-side validation returns the following validation error message The value '0.1' is not valid for Height.
So now I am in some kind of dead lock where I can't get out.
Again, my goal is to validate the decimal number input on the client AND server side, based on the users' culture (in this case it's forced to be German). What am I doing wrong?
Any help is highly appreciated! Thank you in advance!
Unfortunately there's a naming conflict between jQuery.validate.format and jQuery.Globalization.format functions. Therefore you'll have to change your code to use the non-jquery Globalization plugin.
I just wrote a blog post about it here.
For you it should look like this:
<script src="#Url.Content("~/Scripts/globalization.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globinfo/Globalization.de-DE.js")" type="text/javascript"></script>
<script type="text/javascript">
$.validator.methods.number = function (value, element) {
if (!isNaN(Globalization.parseFloat(value))) {
return true;
}
return false;
}
$(document).ready(function () {
$.culture = jQuery.cultures['de-DE'];
$.preferCulture($.culture.name);
Globalization.preferCulture($.culture.name);
});
</script>
That should be enough.
I had to disable the UnobtrusiveJavaScript. The page does not react instantly anymore, but at least it works.
You can disable by default in the Web.Config.
<appSettings>
<add key="enableSimpleMembership" value="false"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="false"/>
</appSettings>
And I use the Microsoft scripts for validation:
MicrosoftAjax.js
MicrosoftMvcAjax.js
MicrosoftMvcValidation.js
And also the jquery-1.4.4.min.js & jquery.glob thing, but I think I use them internally. The validation is being done by the MS scripts.

Resources