I have been trying to use grails with the jquery-ui plug-in, I have created a simple controller along with a gsp page that uses a datepicker, I have not been able to get the date picker to show a list of dates. I have read the plug in documentation + articles on forums etc. but have not found a resolution.
Plug in documentation - http://grails.org/plugin/jquery-ui
Dev environment = grails 2.2.0, JDK 7, GGTS latest version
Any pointers to getting this working would be great.
(I have tried copying/renaming files in web app/other folders but have not been successful)
Steps
1. Created a new grails project
installed the jQuery-ui plug in
Created a controller and gsp page - per the documentation
When I navigate to the page it gives me the following error
ERROR resource.ResourceMeta - Resource not found: /plugins/jquery-ui-1.8.24/jquery-ui/themes/darkness/jquery-ui-1.8.24.custom.css
| Error ERROR [/Test2].[default] - Servlet.service() for servlet [default] in context with path [/Test2] threw exception
Message: It looks like you are missing some calls to the r:layoutR
The correct solution on 23-jan-13 that worked in my environment as described in the original post is shown below, I found the code posted on the grails website does not necessarily work as is - hence this edit. (if anyone has any edits do let me know directly)
GSP Code:
<html>
<head>
<title>Simple GSP page</title>
<g:javascript library="jquery" />
<g:javascript library="jquery-ui"/>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); })
</script>
<r:layoutResources/>
</head>
<body>
<div>
<p> Between <input type="text" id="datepicker"> </p>
</div>
<r:layoutResources/>
</body>
</html>
Controller code:
def testDatePicker = {
}
Are you using the Resource framework? If yes, you should use the jquery-ui module like this:
<r:require module="jquery-ui"/>
Documentation on jquery-ui and resource framework.
Note - I incorrectly edited my original question along with providing the answer, the original question also has the solution description.
I finally was successful integrating jquery-ui and grails, faced some issue which allow the solution to runs. Steps.
Create new Grails project (my environment grails 2.2.0, JDK 7, GGTS latest version)
Install jquery-ui plug-in, edit BuildConfig add runtime ":jquery-ui:1.8.24".
Create a controller and gsp page, using grails
GSP Page content
<html>
<head>
<title>Simple GSP page</title>
<g:javascript library="jquery" />
<g:javascript library="jquery-ui"/>
<r:layoutResources/>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); })
</script>
</head>
<body>
<div>
<p> Between <input type="text" id="datepicker"> </p>
</div>
<r:layoutResources/>
</body>
</html>
Controller code:
def testDatePicker = {
}
4. Run the solution in grails, navigate to the date picker on your page, it should show you the sleek date picker
You need to add following line for plugin.
plugins {
runtime ":jquery:1.8.3"
compile ":jquery-ui:1.8.24"
}
And add the following line on which gsp page you use Jquery UI.
< head>
< g:javascript library="jquery" />
< r:require modules="jquery-ui"/>
< r:script>
$(document).ready(function() {
your code...
});
< /r:script>
< /head>
Related
I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I'm going through this CouchDB tutorial that references a few files - /_utils/script/jquery.js and /_utils/script/jquery.couch.js - that are supposed to be included.
<!DOCTYPE html>
<html>
<head><title>Tiny CouchApp</title></head>
<body>
<h1>Tiny CouchApp</h1>
<ul id="databases"></ul>
</body>
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
<script>
$.couch.allDbs({
success : function(dbs) {
dbs.forEach(function(db) {
$("#databases").append('<li>'+db+'</li>');
});
}
});
</script>
</html>
When I run the Tiny CouchApp through Fauxton, I get 404 errors for those files. I'm wondering if they have moved since the tutorial was written (around 2012), but I haven't been able to find much more up-to-date documentation.
Please check out their official documentation for updated examples.
Fauxton is coded using React and does not ship with jQuery. (but you really shouldn't rely on your database to serve you some JS)
I would like to use i18n and i10n in my Angular app.
If I understood correctly I can inject a script into my index.html and the changes regarding the language will change on the fly. I tested it and it works when I added manually the script and refresh the page.
Unfortunately, I am trying to inject the script for the right language on the fly.
I created a button and I want to add Portuguese language script on the click button.
app.controller('appController', ['$scope', '$route', 'UserTopBarWidget',
function($scope, $route, UserTopBarWidgetService){
$scope.topBarWidget = UserTopBarWidget;
$scope.topBarWidget.loadTopBarWidget();
}
}]);
In this file I just load the service I created called UserTopBarWidget.
The UserTopBarWidget:
app.service('UserTopBarWidgetService', function($http){
this.loadTopBarWidget = function(){
//loading something
};
this.loadPortugueseLanguage = function(){
var locale = "pt-pt";
$.getScript("https://code.angularjs.org/1.2.16/i18n/angular-locale_" + locale + ".js");
}
});
I have a page html called index.html and inject to it my html files:
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../common/css/style.css" />
<title></title>
</head>
<body ng-controller="AppCtrl">
<div id="container" ng-view></div>
</body>
</html>
The injected html:
<button type="button" id="searchButton" class="btn btn-default" ng-click="topBarWidget.loadPortugueseLanguage()">Portugese</button>
<h2>{{date | date: 'fullDate' }}</h2>
<h2>{{money | currency}}</h2>
The answer I get :
Tuesday, June 10, 2014
$500.00
I would like to see it in Portuguese.
What am I doing wrong?
Question
There is no way in pure angular to dynamically change locale so far, you can only do it on bootstrap level but there is a few projects that implement this functionality. This one is particularly good IMHO
https://github.com/lgalfaso/angular-dynamic-locale
There are two possible solutions to your problem really.
One is to use angular-dynamic-locale as #maurycy already explained. It's not the cleanest solution I can think of, but it's better than nothing.
The other possible solution is to create your own using other specialized i18n library like iLib for example.
Why would you ever want to do that?
Well, built-in AngularJS i18n routines does not allow for handling other calendars, time zones and formatting percents. These are serious drawbacks. The fact, that you cannot override a Formatting Locale based on user profile (or you can, but forgot about web site caching) is another.
I recommend using custom iLib-based solution (I used to recommend Globalize but after recent changes it seems a bit useless) combined with angular-translate for User Interface translation and built-in angular-locale for handling plural forms (at the time of writing angular-translate does not handle it particularly well).
At http://emberjs.com/ I am try to get the auto-updating and handlebars templates example working, it is the first one. When I run it, my html page look like:
Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!
It is just plain text, it is not like how it looks on the ember website.
This means I am not loading my javascript files right? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>EmberDemo</title>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/handlebars-1.1.2.js" type="text/javascript"></script>
<script src="./js/ember-1.5.1.js" type="text/javascript"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</body>
</html>
Here is my path in Eclipse for where my javascript files live. /EmberQuickstart/src/main/webapp/js/
My path for my index.html is /EmberQuickstart/src/main/webapp/index.html
Can anybody tell me what is wrong? I am really stumped. I should not need a webserver and a war file to get javascript to work right?
Update
Malik I changed my paths to what you said and I appear to be on the right track, but it is still not working.
Here is my console output in Chrome's developer tools:
DEBUG: ------------------------------- ember-1.5.1.js:3521
DEBUG: Ember : 1.5.1 ember-1.5.1.js:3521
DEBUG: Handlebars : 1.1.2 ember-1.5.1.js:3521
DEBUG: jQuery : 1.10.2 ember-1.5.1.js:3521
DEBUG: ------------------------------- ember-1.5.1.js:3521
Ember Debugger Active
Remove the ./ part in your src="".
You should write it as:
src="js/jQuery "
I figured it out. I am 100% new to handlebars and ember so I did not realize that I need a tag to surround my topmost . Now it works!
I recommend to use Ember-Cli to start is easy and super complete Ember-Cli