I am trying to integrate visual captcha in my jsf page. is there a link where i can see steps for doing it. i followed the below steps from visual captcha for jquery but it didn't work.
Initialization
Include jQuery library and jQuery version of the visualCaptcha front-end library into the HTML page:
Create a visualCaptcha container into the HTML page:
Initialize the captcha with the $( element ).visualCaptcha( options ) jQuery function that returns a jQuery object within the visualCaptcha object. It uses two parameters: element is a selector of a container for the visualCaptcha, options is an object of the visualCaptcha options:
var el = $( '#sample-captcha' ).visualCaptcha( {
imgPath: 'img/',
captcha: { numberOfImages: 5 }
} );
// use the following code to get the captcha object
var capthca = el.data( 'captcha' );
Related
I want to embed an Emscripten graphical application to a Vue SPA. The output of Emscripten is a .js and a .wasm file. I cannot get rid of the javascript file and write my own because it contains the proxy for the glfw API which I'm using for input handling.
I can load the javascript (with WASM) successfully with the following code:
This code injects a new <script> tag to the DOM and loads the javascript file.
injectScript(source) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = source;
document.head.appendChild(script);
document.head.removeChild(script);
}
// During mount
injectScript("xy.js")
I have a similar method that creates the global Module object for Emscripten using the DOM:
// template
<canvas id="canvas">
// During mount
injectCode(`
var canvas = document.getElementById('canvas');
var Module = {
canvas: canvas,
};
`);
This method works when I open the page for the first time. Since we are talking about a single page application the javascript context is kept and the same code fails to create the wasm context for the second time when I reopen the page.
I'm also interested in completely different solutions but I would like to keep glfw for input handling in the graphics code.
According to the Emscripten documentation the Module object supposed to have a destroy() method. I would try to call It when the Vue component unmounted but mine doesn't have It.
Tried to null the Module object during unmount and It didn't work.
I have latest Visual Studio 2019 16.5.4 Enterprise.
I've just created an ASP .Net Core 3.1 MVC application from a template (with default settings).
And I've added some JavaScript code to a Home Page's Index.cshtml:
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
#section Scripts {
<script>
function GetJSON_Simple() {
var resp = [];
return resp;
}
debugger;
var simpleData = GetJSON_Simple();
</script>
}
And I'm not able to debug JavaScript code (breakpoints inside GetJSON_Simple function body or on var simpleData = GetJSON_Simple() is never hit). I've tried both Chrome and MS Edge (Chromium).
According to this article (Debug JavaScript in dynamic files using Razor (ASP.NET) section):
Place the debugger; statement where you want to break: This causes the
dynamic script to stop execution and start debugging immediately while
it is being created.
P.S. I've already have Tools->Options->Debugging->General with turned on Enable JavaScript Debugging for ASP.NET (Chrome and IE) checkbox and of course I'm compiling in Debug.
My test project is attached
Howto debug JavaScript inside ASP .Net Core 3.1 MVC applications
(Razor view - *.cshtml)?
In fact, it is already a well-known issue. We can not debug the js code under Net Core razor page but only for code in separate js or ts files. See this link.
Solution
To solve it, I suggest you could create a new single js file called test.js and then reference it in razor page and then you can hit into js code when you debug it.
1) create a file called test.js and migrate your js code into it:
function GetJSON_Simple() {
var resp = [];
return resp;
}
debugger;
var simpleData = GetJSON_Simple();
2) change to use this in your cshtml file:
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
#section Scripts {
<script scr="xxx/test.js">
</script>
}
3) clean your project, then rebuild your project and debug it and you will hit into Js code.
Another way is to explicitly define the source mapping name for the script directly in your javascript code via a sourceURL comment.
<script>
...your script code
//# sourceURL=blah
</script>
The script in that block will show up in Chrome with the value you specified. You can then view and debug just like a normal .js file.
This is especially useful if you don't want to refactor an existing codebase that has embedded javascript in the cshtml files or really ANY codebase that has javascript loaded on the fly.
Live Example
You can actually see an example with the built-in javascript runner here. Just click 'Run Snippet' and then search for "blahblah" in your Page sources. You should see this:
alert("test");
//# sourceURL=blahblah
I use prerender-spa-plugin in vue.js app for rendering html
but it can't render dynamic data.
when prerender-spa-plugin complete rendering
created html file only contains some html code not showing any dynamic data
Method
Mounted
prerender-spa-plugin Configuration
Adding the headless option solve the problem for me:
renderer: new Renderer({
injectProperty: '__PRERENDER_INJECTED',
renderAfterTime: 5000,
// Other puppeteer options.
// (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
headless: false // Display the browser window when rendering. Useful for debugging.
})
I'm working on a project using angular 5 and I'm trying to render components that come from database. I have a lot of components and the user can create a page and include them as he or she wants.
This is a migration intent from a project in Angular 1.6. So, this is what I have in angular 1.6
<div html-angular-bind="{{$ctrl.content}}"> </div>
And this is html-angular-bind definition for this example:
angular.module('App').directive('htmlAngularBind', [
'$compile', function($compile) {
return function(scope, elem, attrs) {
scope.$watch("$ctrl.content", function(newValue, oldValue) {
var compiled, el, html;
html = attrs.htmlAngularBind;
el = angular.element(html);
compiled = $compile(el);
elem.html(el);
return compiled(scope);
});
};
}
]);
So, let's supose I have components <component1></component1>, <component2></component2>...<component1000></component1000> in the page created by the user. All of them get replaced by the HTML defined in those components.
The question is: Is there any way to do the same in Angular 5?
I have this weird issue while using ArcGIS API for JavaScript v4.4 in my code. I am trying to build an Excel Web Add-in in which I would like to load an ArcGIS map but when I load ArcGIS I get a multipleDefine error.
ArcGIS is getting bundled with Dojo which is used as the loader for all the ArcGIS/esri packages. I have no other choices to load my own custom JS bundles with Dojo because of the way ArcGIS has built their API. So I can't decide to not use Dojo and thus not getting the multipleDefine error.
I load my own JS files like this:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>
var dojoConfig = {
parseOnLoad: false,
async: false,
// we make aliases for our js file
aliases: [
['index', './Bundles/index.js'],
],
};
</script>
<script src="https://js.arcgis.com/4.4/init.js"></script>
<script>
require(['index'], function (index) {
//...do something
});
</script>
When I restart the page I get a multipleDefine error once in every two/three trials. After a lot of investigation I understood that the error lies with the Office.js API but I had a hard time to find a good solution.
After a while I found the cause of the problem; we cannot start office-js and Dojo together because they both want to add scripts in the head tag of our page and somehow they end up in conflict with one another, thus we get the dreaded multipleDefined Dojo error and some of our files do not get loaded.
Once this cause was identified I decided to solve it by making sure Dojo, Argis and my custom js files got loaded once Office and dependencies were fully loaded.
I implemented it like this in my js code:
// This Dojo config variable has to be defined before Dojo is loaded in our scripts
var dojoConfig = {
// we make aliases for our custom js file
aliases: [
['index', './Bundles/index.js'],
],
// We require our dependencies (our own code bundles) with Dojo.
// Notice that it is mandatory to bundle our js files
// as AMD Modules for Dojo to be able to load them as dependencies.
deps: ['index'],
};
// Once office has fully initialized we can add our arcgis file and let
// him load our own required javascript files.
// We cannot start Office-js and Dojo/Arcgis together because they both
// want to add scripts in the head tag of the HTML page and
// somehow they end up in conflict, thus we get the dreaded
// multipleDefined Dojo error and some of our files
// do not get loaded.
Office.initialize = function (reason) {
// we manually add the Arcgis script to the header of our page
// once we are sure Office and dependencies has fully loaded.
var tag = document.createElement('script');
tag.src = 'https://js.arcgis.com/4.4/init.js';
document.getElementsByTagName('head')[0].appendChild(tag);
};
Once this was added the code started working like a charm.