Enable javascript content assist in Eclipse JEE - javascript

I create a dynamic web project use JSP file. When I click CTRL + SPACE, the notification is:
No JavaScript Proposals
JSP file:
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bootstrap450/js/bootstrap.js">
/* HERE, When I click `CTRL + SPACE`, the notification is `No JavaScript Proposals`. */
</script>
</head>
.....
.....
I've clicked Enable auto activation in the JavaScript section in preferences:
Environment : MAC OS and Eclipse JEE Photon.
Here the reference related this, but not solve my issue.
Is it possible to make Eclipse JEE to show javascript content assist in <script> tag?
Project Structure:
|-myproject
|-Deployment Descriptor: myproject
|-JAX-WS Web Services
|-Java Resources
|-JavaScript Resources
|-build
|-WebContent
|-bootstrap450
|-css
|-js
|-bootstrap.min.js
|-META-INF
|-WEB-INF
|-lib
|-web.xml
|-index.jsp
How can I fix it?

Related

How to import a blazor custom element in another JS application?

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>

TypeError: dart.global.firebase.firestore is not a function

I have been dealing with this issue for ever and none of the past posts on the problem proved helpful.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_4paul">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>flutter_4paul</title>
<link rel="manifest" href="manifest.json">
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
my config stuff here
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
and here is my pubspec.yaml
name: flutter_4paul
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
firebase: ^9.0.1
firebase_core: ^1.2.0
firebase_auth: ^1.2.0
cloud_firestore: "^2.2.0"
firebase_storage: ^8.1.0
flutter_login: ^1.0.10
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/logo.gif
Previous posts show this bug usually happens when missing
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
however as you can see that is present in my index.html so I am not sure what is the issue here.
Thank You!
You should add ALL the CDNs your project needs from Firebase, I don’t recommend you to add the ones you find in other examples.
To start, in case you didn't do it yet, you should:
Go to your Firebase Console
Create a new Web App for your project (if you didn't) Project settings Web App (The one you created)
Select CDN and copy and paste it in your index.html inside body, before the tag containing the main.dart.js
If you did it, and it is still not working it is because you need to add the CDN for the other services you are using.
In your case, I see you have added the next CDNs:
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
I see in your pubspec.yaml you are using firebase-storage.js as well, but it is not added. Could you try to add it in your index.html?
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
Maybe it's the same way. If you haven't solved it yet, check out the major version!
https://stackoverflow.com/a/70921671/13329045

HTML5 web based google play leaderboard submission issues

I am trying to implement a Google Play leaderboard in a very basic javascript game:
I have included what I think are the necessary meta tags, signon, and scripts in my index.html file:
<meta name="google-signin-client_id" content="xxxxxxxxxxxx-xxxxxxxxxxx.apps.googleusercontent.com" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-callback" content="signinCallback" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/games" />
I've included a standard google sign on button:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
I've included the google apis:
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
In my games.js file, I've included the call to submit the scores by:
gapi.client.load('games','v1',function(response) {
var request2 = gapi.client.games.scores.submit(
{leaderboardId: "xxxxxxxxxx",
score: 50}
);
request2.execute(function(response) {
console.log(response);
// blah blah blah
});
But nothing ever shows up on the leaderboard. The console log spit out what I'm expecting. I've confirmed the clientID and leaderboardID.
For some reason the scores aren't actually being submitted (or if they are, they aren't being processed). Anyone with experience setting this up available for some pointerd? Note that this is not a chrome app/extension - it's a pure javascript game hosted on a web server.
Based on the Leaderboards for the Web, Scores.submit by using the URI request:
POST https://www.googleapis.com/games/v1/leaderboards/leaderboardId/scores
I did not see this part on your code.
Check this firewall-defense playgames sample for more code implementation.

Delphi TWebBrowser Wont Run Javascript from LocalHost

I have a really simple Delphi XE7 program. It is basically just a TWebBrowser component embedded in a form with no extra code attached, other than a button that fires off the Browser.Navigate method. My understanding is that TWebBrowser is just an ActiveX wrapper for IE.
I am trying to use this to display a very simple page that references the D3 Javascript library (but so far doesn't do anything with it), and the web pages are served from a localhost webserver that is running on my PC using WAMPSERVER.
The web pages run just fine in Chrome or IE 11 (I have Windows 7, 64 bit). But when I try to view them within the Delphi/TWebBrowser program I get the IE error message "An error has occurred on the script on this page" (see image attached). The error seems to occur when trying to access the d3.js javascript library in the d3test/d3 folder on the local host. I have verified that the d3.js file does exist in this folder and this seems to be borne out by the fact that the page runs and displays just fine in both Chrome and IE.
Perhaps there is an issue with having an embedded web browser access locally hosted pages? Additional background -I have also cleared the IE cache, reset the Internet options on the Windows Control Panel, set IE security settings to the minimum level and temporarily disable my Norton Firewall/Virus scanner.
Does anyone have any thoughts on this? I'm really hoping to be able to get some D3 charts embedded in my Windows-based program.
Here also is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3\d3.js"></script>
</head>
<body>
Hello World
</body>
</html>
I added answer from your comments below the question so its may
helpful to others
add this meta tag into your web page
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case you should add this class to your code:
type TBrowserEmulationAdjuster = class
private
class function GetExeName(): String; inline;
public const
// Quelle: https://msdn.microsoft.com/library/ee330730.aspx, Stand: 2017-04-26
IE11_default = 11000;
IE11_Quirks = 11001;
IE10_force = 10001;
IE10_default = 10000;
IE9_Quirks = 9999;
IE9_default = 9000;
/// <summary>
/// Webpages containing standards-based !DOCTYPE directives are displayed in IE7
/// Standards mode. Default value for applications hosting the WebBrowser Control.
/// </summary>
IE7_embedded = 7000;
public
class procedure SetBrowserEmulationDWORD(const value: DWORD);
end platform;
class function TBrowserEmulationAdjuster.GetExeName(): String;
begin
Result := TPath.GetFileName( ParamStr(0) );
end;
class procedure TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(const value: DWORD);
const registryPath = 'Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION';
var
registry: TRegistry;
exeName: String;
begin
exeName := GetExeName();
registry := TRegistry.Create(KEY_SET_VALUE);
try
registry.RootKey := HKEY_CURRENT_USER;
Win32Check( registry.OpenKey(registryPath, True) );
registry.WriteInteger(exeName, value)
finally
registry.Destroy();
end;
end;
Finaly add to your OnCreate of the Form:
TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(TBrowserEmulationAdjuster.IE11_Quirks);
This should solve your problem

Grails+Jquery-ui - integration issue?

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>

Categories

Resources